【React Hooks】useContext 用法

useContext 介绍

const value = React.useContext(MyContext)

• 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。
• 当前的 context 值由上层组件中距离当前组件最近的的valueprop决定
• 当组件上层最近的更新时，该Hook 会触发重新渲染，并使用最新传递给MyContextproviderd的 context value值
• 即使祖先使用React.memo 或 shouldComponentUpdate ，也会在组件本身使用useContext是重新渲染
• useContext的参数必须是 context 对象本身

正确：useContext(MyContext)
错误：useContext(MyContext.Consumer)
错误：useContext(MyContext.Provider)

• 调用useContext的组件总会在context值变化时重新渲染。
• 如果重新渲染组件的开销较大，你可以通过使用memoization来优化
• useContext(MyContext)相当于 class 组件中的static contextType = MyContext或者
• useContext(MyContext)只是让你能够读取 context 的值以及订阅 context 的变化。
• 你依然需要在上层组件树中使用来为下层组件提供 context。

useContext 使用

import React, {useContext } from 'react';
//创建 context对象

//createContext 参数  可以进行初始化操作
const colorContext = React.createContext("green");

//Child
function Child() {
  //传递给 useContext 的是 context 而不是 consumer
  const color = useContext(colorContext);
  return <div>
    <h3>子页面</h3>
    颜色值是：{color}
  </div>
}

function App() {
  return (
    <colorContext.Provider value={"yellow"}>
      <div>
        <h2>useContext</h2>
        <Child />
      </div>
    </colorContext.Provider>
  )
}
export default App;

import React, {useContext } from 'react';
//创建 context对象

//createContext 参数  可以进行初始化操作
const colorContext = React.createContext("green");
const userContext = React.createContext({ "username": "lili" });

//useContext 写多个context时，可以避免 组件多层级嵌套
//Child
function Child() {
  //传递给 useContext 的是 context 而不是 consumer
  const color = useContext(colorContext);
  const user = useContext(userContext);
  return <div>
    <h3>子页面</h3>
    颜色值：{color}<br/>
    名字：{user.username}
  </div>
}

function App() {
  return (
    <colorContext.Provider value={"yellow"}>
      <div>
        <h2>useContext</h2>
        <Child />
      </div>
    </colorContext.Provider>
  )
}
export default App;