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 的优势。