React Hooks
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
最简单的hook例子
import React, { useState } from 'react';
function Example() {
// 声明一个新的叫做 “count” 的 state 变量 const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
渐进策略
总结：没有计划从 React 中移除 class。
Hook 和现有代码可以同时工作，你可以渐进式地使用他们。
出现理由
1.在组件之间复用状态逻辑很难
你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。
2.复杂组件变得难以理解
Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。
State hook
const [fruit, setFruit] = useState('banana');
const foo = ['one', 'two', 'three'];
const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"
数组解构，注意有顺序问题，要一一对应
const {xx} = resp
对象解构，无顺序问题，不对应会变undefined
useState的初始值可以用于定义state变量的类型
const [age, setAge] = useState(42);
此时age即是数字类型
重点：你不必使用多个 state 变量。State 变量可以很好地存储对象和数组，因此，你仍然可以将相关数据分为一组。然而，不像 class 中的 this.setState，更新 state 变量总是替换它而不是合并它。
替换就意味着如果你不保存不更改的变量，那么很可能更新之后状态里就只剩下更新后的状态了，会造成状态的缺失
// ...
useEffect(() => {
function handleWindowMouseMove(e) {
// 展开 「...state」 以确保我们没有 「丢失」 width 和 height
setState(state => ({ ...state, left: e.pageX, top: e.pageY }));
}
// 注意：这是个简化版的实现
window.addEventListener('mousemove', handleWindowMouseMove);
return () => window.removeEventListener('mousemove', handleWindowMouseMove);
}, []);
// ...
:star:我们推荐把 state 切分成多个 state 变量，每个变量包含的不同值会在同时发生变化。
Effect Hook
// Similar to componentDidMount and componentDidUpdate:
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`; });
可以把 `useEffect` Hook 看做 `componentDidMount`，`componentDidUpdate` 和 `componentWillUnmount` 这三个函数的组合。
上面的代码放在函数式组件里表示，当函数式组件的副作用为更改当前dom的title。
无须清除的effect
class组件对比函数组件
componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { document.title = `You clicked ${this.state.count} times`; }
useEffect(() => { document.title = `You clicked ${count} times`; });
需要清除的effect
class组件对比函数组件
componentDidMount() {
ChatAPI.subscribeToFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
componentWillUnmount() {
ChatAPI.unsubscribeFromFriendStatus(
this.props.friend.id,
this.handleStatusChange
);
}
handleStatusChange(status) {
this.setState({
isOnline: status.isOnline
});
}
hooks
useEffect(() => {
2.function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
1.ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// Specify how to clean up after this effect:
return function cleanup() {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
如上有两个副作用，放在了effect里面，effect也可以有返回函数，通常这个函数就是用于返回一个执行清除effect的函数
:star:这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数。如此可以将添加和移除订阅的逻辑放在一起。它们都属于 effect 的一部分
:star:React 会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。
多个effect分离逻辑
使用多个 Effect 实现关注点分离,像state hook一样可以使用多个
function FriendStatusWithCounter(props) {
const [count, setCount] = useState(0);
//1.
useEffect(() => { document.title = `You clicked ${count} times`;
});
const [isOnline, setIsOnline] = useState(null);
//2.
useEffect(() => { function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
// ...
}
:star:Hook 允许我们按照代码的用途分离他们,React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。
通过跳过 Effect 进行性能优化
在某些情况下，每次渲染后都执行清理或者执行 effect 可能会导致性能问题。在 class 组件中，我们可以通过在 `componentDidUpdate` 中添加对 `prevProps` 或 `prevState` 的比较逻辑解决：
componentDidUpdate(prevProps, prevState) {
if (prevState.count !== this.state.count) {
document.title = `You clicked ${this.state.count} times`;
}
}
这是很常见的需求，所以它被内置到了 `useEffect` 的 Hook API 中。如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React **跳过**对 effect 的调用，只要传递数组作为 `useEffect` 的第二个可选参数即可：
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
:star:如果数组中有多个元素，即使只有一个元素发生变化，React 也会执行 effect。
注意事项
如果你要使用传递第二个参数的优化方式，请确保数组中包含了**所有外部作用域中会随时间变化并且在 effect 中使用的变量**，否则你的代码会引用到先前渲染中的旧变量
如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（`[]`）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。这并不属于特殊情况 —— 它依然遵循依赖数组的工作方式。
每次更新的时候都要运行 Effect
componentDidUpdate(prevProps) { // 取消订阅之前的 friend.id
ChatAPI.unsubscribeFromFriendStatus( prevProps.friend.id, this.handleStatusChange ); // 订阅新的 friend.id
ChatAPI.subscribeToFriendStatus( this.props.friend.id, this.handleStatusChange ); }
在类组件里，往往要通过componentDidUpdate手动解除并更新，忘记正确地处理 `componentDidUpdate` 是 React 应用中常见的 bug 来源。
Hook规则
只在最顶层使用hook
不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用
// ------------
// 首次渲染
// ------------
useState('Mary') // 1. 使用 'Mary' 初始化变量名为 name 的 state
useEffect(persistForm) // 2. 添加 effect 以保存 form 操作
useState('Poppins') // 3. 使用 'Poppins' 初始化变量名为 surname 的 state
useEffect(updateTitle) // 4. 添加 effect 以更新标题
// -------------
// 二次渲染
// -------------
useState('Mary') // 1. 读取变量名为 name 的 state（参数被忽略）
useEffect(persistForm) // 2. 替换保存 form 的 effect
useState('Poppins') // 3. 读取变量名为 surname 的 state（参数被忽略）
useEffect(updateTitle) // 4. 替换更新标题的 effect
// ...
只要 Hook 的调用顺序在多次渲染之间保持一致，React 就能正确地将内部 state 和对应的 Hook 进行关联。但如果将一个 Hook (例如 persistForm effect) 调用放到一个条件语句,此时就会违反第一条规矩，若条件语句为false，原本的第二天的effect就会失效，Hook 的调用顺序发生了改变，导致后续的hook接不上
useState('Mary') // 1. 读取变量名为 name 的 state（参数被忽略）
// useEffect(persistForm) // 🔴 此 Hook 被忽略！
useState('Poppins') // 🔴 2 （之前为 3）。读取变量名为 surname 的 state 失败
useEffect(updateTitle) // 🔴 3 （之前为 4）。替换更新标题的 effect 失败
解决办法
useEffect(function persistForm() {
// 👍 将条件判断放置在 effect 中
if (name !== '') {
localStorage.setItem('formData', name);
}
});
只在React函数中调用Hook
不要在普通的 JavaScript 函数中调用 Hook。你可以：
- ✅ 在 React 的函数组件中调用 Hook
- ✅ 在自定义 Hook 中调用其他 Hook
自定义Hook
React 中有两种流行的方式来共享组件之间的状态逻辑: render props 和高阶组件，而 Hook 可以在让你不增加组件的情况下解决相同问题的。
自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。
