React Hook之useContext的介紹與使用

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可以實現啊，爲啥要用這個，這個的話其實是你的子組件寫到別的文件裏也還是可以公用這個狀態的，這就是他的用途~

感謝觀看