React Hook之useContext的介绍与使用

原创

A吴迪网络工作室 2021-06-18 16:45:22 ©著作权

©著作权归作者所有：来自51CTO博客作者A吴迪网络工作室的原创作品，请联系作者获取转载授权，否则将追究法律责任

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);