【React 源码】React Context 原理

// 假设我们有一个React应用程序，我们想要使用Context API来实现全局状态管理。
import React, { createContext, useContext, useReducer } from 'react';
 
// 创建一个Context对象
const StoreContext = createContext();
 
// 创建Reducer来处理状态的更新
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};
 
// Provider组件，用于包装应用程序的根组件
const StoreProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <StoreContext.Provider value={{ state, dispatch }}>
      {children}
    </StoreContext.Provider>
  );
};
 
// 自定义钩子函数，用于消费Context中的状态和分发行为
const useStoreContext = () => {
  const context = useContext(StoreContext);
  if (!context) {
    throw new Error('useStoreContext must be used within a StoreProvider');
  }
  return context;
};
 
// 使用示例
function App() {
  const { state: { count }, dispatch } = useStoreContext();
  return (
    <div>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
    </div>
  );
}
 
// 在根组件上包装Provider
const Root = () => (
  <StoreProvider>
    <App />
  </StoreProvider>
);
 
export default Root;

这个代码示例展示了如何在React应用程序中使用Context API来管理全局状态。我们创建了一个名为StoreContext的Context对象，并提供了一个StoreProvider组件，它包装在应用程序的根组件上。我们还定义了一个自定义钩子函数useStoreContext，用于获取状态和分发行为。最后，我们展示了如何在App组件中使用这些状态和行为。