React中createContext和useContext的使用-实例

在demo中，我可以通过全局组件传递一个属性改变按钮的颜色，当父组件改变color颜色时，子组件也随之改变颜色

当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。即使祖先使用 React.memo 或 shouldComponentUpdate，也会在组件本身使用 useContext 时重新渲染 查看原文

• ThemeContext.tsx

import React from "react";

const ThemeContext = React.createContext('light');
export default ThemeContext

• index.tsx

import ThemedButton from './ThemedButton'
import React from "react";
import Context from './ThemeContext'

function Toolbar(props) {
  // Toolbar 组件接受一个额外的“theme”属性，然后传递给 ThemedButton 组件。
  // 如果应用中每一个单独的按钮都需要知道 theme 的值，这会是件很麻烦的事，
  const obj = React.useContext(Context);
  // 因为必须将这个值层层传递所有组件。
  console.log(obj);
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class App extends React.Component {
  state = {
    color:'red'
  }

  changeColor = ()=>{
    this.setState({
      color:'pink'
    })
  }
  render() {
    return <div>
      <Context.Provider value={ this.state.color }>
        <Toolbar />
      </Context.Provider>

      <Button onClick={this.changeColor}>改变颜色</Button>
    </div>;
  }
}
export default App

• 引用 ThemedButton.tsx

import React from "react";
// @ts-ignore
import context from './ThemeContext'
import { Button } from "antd";

function MyButton() {
  const obj = React.useContext(context);
  console.log(obj);

  return <div>
    <Button style={{color:obj}} >我是按钮</Button>
  </div>;

}
export default MyButton