多层级使用useContext，层层相传，化繁为简！

2024-02-23 18:56:14

多层级使用 useContext 的强大优势和注意事项

简化代码结构：消除冗余的 props 传递

当组件嵌套多层时，在组件树中传递数据往往需要繁琐的 props 传递。useContext 通过允许组件直接访问 Context 对象来简化这一过程。通过消除冗余的 props，您的代码结构将变得更加简洁清晰，便于阅读和维护。

提高性能：减少 props 层层传递的开销

props 层层传递会给应用性能带来额外的开销。useContext 通过在组件树中直接访问 Context 对象，绕过了 props 的层层传递，从而减少了不必要的重新渲染。在组件数量较多或数据量较大的应用中，这种性能提升尤为明显。

增强灵活性：轻松更新和修改共享数据

useContext 使得数据共享更加灵活。当您需要修改或更新共享数据时，只需在 Context 对象中进行一次更改，所有订阅该 Context 的组件都会自动更新，而无需逐个组件修改 props。这简化了数据的管理和维护，提高了应用的响应性和可维护性。

如何多层级使用 useContext

1. 创建 Context 对象

import React, { createContext } from "react";

const MyContext = createContext();

export const MyProvider = (props) => {
  const [state, setState] = useState({});

  return (
    <MyContext.Provider value={{ state, setState }}>
      {props.children}
    </MyContext.Provider>
  );
};

2. 在组件中使用 Context

import React, { useContext } from "react";

const MyContext = React.createContext();

const ChildComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>State: {state}</p>
      <button onClick={() => setState({ ...state, count: state.count + 1 })}>
        Increment
      </button>
    </div>
  );
};