从组件间数据流的视角审视 React：部分（下）

2023-11-21 10:44:49

在上一部分中，我们探讨了 React 组件间数据流的两种主要模式：道具和状态。现在，让我们深入了解其他机制，它们进一步扩展了 React 的数据管理功能。

上下文 API

上下文 API 允许组件访问在组件树中更深层次定义的数据，而无需显式传递道具。它特别适用于需要跨多个组件级别访问共享数据的情况。

使用上下文 API，我们可以创建一个 Context 提供程序，它将共享数据包装在 React 上下文中。然后，任何子组件都可以通过使用 useContext 钩子访问该数据，如下所示：

import { createContext, useContext } from 'react';

const MyContext = createContext(null);

export function MyProvider({ children }) {
  const [value, setValue] = useState('初始值');
  return <MyContext.Provider value={{ value, setValue }}>{children}</MyContext.Provider>;
}

export function MyComponent() {
  const { value, setValue } = useContext(MyContext);
  return <p>{value}</p>;
}

Redux

Redux 是一个状态管理库，它引入了中央数据存储（存储库）的概念。在 React 应用程序中，Redux 允许跨组件共享和管理应用程序状态。

使用 Redux，我们可以定义操作（action）来状态改变，并使用 reducer 函数来更新存储库中的状态。组件可以订阅存储库中的状态，并在状态改变时自动重新渲染。

// action.js
const ADD_TODO = 'ADD_TODO';

export const addTodo = text => ({
  type: ADD_TODO,
  payload: { text }
});

// reducer.js
const initialState = {
  todos: []
};

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [...state.todos, action.payload.text]
      };
    default:
      return state;
  }
}

// store.js
import { createStore } from 'redux';
import reducer from './reducer';

export default createStore(reducer);