React 6/100 React原理 | setState | JSX语法转换 | 组件更新机制

Posted 2020-11-24 cn-yangx

****关键字 | setState | JSX语法转换 | 组件更新机制

组件更新机制

• setState() 的两个作用
  • 修改state
  • 更新组件
• 过程：父组件重新渲染时，也会重新渲染子组件，但只会渲染当前组件子树（当前组件以其所有子组件）

组件性能优化

减轻state

• 减轻state：只存储跟组件渲染相关的数据（比如：count/ 列表数据 /loading等）
• 注意：不用做渲染的数据不要放在state中
• 对于这种需要在多个方法中用到的数据，应该放到this中

避免不必要的重新渲染

• 组件更新机制：父组件更新会引起子组件也被更新，这种思路很清晰
• 问题：子组件没有任何变化时也会重新渲染
• 如果避免不必要的重新渲染？
• 解决方式：使用钩子函数 shouldComponentUpdate(nextProps, nextState)
  • 在这个函数中，nextProps和nextState是最新的状态以及属性
• 作用：这个函数有返回值，如果返回true，代表需要重新渲染，如果返回false，代表不需要重新渲染
• 触发时机：更新阶段的钩子函数，组件重新渲染前执行(shouldComponentUpdate => render)

// 生成随机数
class RandomNumber extends React.Component {
    state = {
        number: 0
    };
    btnHandlerClicked = () => {
        this.setState((state, props) => {
          return {
              number: Math.ceil(Math.random() * 3)
          }
        })
    };

    // 两次生成的随机数可能相同，如果相同就没必要重新渲染
    // 将要更新UI的时候会执行这个钩子函数
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log('nextProps: ',nextProps ,' -- nextState： ' , nextState , ' -- nextContext' , nextContext , ' -- this.state', this.state);
        if(nextState.number !== this.state.number || nextProps.sendnumber !== this.props.sendnumber){
            return true;
        }
        return false;
    }

    render() {
        console.log('render -- ');
        return (
            <div>
                <h2>随机数: {this.state.number}</h2>
                <button onClick={this.btnHandlerClicked}>clickedMe create random number</button>
            </div>
        )
    }
}

// 渲染
ReactDOM.render(<RandomNumber/>, document.getElementById('root'));

纯组件

作用以及使用

• 纯组件： PureComponent 与 React.Component 功能相似

• 区别： PureComponent 内部自动实现了 shouldComponentUpdate钩子，不需要手动比较

• 原理：纯组件内部通过分别比对前后两次 props和state的值，来决定是否重新渲染组件

  // 生成随机数
  class RandomNumber extends React.PureComponent {
      state = {
          number: 0
      };
      btnHandlerClicked = () => {
          this.setState((state, props) => {
              return {
                  number: Math.ceil(Math.random() * 3)
              }
          })
      };
  
      render() {
          console.log('render -- ');
          return (
              <div>
                  <h2>随机数: {this.state.number}</h2>
                  <button onClick={this.btnHandlerClicked}>clickedMe create random number</button>
              </div>
          )
      }
  }
  
  // 渲染
  ReactDOM.render(<RandomNumber sendnumber={1234}/>, document.getElementById('root'));

实现原理

• 说明：纯组件内部的对比是 shallow compare（浅层对比）
• 对于值类型来说：比较两个值是否相同
• 引用类型：只比对对象的引用地址是否相同
• 注意：state 或 props 中属性值为引用类型时，应该创建新数据，不要直接修改原数据

// 正确做法：创建新对象
const newObj = { ...this.state.obj, number: Math.floor(Math.random() * 3) }
this.setState(() => {
    return {
        obj: newObj
    }
})

// 错误演示：直接修改原始对象中属性的值
const newObj = this.state.obj；
newObj.number = Math.floor(Math.random() * 3)

this.setState(() => {
    return {
        obj: newObj
    }
})