React Context 中的函数和重新渲染

Question

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

1. React 文档有以下示例Updating context from a nested component。在构造函数中声明 toggleTheme 函数（而不是作为类方法）是否有某些特定原因？

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 组件在状态更新时重新渲染，这反过来意味着它的所有子组件也重新渲染。但我想要的只是让消费者组件监听该提供者组件重新渲染。现在，每次我更新 Context-value 时，基本上整个应用程序都会重新渲染......我错过了什么吗？

Answer 1

toggleTheme 作为回调传递，应该绑定到正确的this。如果是类原型方法，则无论如何都需要在构造函数中使用this.toggleTheme = this.toggleTheme.bind(this)。见this related question。

正如the documentation 所说，

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

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