从工作原理入手理解React二：上下文Context

什么是 Context

Context（上下文） 是一种在组件树中直接传递数据的机制，可以避免逐层手动传递props。通过Context可以实现全局数据共享，同一组件树中的所有组件都可以直接获取。

为什么需要Context

在React中，通常情况下我们通过 Prop 将父组件的数据传递给子组件的方式实现数据的传递，但在某些情况下，由于组件的嵌套层级比较深，就会导致 Prop的传递变得冗长和难以维护。Context就是为了解决这一问题而诞生，所以Context可以看成一个优化代码组织方式的API。

如何使用Context

Context的使用分为创建Context、提供Context和消费Context，示例代码如下：

//创建context
const AppContext = createContext("context")
const App = () => {
    return (
      // 提供context值
      <AppContext value="contextText">
         <Hello />
      </AppContext>
    )
}

function Hello() {
    //消费context
    const contextText = useContext(AppContext)
    return (
        <div>
            <h1>say {contextText}</h1>
        </div>
    )
}

Context的使用场景

Context 一般适合用于那些很多不同层级的组件都需要访问的“全局”数据。如：

• 主题（Theme） ：如深色/浅色模式
• 用户认证信息：当前登录的用户对象
• 多语言国际化（i18n） ：当前选择的语言
• 路由信息：React Router 库就使用了 Context
• 状态管理：React-Redux 等库的内部也基于 Context