React16.8中利用Context API定义上下文的技巧

2023-10-08 03:03:53

React16.8中引入了Context API，它是一种在组件树中共享数据的方式，而无需在每个组件中显式地传递props。Context API提供了在组件之间共享数据的便利性，同时也带来了性能优化，因为它避免了在组件树中传递不必要的数据。

在React16.8中，有三种方式可以定义上下文：

1. 使用React.createContext()函数

import React from "react";

const MyContext = React.createContext();

export default MyContext;

这种方式是最简单的，它创建了一个新的Context对象，可以被其他组件使用。

2. 使用useContext()钩子

import React, { useContext } from "react";

const MyContext = React.createContext();

const MyComponent = () => {
  const context = useContext(MyContext);

  return <div>{context}</div>;
};

export default MyComponent;

这种方式可以让你在组件中使用Context对象。

3. 使用useReducer()钩子

import React, { useReducer } from "react";

const MyContext = React.createContext();

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return state + 1;
    case "decrement":
      return state - 1;
    default:
      return state;
  }
};

const MyComponent = () => {
  const [state, dispatch] = useReducer(reducer, 0);

  return (
    <MyContext.Provider value={{ state, dispatch }}>
      <div>{state}</div>
    </MyContext.Provider>
  );
};

export default MyComponent;