渲染控制

2023-03-31 14:21:21

对于 React 渲染，不仅是类组件触发 render 函数，函数组件本身执行，事实上，从调度更新任务到调和 fiber，再到浏览器渲染真实 DOM，每一个环节都是渲染的一部分，至于对于每个环节的性能优化，React 在底层已经处理了大部分优化细节，包括设立任务优先级、异步调度、diff 算法、时间分片都是 React 为了提高性能，提升用户体验采取的手段。所以，开发者只需要告诉 React 哪些组件需要更新，哪些组件不需要更新。于是，React 提供了 PureComponent，shouldComponentUpdated，memo 等优化手段。这些手段是什么呢？

render 的作用

render 的作用是根据一次更新中产生的新状态值，通过 React.createElement ，替换成新的状态，得到新的 React element 对象，新的 element 对象上，保存了最新状态值。 createElement 会产生一个全新的 props。到此 render 函数使命完成了。

接下来，React 会调和由 render 函数产生 children，将子代 element 变成 fiber（这个过程如果存在 alternate，会复用 alternate 进行克隆，如果没有 alternate ，那么将创建一个），将 props 变成 pendingProps ，至此当前组件更新完毕。然后如果 children 是组件，会继续重复上一步，直到全部 fiber 调和完毕。完成 render 阶段。

控制 render

缓存 React.element 对象

这是一种父对子的渲染控制方案，来源于一种情况，父组件 render ，子组件有没有必要跟着父组件一起 render ，如果没有必要，则就需要阻断更新流

/* 子组件 */
function Son({ number }) {
  console.log('子组件渲染')
  return <div>receive father's numberA {number} </div>
}
/* 父组件 */
export default class Father extends React.Component {
  state = {
    numberA: 0,
    numberB: 0
  }
  render() {
    return (
      <div>
        <Son number={this.state.numberA} />
        <button
          onClick={() =>
            this.setState({
              numberA: this.state.numberA + 1
            })
          }
        >
          numberA + 1
        </button>
        <button
          onClick={() =>
            this.setState({
              numberB: this.state.numberB + 1
            })
          }
        >
          numberB + 1
        </button>
      </div>
    )
  }
}