为了加深印象，并方便以后再看，写此文章用作记录，内容参照react官网
Hook的引入
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Hook的注意事项
hook可以多条使用，根据书写顺序进行调用，遵循两个规则
- 只在最顶层使用 Hook
不要在循环，条件或嵌套函数中调用 Hook，确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的
useState和useEffect调用之间保持 hook 状态的正确。
- 只在 React 函数中调用 Hook
不要在普通的 JavaScript 函数中调用 Hook。遵循此规则，确保组件的状态逻辑在代码中清晰可见。
为什么hook只能在最顶层使用？这是hook内部的调用问题，为了保证hook的调用顺序不会改变
useState第一次调用会创建对应的变量为state，下次渲染的时候，就会读取第一次创建的变量，如果你把hook写在一个if判断里，如果判断不调用的话，React 调用顺序不会因为缺少hook函数而变化，这样React 不知道这次调用是什么情况，就会使用上次渲染的结果，从这里开始，后面的 Hook 调用都被提前执行，导致 bug 的产生。详情参考官网的hook规则
这也是为什么useState不叫createState，因为他更多的是使用，而不是创建
State Hook
- 声明
import React, { useState } from 'react';
function Example() {
// 声明一个叫 “count” 的 state 变量
const [count, setCount] = useState(0);
- 读取
<p>You clicked {count} times</p>
- 修改
<button onClick={() => setCount(count + 1)}>
Click me
</button>
- 修改（函数式修改）
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
</>
);
}
【注】修改时传入函数，函数的参数，是上一次state的值
为什么声明的时候要使用方括号？方括号有什么用？
这种 JavaScript 语法叫数组解构。它意味着我们同时创建了 fruit 和 setFruit 两个变量，fruit 的值为 useState 返回的第一个值，setFruit 是返回的第二个值。它等价于下面的代码：
var fruitStateVariable = useState('banana'); // 返回一个有两个元素的数组
var fruit = fruitStateVariable[0]; // 数组里的第一个值
var setFruit = fruitStateVariable[1]; // 数组里的第二个值
当我们使用 useState定义 state 变量时候，它返回一个有两个值的数组。第一个值是当前的 state，第二个值是更新 state 的函数。使用 [0] 和 [1] 来访问有点令人困惑，因为它们有特定的含义。这就是我们使用数组解构的原因。
Effect Hook
提示
如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
return () => {
document.title = `还原标题`;
}
});
}
这个effect，在创建时会修改标题，并且在每次渲染时更新标题，如果effect返回了一个函数，那么在组件被卸载之前，会调用这个函数，一般用来清除一些不用的东西，优化性能、防止bug。
- 性能优化
说到性能优化，除了上述的方法，hook还有一些性能优化的方法
通过跳过 Effect 进行性能优化
在某些情况下，每次渲染后都执行清理或者执行 effect 可能会导致性能问题。
这是很常见的需求，所以它被内置到了 useEffect 的 Hook API 中。如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // 仅在 count 更改时更新
这样写，这个hook函数只会在count变更的时候才执行，而不再是每次渲染都执行
useEffect(() => {
document.title = `You clicked ${count} times`;
}, []); // 仅在初次刷新时会执行
传入第二个参数为[]，可以执行一些只需要一次的函数，例如初始化请求数据
Hook API
Hook API(简书)
（待补充）
