[] React React 6/100 principle | setState | JSX syntax conversion | component update mechanism

**** keyword | setState | JSX syntax conversion | component update mechanism

Component update mechanism

• the setState () action of the two
  • Modify state
  • Update component
• Process: re-rendered when the parent component, sub-assembly will be re-rendered, but will only render the current component sub-tree (the current component in all its subcomponents)

Component Performance Optimization

Reduce the state

• Reduce the state: only stored with the component rendering the relevant data (for example: count / list data / loading, etc.)
• Note: Do not do the rendering data on the state of
• This need for data used in multiple methods, should be placed in this

Avoid unnecessary re-rendering

• Component update mechanism: The parent component updates will cause the sub-components are also updated, this line of thinking is very clear
• Question: When will re-render the sub-assemblies without any change
• If you avoid unnecessary re-rendering?
• Solution: Use the hook function shouldComponentUpdate (nextProps, nextState)
  • In this function, nextProps and nextState state and property is up to date
• Role: This function returns a value, if it returns true, representatives need to re-render, if it returns false, representatives do not need to re-render
• Trigger timing: update phase hook function, before re-render the component execution (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'));

Pure components

The role and use

• Pure components: PureComponent similar function with React.Component

• Difference: the internal PureComponent automatically shouldComponentUpdate hook, without having to manually compare

• Principle: The internal components of pure value, respectively, by comparing before and after the two props and the state, to decide whether to re-render the component

  // 生成随机数
  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'));

The principle

• Description: Comparative inside the pure components are shallow compare (Shallow comparative)
• For value type is: compare two values ​​are identical
• Reference types: more than just a reference to the object is the same address
• Note: When the state or props attribute value is a reference type, should create new data,不要直接修改原数据

// 正确做法：创建新对象
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
    }
})