React之什么是context

什么是context

组件共享状态，不必逐层逐层传递，可以实现具有地区偏好，UI 主题这些功能

什么时候使用

Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

实例

1使用const ThemeContext = React.createContext(‘light’)创建

2使用Provider包裹

3使用contextType接收

const ThemeContext = React.createContext('light');
爷爷组件
render() {
    // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
    // 无论多深，任何组件都能读取这个值。
    // 在这个例子中，我们将 “dark” 作为当前的值传递下去。
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
孙子组件
// 指定 contextType 读取当前的 theme context。
  // React 会往上找到最近的 theme Provider，然后使用它的值。
  // 在这个例子中，当前的 theme 值为 “dark”。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }

但是会导致组件复用性变差，因为比props多了定义

另一种，跨组件传递，直接把最后的组件封装，然后传递给最后需要的地方

React.createContext,Provider,

直接在class定义content

类名.contentType = 上面定义的content

响应context变化

通过改变provider的值，然后实现重新渲染，然后改变子组件的内容

context.Consumer和provider实现多层生产和消费，provider主要用来修改传递的值，可以和state绑定