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