React的useContext应用场景：
如果需要在组件之间共享状态，可以使用useContext()。
现在有俩个组件Navbar和Messages，我们希望它们之间共享状态。
<div className="test"> <Navbar /> <Messages /> </div> 使用方法如下:
第一步在它们的父组件上使用React的Context API，在组件外部建立一个Context。
const TestContext = React.createContext({
}); 组件封装代码如下：
<TestContext.Provider value={
{
username: 'superawesome', }} > <div className="test"> <Navbar /> <Messages /> </div> <TestContext.Provider/> 上面的代码中，TestContext.Provider提供了一个Context对象，这个对象是可以被子组件共享的。
Navbar组件的代码如下：
const Navbar = () => {
const {
username } = useContext(TestContext); return ( <div className="navbar"> <p>{
username}</p> </div> ) } 上面代码中，useContext()钩子函数用来引入Context对象，从中获取username属性。
Message组件的代码也类似：
const Messages = () => {
const {
username } = useContext(TestContext); return ( <div className="messages"> <p>1 message for {
username}</p> </div> ) } 整体代码如下：
import React, {
useContext } from "react"; import ReactDOM from "react-dom"; const TestContext= React.createContext({
}); const Navbar = () => {
const {
username } = useContext(TestContext) return ( <div className="navbar"> <p>{
username}</p> </div> ) } const Messages = () => {
const {
username } = useContext(TestContext) return ( <div className="messages"> <p>1 message for {
username}</p> </div> ) } function App() {
return ( <TestContext.Provider value={
{
username: 'superawesome', }} > <div className="test"> <Navbar /> <Messages /> </div> <TestContext.Provider/> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 笔者写到了一个文件里朋友们可能觉得用useState可以实现啊，为啥要用这个，这个的话其实是你的子组件写到别的文件里也还是可以公用这个状态的，这就是他的用途~
感谢观看
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/222247.html原文链接：https://javaforall.net
