React快速掌握之:createContent、useContextuse、useReducer

我是亚光啊
394 阅读2分钟

React知识点之: createContext 、useContext 、useReducer

  1. createContext 是一个函数，用于创建一个上下文对象，用于在组件之间共享数据。
  2. useContext 是一个 Hook，用于在函数组件中访问上下文对象中的值。
  3. useReducer 是一个 Hook，用于处理复杂状态逻辑，并触发状态更新。

createContext 接受一个初始值作为参数，然后返回一个上下文对象。上下文对象中包含了一个 Provider 组件和一个 Consumer 组件，我们可以通过 Provider 来提供一个新的值，并通过 Consumer 来消费这个值。

import React, { createContext } from 'react';
const MyContext = createContext();

...
<MyContext.Provider value={{ name: 'Jerry', age: 20 }}>
  <App />
</MyContext.Provider>

在这个示例中，我们将 { name: 'Jerry', age: 20 } 作为新的值传递给 MyContext.Provider 组件，并将 App 作为其子组件。

在第一个组件中，我们可以使用Consumer来消费他：

const MyComponentB = () => (
  <div>
    <MyContext.Consumer>
      {value => (
        <div>
          <p>Name: {value.name}</p>
          <p>Age: {value.age}</p>
        </div>
      )}
    </MyContext.Consumer>
  </div>
);

在另一个组件中，我们也可以使用 useContext 来访问上下文对象中的值：

import React, { useContext } from 'react';

const MyComponentA = () => {
  const value = useContext(MyContext);
  return (
    <div>
      <p>Name: {value.name}</p>
      <p>Age: {value.age}</p>
    </div>
  );
};

在这个示例中，我们使用 useContext Hook 来获取 MyContext 上下文对象中的值，并将其显示在组件中。

useReducer 是一个 Hook，用于处理复杂的状态逻辑，它接收一个 reducer 函数和一个初始状态作为参数，并返回一个包含当前状态值和 dispatch 方法的数组。dispatch 方法用于触发状态更新，由 reducer 函数处理状态的变化。

const cartReducer = (state, action) => {
  switch (action.type) {
    case 'add':
      return { items: [...state.items, action.payload] };
    case 'remove':
      return { items: state.items.filter((item) => item.id !== action.payload.id) };
    default:
      throw new Error(`Unhandled action type: ${action.type}`);
  }
};

import React, { useReducer } from 'react';

const Cart = () => {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });
  const handleAddItem = (item) => dispatch({ type: 'add', payload: item });
  const handleRemoveItem = (item) => dispatch({ type: 'remove', payload: item });
  const total = state.items.reduce((acc, item) => acc + item.price, 0);

  return (
    <div>
      <h2>Cart</h2>
      {state.items.map((item) => (
        <div key={item.id}>
          <p>{item.name} (${item.price})</p>
          <button onClick={() => handleRemoveItem(item)}>Remove</button>
        </div>
      ))}
      <p>Total: ${total}</p>
    </div>
  );
};

在这个示例中，我们使用 useReducer 来管理购物车的状态，将 cartReducer 函数作为 reducer，并将初始状态 { items: [] } 作为参数传递给 useReducer。
同时，我们定义了两个处理函数 handleAddItem 和 handleRemoveItem，它们分别用于添加商品和删除商品，并且使用 dispatch 来触发状态更新
在组件中，我们可以通过 state 来访问购物车的状态值，并通过 dispatch 来触发状态更新。例如，在 Cart 组件中，我们使用 state.items 来获取购物车中的商品列表，使用 total 变量来计算购物车的总价。

useContext、useReducer 和 createContext 都是 React 的基础 API，它们提供了一种在组件之间传递数据的方法，并能够帮助我们管理复杂的状态逻辑，使得应用程序更加灵活和可扩展。

avatar
文章
阅读
粉丝