React的Context对象解决props传递数据的烦恼！

Posted 2023-04-24

参考技术A 作为子组件的 Toolbar 必须显式定义 theme 属性， ThemedButton 才能够获的 theme 数据。当 ThemedButton 与 App 之间嵌套了很多层，且使用 ThemedButton 的页面又非常多，那么工作就会变的异常麻烦。

用 React.createContext 创建的 Context 对象，不论组件嵌套多深，都无需再中间组件显式传递 theme 属性，也可以把 theme 属性值传递下去。

class 组件中获取Context对象的数据，分两步：

函数组件中没有 contextType 属性，所以使用 useContext 这个 Hook 函数来解决 props 传递数据的烦恼。

React Context上下文学习笔记

我们知道，React中的数据传递是自上而下的（从父组件传给子组件），通过props逐层传递。
但是这样层数多了，会极其繁琐。因此，就提到了Context上下文共享数据，这种方法不需要显式的通过props传递。

一、Context：为了给某个组件共享全局数据。

例如：网站当前登陆用户、主题、首选语言等。

1. Context 主要应用场景：很多不同层级的组件需要访问一些同样的数据。
2. 谨慎使用，会使复用性变差。

const ThemeContext = React.createContext("light");
const App2 = () => {
  return (
    <ThemeContext.Provider value="yellow">
      <Toolbar />
    </ThemeContext.Provider>
  );
};

const Toolbar = () => {
  return (
    <div>
      <ThemeButton />
    </div>
  );
};

class ThemeButton extends React.Component {
  // 指定 contextType 读取当前的 theme context。 React 会往上找到最近的 theme Provider，然后使用它的值。
  // 在这个例子中，当前的 theme 值为 “yellow”。
  static contextType = ThemeContext; // 可以使用 static 这个类属性来初始化你的 contextType。
  render() {
    return <Button theme={this.context} />;
  }
}

const MyContext = React.createContext(defaultValue);

创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。
只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。

通过新旧值检测来确定变化，使用了与 Object.is 相同的算法。

<MyContext.Provider value={变量} >

1. Provider接受一个value属性，传递给消费组件，可以一对多。
2. Provider的value发生变化时，所有使用它的消费组件都会重新渲染。
3. 要将value提到state中，否则会触发所有consumers组件的重新渲染。
   错误案例：

class App extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{something: 'something'}}>
        <Toolbar />
      </MyContext.Provider>
    );
  }
}

正确写法：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }

  render() {
    return (
      <MyContext.Provider value={this.state.value}>
        <Toolbar />
      </MyContext.Provider>
    );
  }
}