使用 useContext
useContext
是另一个常用的 Hook,它可让我们在函数组件中轻松访问 React 的 context。如果你的应用程序依赖于一些全局状态,或者你希望避免将 props 一层一层地传递到子组件,context 很有用。你可以在父组件设置一个值,然后在任何子组件中直接读取到它。
创建一个 context 对象很简单,使用 React.createContext()
并在需要访问它的组件中使用 useContext
即可。
javascript
import React, { useContext } from 'react';
// Create a context with a default value
const ThemeContext = React.createContext('light');
function Display() {
// Use the context value (the closest provider up the tree)
const theme = useContext(ThemeContext);
return <div>{theme}</div>;
}
// This Component sets the value and includes Display as a child
function App() {
return (
<ThemeContext.Provider value='dark'>
<Display />
</ThemeContext.Provider>
);
}
export default App;
在这个例子中,我们在 App
组件中定义了 context 的值为 'dark',然后在 Display
组件中直接读取到 'dark'。
自定义 Hooks
自定义 Hook 是一种复用代码的有效方式,能让我们将组件逻辑提取到可重用的函数中。自定义 Hook 是一个以 "use" 开头的函数,这个函数可以调用其他的 Hook。
比如,我们可以创建一个自定义 Hook 来处理表单的输入:
javascript
import { useState } from 'react';
function useInput(initialValue) {
const [value, setValue] = useState(initialValue);
function handleChange(e) {
setValue(e.target.value);
}
return [value, handleChange];
}
我们的 useInput
同时返回了当前的值和一个处理改变的函数,其可以直接在表单输入中使用。例如:
javascript
function Signup() {
const [name, handleName] = useInput('');
const [email, handleEmail] = useInput('');
const handleSubmit = (e) => {
e.preventDefault();
console.log(name, email);
}
return (
<form onSubmit={handleSubmit}>
<input type="text" value={name} onChange={handleName} placeholder="Name" />
<input type="text" value={email} onChange={handleEmail} placeholder="Email" />
<button type="submit">Submit</button>
</form>
);
}
export default Signup;
我们的 Signup
组件使用 useInput
自定义 Hook 来处理 name 和 email 字段。提交表单时将打印出这两个字段的值。
总的来说,React Hooks 引入了一种优雅的方式来管理状态和副作用,既可以简化代码,又可以增强可读性。除了上述所述的 Hook 外,还有许多其他的 Hook,例如 useReducer
、useMemo
和 useRef
等等,每个都具有自己的用途和唯一性。