时间戳

首页 > 解决方案 > React 上下文中的函数和重新渲染

reactjs - React 上下文中的函数和重新渲染

问题描述

我对新的 React Context-api 有两个问题：

  1. React 文档有以下示例从嵌套组件更新上下文。在构造函数中声明toggleTheme-function（而不是作为类方法）是否有某些特定原因？

import {ThemeContext, themes} from './theme-context';
import ThemeTogglerButton from './theme-toggler-button';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggleTheme = () => {
      this.setState(state => ({
        theme:
          state.theme === themes.dark
            ? themes.light
            : themes.dark,
      }));
    };

    // State also contains the updater function so it will
    // be passed down into the context provider
    this.state = {
      theme: themes.light,
      toggleTheme: this.toggleTheme,
    };
  }

  render() {
    // The entire state is passed to the provider
    return (
      <ThemeContext.Provider value={this.state}>
        <Content />
      </ThemeContext.Provider>
    );
  }
}

function Content() {
  return (
    <div>
      <ThemeTogglerButton />
    </div>
  );
}

ReactDOM.render(<App />, document.root);

  1. 在许多示例中，Provider-component 具有 high-up -component 的状态作为其值（就像在上面的示例中一样）。这意味着每次我想更新 Context-value 时，我都需要更新 high-up 组件的状态。这意味着 high-up 组件在状态更新时重新渲染，这反过来意味着它的所有子组件也重新渲染。但我想要的只是让监听该 Provider 组件的 Consumer-components 重新渲染。现在基本上每次我更新上下文值时整个应用程序都会重新渲染......我错过了什么吗？

标签： reactjs

解决方案

toggleTheme作为回调传递，应该绑定到正确的this. 如果它是类原型方法，则它需要this.toggleTheme = this.toggleTheme.bind(this)在构造函数中以任何方式。请参阅此相关问题。

正如文件所述，

每当 Provider 的 value 属性发生变化时，所有作为 Provider 后代的 Consumer 都会重新渲染。从 Provider 到其后代 Consumer 的传播不受 shouldComponentUpdate 方法的约束，因此即使祖先组件退出更新，Consumer 也会更新。

包含Provider( App) 的组件应重新渲染以提供 new value，而其后代则不应。在这个例子中，它的直接子元素 ( Content) 可能是PureComponent为了防止在整个层次结构中不必要的重新渲染。对于影响整个应用程序的上下文（如主题上下文），不会有显着的性能改进。

推荐阅读