数据结构
网络
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 次浏览
广告