context 在不同类型组件的使用理解

对 react 中 context 的理解

使用 context 的大致目的：共享数据，避免数据的层层传递

类组件中的 context

• 步骤一：创建一个 context 对象，当加载到订阅这个 context 对象的组件的时候，会自动匹配下文 provider 中的 value 值。

  const AuthContext = React.createContext(undefined);
  

• 步骤二：创建 provider，传递给消费组件，并订阅 conetext 的变化，即 value 值的变化，可以将 响应式数据绑定给 value

  <AuthContext.Provider value={this.state.theme}>
  	<子组件 />
  </AuthContext>
  

  问题： Provider 里面 怎么添加 children

• 步骤三：消费组件订阅 context，使用 this.context 来消费 最近的context

  static contextType = AuthContext;
  return (
  	<div>{ this.context }</div>
  )
  

函数组件中的 context

• 步骤一：创建一个 context 对象

  const ThemeContext = React.createContext<{themeState: string} | undefined>(undefined);
  

• 步骤二：在创建一个 provider 函数组件

  export const ThemeProvider = (props: {children: ReactNode}) => 	{
  	const [themeState, setThemeState] = useState('light');
  	useEffect(() => {
      	setTimeout(() => {
          	setThemeState('dark')
      	}, 4000);
  	}, [])
  	return (
      	<ThemeContext.Provider value={{themeState}}>
          	{ props.children }
      	</ThemeContext.Provider>
  	)
  }
  
  // 自定义一个 hooks，下文使用
  export const useAuth = () => {
  	const context = useContext(ThemeContext);
  	if(!context){
      	throw new Error()
  	}else{
      	return context
  	}
  }
  

• 步骤三：消费组件订阅 context，有两种消费方式：一是通过 useContext 获取，另一种是通过 <ThemeContext.Consumer> 来消费

  // 先将需要消费的组件用 `provider` 包括起来
  <ThemeProvider>
  	<App />
  </ThemeProvider>
  

  // 第一种方式
  // 在app组件中，通过自定义的 useAuth 获取订阅的 context
  const { themeState } = useAuth();
  

  // 第二种方式
  // 直接在组件中消费
  <ThemeContext.Consumer>
    	{
      	(value) => value?.themeState
   	 }
  </ThemeContext.Consumer>