資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
時尚學
法律學ReactJS – useContext hook
在本文中，我們將瞭解如何在 React 生命週期中無需透過每個父級元件傳遞資料即可訪問該資料。
這個 hook 很好地替代了類元件的 Context API，後者用於設定全域性資料，現在可以在任何子級元件中訪問這些資料，而無需透過每一個父級元件傳遞資料。
語法
const authContext = useContext(initialValue);
useContext 接受 React.createContext 提供的值，並在其值更改時重新渲染元件，但你仍然可以透過使用 記憶 來最佳化其效能。
示例
在該示例中，我們將構建一個身份驗證 React 應用，它在子元件中登入或登出使用者並相應更新狀態。
我們將構建一個 App 元件，它有兩個 LogIn 和 LogOut 元件，這些元件訪問由上下文提供程式提供的狀態並進行相應更新。
AuthContext.js
import React from 'react';
const authContext = React.createContext({
auth: null,
login: () => {},
logout: () => {},
});
export default authContext;App.jsx
import React, { useState } from 'react';
import LogIn from './Login';
import LogOut from './Logout';
import AuthContext from './AuthContext';
const App = () => {
const [auth, setAuth] = useState(false);
const login = () => {
setAuth(true);
};
const logout = () => {
setAuth(false);
};
return (
<React.Fragment>
<AuthContext.Provider
value={{ auth: auth, login: login, logout: logout }}
>
<p>{auth ? 'Hi! You are Logged In' : 'Oope! Kindly Login'}</p>
<LogIn />
<LogOut />
</AuthContext.Provider>
</React.Fragment>
);
};
export default App;Login.js
import React, { useContext } from 'react';
import AuthContext from './AuthContext';
const Login = () => {
const auth = useContext(AuthContext);
return (
<>
<button onClick={auth.login}>Login</button>
</>
);
};
export default Login;Logout.js
import React, { useContext } from 'react';
import AuthContext from './AuthContext';
const Logout = () => {
const auth = useContext(AuthContext);
return (
<>
<button onClick={auth.logout}>Click To Logout</button>
</>
);
};
export default Logout;輸出
這將產生以下結果。
更新時間： 2021-3-19
650 次瀏覽
廣告