2020 年最权威的 React Hooks 速查表
想要拥有属于你自己的那份吗？🎁
目录
状态钩子 - 使用状态
效果钩子 - 使用效果
引用钩子 - 使用引用
回调钩子 - 使用回调
上下文钩子 - useContext
记忆化钩子 - useMemo
变径钩 - 使用变径钩
定制钩子
接下来会发生什么？
自 React 16.8 版本引入 Hooks 以来，我们编写 React 应用的方式发生了改变。事实上，我们现在可以在函数组件中使用 React 的特性，例如状态和副作用。
然而，记住该用哪些钩子以及如何使用并不总是那么容易。
这就是我为你制作这份 React Hooks 速查表的原因，帮助你快速掌握它们。实际上，这里不仅仅只有一个简单的单页速查表。我还为每个 React Hooks 都提供了一些实际应用示例，以便你真正理解它们的使用方法和场景。
想要拥有属于你自己的那份吗？🎁
随时随地携带这份速查表，点击此处下载PDF版本。
目录
状态钩子 - 使用状态
import React, { useState } from 'react';
-
useState 是一个 Hook，它允许你将 React 状态添加到函数组件中。
-
useState返回当前状态以及用于更新该状态的函数。
-
useState接受初始状态值作为参数。
const MyComponent = (props) => {
const [showModal, setShowModal] = useState(false);
return (
<div>
<button onClick={() => setShowModal(true)}>Show</button>
{ show && <Modal /> }
</div>
);
};
- useState可以用于多个状态变量。
const MyComponent = (props) => {
const [name, setName] = useState("Greg");
const [country, setCountry] = useState("France");
return <div>Hello! I'm {name}, from {country}.</div>;
};
- useState可以保存基本类型、对象或数组。
const [people, setPeople] = useState({
name: "Greg",
country: "France"
});
-
useState在更新状态变量时总是替换它，而不是合并它。
-
状态更新函数可以接受一个函数作为参数。该函数接收先前的状态值，并返回更新后的值。
const [people, setPeople] = useState({
name: "Greg",
country: "France",
age: 28
});
...
setPeople(prevState => {
return { ...prevState, age: prevState.age + 1 };
});
效果钩子 - 使用效果
import React, { useEffect } from 'react';
-
useEffect 是一个 Hook，它允许你在函数组件中执行“副作用”，例如数据获取、手动 DOM 操作等等……
-
useEffect接受一个函数作为参数。
-
useEffect在每次渲染后运行。
const MyComponent = ({ userId }) => {
const [user, setUser] = useState({});
useEffect(() => {
fetch(`http://api.example.com/v1/users/${userId}`)
.then(res => res.json())
.then(data => setUser(data));
});
return (
<ul>
{ friends.map(friend => <li key={friend.id}>{friend.name}</li>) }
</ul>
);
};
-
useEffect接受第二个参数：依赖项数组。它告诉 React，只有当其中一个依赖项发生更改时，才运行 effect 函数。
-
你可以传递一个空数组（[]）来使其只运行一次。
useEffect(() => {
fetch(`http://api.example.com/v1/users/${userId}`)
.then(res => res.json())
.then(data => setUser(data));
}, [userId]);
- useEffect允许你通过返回清理函数来清理你使用过的任何效果。
useEffect(() => {
window.addEventListener("mousedown", eventhandler);
return () => {
window.removeEventListener("mousedown", eventhandler);
};
}, []);
引用钩子 - 使用引用
import React, { useRef } from 'react';
- useRef允许你访问 DOM 元素。
const MyComponent = (props) => {
const inputRef = useRef(null);
useEffect(() => {
inputRef.current.focus();
});
return (
<form>
<input ref={inputRef} type="text" />
</form>
);
};
回调钩子 - 使用回调
import React, { useCallback } from 'react';
-
useCallback返回回调函数的记忆化版本。
-
useCallback接受一个回调函数和一个依赖项数组作为参数。
-
只有当某个依赖项发生变化时，回调函数才会发生变化。
const MyComponent = ({ eventhandler }) => {
...
const handleEventHandler = useCallback(
event => {
if (typeof eventHandler === "function") {
eventHandler(event);
}
},
[eventHandler]
);
...
上下文钩子 - useContext
import React, { useContext } from 'react';
-
useContext允许你从函数组件读取上下文并订阅其更改。
-
上下文仍然需要通过React.createContext创建，并由上下文提供程序组件提供。
-
useContext接受 React.createContext 创建的上下文本身作为参数。
-
它返回该上下文的当前上下文值。
const UserContext = React.createContext(null);
function App() {
const [userName, setUserName] = useState("Greg");
return (
<UserContext.Provider value={{ name: userName }}>
<Main />
</UserContext.Provider>
);
}
const Main = (props) => (
<>
<Header />
<UserInfo />
<Footer />
</>
);
const UserInfo = (props) => {
const user = useContext(UserContext);
return <div>Hello, {user.name}!</div>;
};
记忆化钩子 - useMemo
import React, { useMemo } from 'react';
-
useMemo通过返回昂贵计算的记忆化值来帮助优化性能。
-
useMemo接受一个函数和一个依赖项数组作为参数。
-
只有当其中一个依赖项发生更改时， useMemo 才会重新计算记忆化值。
const MyComponent = ({ a, b }) => {
const memoizedValue = useMemo(() => expensiveComputation(a, b), [a, b]);
...
};
变径钩 - 使用变径钩
import React, { useReducer } from 'react';
-
useReducer允许你使用 reducer 来管理应用程序状态。它是状态钩子useState的替代方案。
-
useReducer接受一个类型为(state, action) => newState的 reducer 作为参数 。它返回当前状态和一个 dispatch 方法。
const initialState = { isAuth: false, user: null };
function reducer(state, action) {
switch (action.type) {
case "login": return { isAuth: true, user: action.user };
case "logout": return { isAuth: false, user: null };
default: return state;
}
}
function App() {
const [state, dispatch] = useReducer(reducer, initialState);
const handleLogin = () => dispatch({ type: 'login', user: { ... } );
const handleLogout = () => dispatch({ type: 'logout' );
if (state.isAuth) {
return (
<>
<p>Welcome, {state.user.name}!</p>
<button onClick={handleLogout}>Logout</button>
</>
);
}
return <button onClick={handleLogin}>Login</button>;
}
定制钩子
- 您可以创建自己的 React hooks，将组件逻辑提取到可重用的函数中。
import { useEffect, useCallback } from "react";
// Custom React Hook
export default function useEventListener(name, handler, element) {
const handleEventHandler = useCallback(
event => {
if (typeof handler === "function") {
handler(event);
}
},
[handler]
);
useEffect(
() => {
// Check if the element supports the addEventListener method
const checked = element && element.addEventListener;
// Stop here if not supported
if (!checked) return;
// Add event listener
element.addEventListener(eventName, handleEventHandler);
// Remove event listener on cleanup
return () => {
element.removeEventListener(name, handleEventHandler);
};
},
[name, element, handleEventHandler]
);
}
接下来会发生什么？
要完全掌握 React，需要学习的概念非常多。不过，有了这份速查表，你就可以开始使用现代 React 编写应用程序了。
您可以点击此处下载完整版的PDF格式速查表。
