React 19中useContext不需要Provider了。

前言

在 React 19 中，useContext 的使用方式有所更新。开发者现在可以直接使用 作为提供者，而不再需要使用 <Context.Provider>。这一变化简化了代码结构，提升了开发效率。文章中通过示例代码展示了如何创建上下文、在子组件中使用 useContext，以及如何通过 useState 更新上下文中的值。尽管 useContext 提供了便捷的跨组件数据共享方式，但使用时需注意避免滥用和性能问题。通过合理拆分上下文并结合 TypeScript 和性能优化，可以更好地发挥其优势。

一、React 19中useContext移除了Provider？

在 React 19 中，你可以将 渲染为提供者，就无需再使用 <Context.Provider> 了：

二、使用步骤

import { createContext, useContext, useState } from "react";

interface MyContextType {
  name: string;
  setName: (value: string) => void;
}

// 创建上下文
const MyContext = createContext<MyContextType>({} as MyContextType);

const Son = () => {
  const name = useContext(MyContext);
  console.log(name);

  return <div>Son</div>;
};
// 子组件
const Child = () => {
  const name = useContext(MyContext);
  console.log(name);

  return <div>Child</div>;
};
const App = () => {
  const [name, setName] = useState("小路");

  return (
    <div>
      <button onClick={() => setName("123")}>改变name值</button>
      <MyContext value={{ name, setName }}>
        <Child />
        <hr />
        <Son />
      </MyContext>
    </div>
  );
};

export default App;

总结

useContext 是 React 中一个强大且灵活的 Hook，它通过 Context API 提供了跨组件共享数据的便捷方式。然而，使用时需要谨慎，避免滥用和性能问题。通过合理拆分上下文、结合 TypeScript 和性能优化，可以更好地发挥 useContext 的优势。