首页 > 专栏 > 前端 > 文章详情
React 中的 Context 会有重复渲染的 Bug 情况,如何解决? 发布于:2021-03-27 08:12:46   来源:React   查看:9  讨论:0
当Provider提供的值,发生改变时,会导致Provider的子组件也会跟着渲染,也就是多渲染了一次,这种情况怎么解决?Pu2易塔云建站-模板下载,web开发资源,技术博客
因为 context 会使用参考标识(reference identity)来决定何时进行渲染,Pu2易塔云建站-模板下载,web开发资源,技术博客
这里可能会有一些陷阱,当 provider 的父组件进行重渲染时,可能会在 consumers 组件中触发意外的渲染。Pu2易塔云建站-模板下载,web开发资源,技术博客
举个例子,当每一次 Provider 重渲染时,以下的代码会重渲染所有下面的 consumers 组件,Pu2易塔云建站-模板下载,web开发资源,技术博客
因为 value 属性总是被赋值为新的对象:
class App extends React.Component {
  render() {
    return (
        <MyContext.Provider value={{something: 'something'}}>
          <Toolbar />
        </MyContext.Provider>
    );
  }
}

为了防止这种情况,将 value 状态提升到父节点的 state 里:Pu2易塔云建站-模板下载,web开发资源,技术博客

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }
  render() {
    return (
        <Provider value={this.state.value}>
          <Toolbar />
        </Provider>
    );
  }
}

评论

  • 匿名