React 基础知识总汇（持续更新ing）

React

JSX语法

• 核心理解

• JSX中的HTML标签属性名

1. 指定 class 需使用 className
2. 指定 <label> 标签的 for 需使用 htmlFor
3. 事件名称需使用驼峰式命名法，例如指定 click 事件需使用 onClick

• 自定义组件

1. 自定义组件名必须以大写开头，例如：<HelloWorld />
2. 父组件向子组件传值：使用属性的方式传值，例如：<HelloWorld name={myName}  />，在子组件中使用 this.props.属性名 取值，例如：this.props.myName（注意：子组件只能读取父组件传来的值，不可以直接修改。如需修改，需通过触发事件，调取父组件的方法去修改。）
3. 子组件向父组件传值：子组件不可以直接向父组件传值，但可以通过触发事件的方式将要传递的值以参数的形式传入父组件。

• JS与HTML的结合使用技巧

1. 使用变量表示HTML，例如

   ...
   render(){
       const templateHeader = (
           <div className="header">
               <p>这里是标题</p>
           </div>
       )
       const templateList = (
           <ul>
               {
                 [1,2,3].map((item,index)=>{
                   return(
                     <li key={index+item}>{item}</li>
                   )
                 })
               }
           </ul>
       )    
   
       return(
           <div class="container">
               {templateHeader}
               {templateList}
           </div>
       )
   }
   ...
   

    

State

1. 任何时候，不可以直接修改 state 的值。下列写法都是错误的：

   1.    this.state.name = '张三'
   
   2.    let list = this.state.list   //此处list指针依然指向this.state.list
         list[0] = "蔬菜"
   
   3.    let myState = {
             name: '张三',
             age: 30  
         }
         this.state = myState

2. 应该使用 setState 方法修改 state 的值：

   ...
   changeMan(myName){
       let man = JSON.parse(JSON.stringify(this.state.man))    //深拷贝
       //  let { man } = this.state   这种写法仅当 man 对象是一维对象时才可以使用。因为解构是浅拷贝
       man.name = myName
       this.setState({
           man
       })
   }
   ...

3. setState 方法是合并操作，并不是覆盖：

   this.setState({
       list: myList 
   })
   
   以上代码等同于下列代码（下列写法是错误的，我们仅用于对比）
   
   this.state.list = myList

4. setState 方法可能是异步的，它拥有第二个参数，是一个回调函数，必要时请使用：

   ...
     this.state = {
       list: ['a','b']
     }
   ...
     changeList(){
       let list = JSON.parse(JSON.stringify(this.state.list))
       //  let { list } = this.state   这种情况，可以使用解构赋值
       lsit.push('c')
   
       this.setState({
         list
       },()=>{
         console.log(this.state.list)      //  ['a','b','c']
       })
   
       console.log(this.state.list)      //  ['a','b']
     }
   ...

    

生命周期（不列举官方即将剔除的生命周期）

• 挂载阶段

1. constructor(props,context):  react数据初始化阶段。（注意：只要使用了 constructor 就必须写 super() ,否则会导致this指向错误）

   constructor(props){
       super(props)
       this.state = {
           ...
       }
   }

    

2. render():  每当组件更新时触发。（组件第一次挂载时也会触发）

   render(){
       return(
           <div>
               Hello World!
           </div>
       )
   }

    

3. componentDidMount():  组件第一次渲染完成后（加载完DOM后）触发。

   componentDidMount(){
       ajax请求操作...
   }

    

• 更新阶段

1. shouldComponentUpdate(nextProps,nextState):  组件在更新前，可决定是否继续更新。经常用于性能优化。如果使用，必须返回true 或 false。返回 false 可阻止组件进一步更新，返回 true 则允许组件更新。

   shouldComponentUpdate(nextProps,nextState){
       if(nextProps.list === this.props.list){
           return false
       }
       return true
   }

    

2. render():  每当组件更新时触发。
3. componentDidUpdate(prevProps,prevState):  每当组件更新完毕后触发。

• 卸载阶段

1. componentWillUnmount ():  组件卸载前触发。

   componentWillUnmount(){
       window.clearTimeout(timeId)
   }

    

Redux

action

1. action:  用于描述 state 要更新，但不描述怎么更新：

   updateListAction = {
       type: 'UPDATE_LIST_ACTION',    //type为必传字段
       list: newList    //此处为用户自定义字段，也可以是多个字段
   }

2. action创建函数:  用于创建action的函数，注意区别它与 action 的概念：

   function createUpdateListAction(newList){
       return {
           type: 'UPDATE_LIST_ACTION',
           list: newList
       }
   }

    

reducer

• reducer:  用于指定如何更新 state(注意：这里不能在方法内直接修改state的值)：

  function todoApp(state = initialState, action) {
    switch (action.type) {
      case 'UPDATE_LIST_ACTION':
        return {
          ...state,
          list: action.list
        }
      default:
        return state
    }
  }

store

1. store:   用于将action和reducer联系起来。实际的数据改变也是在store中进行的。
2. getState():  用于获取state的值。
3. dispatch(action):  用于分发action，将action分发出去，才能改变state的值。