React Context：组件跨层级共享状态参数

前言

通常情况下，我们通过props将参数从父组件传递给子组件，达到组件间状态参数共享的目的。但是面对嵌套了多层组件的情况，继续使用props一层一层的传递参数是非常冗余和繁琐的。

对于这种包含多层组件的传参，React提供了 Context 能力来支持父组件向它包含的无论嵌套层级有多深的子组件传递状态参数，让状态共享变的简单。

一、创建 Context

通过 createContext 创建Context对象，并且将其从定义Context的文件中导出，这样其他组件才能使用这个 Context；

createContext 函数有一个必填参数，这个参数是 context 对象初始化的默认值，这个参数可以传入任何类型的值。

javascript
// context.ts
import { createContext } from 'react';
export const RootContext = createContext({name:'levenx'});

二、注册 Context Provider

在需要共享状态的最高层级的父组件外层包裹 context provider，这样它包含的所有子组件都可以使用 context 中的状态

javascript
import { RootContext } from './context.js';
import { useState } from 'react'
export default function Root({ level, children }) {
	const [userInfo, setUserInfo] = useState({name:'levenx'});
  return (
      <RootContext.Provider value={userInfo}>
					<section className="section">
		        {children}
				 </section>
      </RootContext.Provider> 
在Root组件上包裹 Context Provider后，Root组件中的所有子组件都能够通过 RootContext获取userInfo信息。
三、消费 Context 状态
在子组件中引入已经注册好的 context 并且通过 useContext hook来消费共享的状态参数；
javascript
import { useContext } from 'react'
import { RootContext } from './context.js'
export default function Heading({ children }) {
  const userInfo = useContext(RootContext);
  // ...
   return <div>{userInfo.name}</div>
useContext是React内置的Hook，使用它可以从Context中读取状态，当 Context状态发生变化时，useContext读取的状态也会随之变化。
💡 并不是所有场景都适合使用 context，很多时候项目中很容易过度使用它。
context 相较于props从代码阅读角度而言，并不是那么清晰明了，通过props传递的参数，在传递时能够清晰知道传递了什么，context的话，需要从多个文件中梳理逻辑。