useContext 介绍

useContext是来解决什么问题的？

useContext 是的替代品，可以大量简化获取共享数据值的代码。
useContext 基本用法

import React, { useContext, useState } from "react";
const UserContext = React.createContext()

const ChildComponent = () => {
    const data = useContext(UserContext)
    return (
        <div>{data.name}</div>
    )
}

// 注意事项
// 因为 context 会根据引用标识来决定何时进行渲染（本质上是 value 属性值的浅比较），所以这里可能存在一些陷阱，当 provider 的父组件进行重渲染时，可能会在 consumers 组件中触发意外的渲染。为了防止这种情况，将 value 状态提升到父节点的 state 里：
const AppComponet = () => {
    const [data, setData] = useState({name: 'john'})
    return (
        <UserContext.Provider value={data}>
            <ChildComponent></ChildComponent>
        </UserContext.Provider>
    )
}

export default AppComponet

消费多个 Context

// Theme context，默认的 theme 是 “light” 值
const ThemeContext = React.createContext('light');

// 用户登录 context
const UserContext = React.createContext({
  name: 'Guest',
});

class App extends React.Component {
  render() {
    const {signedInUser, theme} = this.props;

    // 提供初始 context 值的 App 组件
    return (
      <ThemeContext.Provider value={theme}>
        <UserContext.Provider value={signedInUser}>
          <Content />
        </UserContext.Provider>
      </ThemeContext.Provider>
    );
  }
}

// 一个组件可能会消费多个 context
function Content() {
  return (
    <ThemeContext.Consumer>
      {theme => (
        <UserContext.Consumer>
          {user => (
            <ProfilePage user={user} theme={theme} />
          )}
        </UserContext.Consumer>
      )}
    </ThemeContext.Consumer>
  );
}

注意⚠️：如果两个或者更多的 context 值经常被一起使用，那你可能要考虑一下另外创建你自己的渲染组件，以提供这些值。

sanlangguo / learn-notes

useContext 介绍 #24

useContext 介绍