React Hook之useContext的介绍与使用

矫情吗；* 2024-04-18 21:18 56阅读 0赞

#### React的useContext应用场景： ####

如果需要在组件之间共享状态，可以使用useContext()。

现在有俩个组件Navbar和Messages，我们希望它们之间共享状态。

#### 使用方法如下: ####

第一步在它们的父组件上使用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可以实现啊，为啥要用这个，这个的话其实是你的子组件写到别的文件里也还是可以公用这个状态的，这就是他的用途~

感谢观看