child
{name} --- {data}
{count}
-
{list.map(v =>
- {v} )}
{count}
);
}
```
点击“异步加1”按键，然后立即点击“同步加1”按钮。你会惊奇的发现，count 只更新到 1。
这是因为 delay() 是一个过时的闭包。
来看看这个过程发生了什么：
1. 初始渲染：count 值为 0。
2. 点击“异步加1”按钮，delay() 闭包捕获 count 的值 0，setTimeout() 1 秒后调用 delay()。
3. 点击“同步加1”按钮，handleClickSync() 调用 setCount(0 + 1) 将 count 的值设置为 1，组件重新渲染。
4. 1 秒之后，setTimeout() 执行 delay() 。但是 delay() 中闭包保存 count 的值是初始渲染的值 0，所以调用 setState(0 + 1)，结果count保持为 1。
**delay() 是一个过时的闭包，它使用在初始渲染期间捕获的过时的 count 变量。**
为了解决这个问题，可以使用函数方法来更新 `count` 状态：
```javascript
function DelayCount() {
const [count, setCount] = useState(0);
function handleClickAsync() {
setTimeout(function delay() {
setCount(count => count + 1); // 重点：setCount传入的回调函数用的是最新的 state！！！
}, 1000);
}
function handleClickSync() {
setCount(count + 1);
}
return (
{count}
);
}
```
### useEffect
#### 如何在 useEffect 中使用 async
上一篇[文章](https://www.cnblogs.com/chenwenhao/p/12593934.html#_label3)中我们提到过：useEffect的 callback 函数**要么返回一个能清除副作用的函数，要么就不返回任何内容。**
而 async 函数返回的是 Promise 对象，那我们要怎么在 useEffect 的callback 中使用 async 呢？
最简单的方法是`IIFE`（自执行函数）：
```javascript
useEffect(() => {
(async () => {
await fetchSomething();
})();
}, []);
```
#### useEffect 死循环
1. useEffect 在传入第二个参数时一定注意：**第二个参数不能为引用类型**，会造成死循环。比如：[]===[] 为false，所以会造成 useEffect 会一直不停的渲染。 2. useEffect 的 callback 函数中改变的 state 一定不能在该 useEffect 的依赖数组中。比如：`useEffect(()=>{ setCount(count); }, [count]);`依赖 count，callback 中又 setCount(count)。 推荐启用 [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) 中的 [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) 规则。此规则会在添加错误依赖时发出警告并给出修复建议。 #### 函数作为依赖的时候死循环 有时候，我们需要将函数作为依赖项传入依赖数组中，例如： ```javascript // 子组件 let Child = React.memo((props) => { useEffect(() => { props.onChange(props.id) }, [props.onChange, props.id]); return (
{props.id}
);
});
// 父组件
let Parent = () => {
let [id, setId] = useState(0);
let [count, setCount] = useState(0);
const onChange = (id) => {
// coding
setCount(id);
}
return (
{count}
);
};
```
代码中重点位置，每次父组件render，onChange引用值肯定会变。因此，子组件Child必定会render，子组件触发useEffect，从而再次触发父组件render....循环往复，这就会造成死循环。下面我们来优化一下：
```javascript
// 子组件
let Child = React.memo((props) => {
useEffect(() => {
props.onChange(props.id)
}, [props.onChange, props.id]);
return (
{props.id}
);
});
// 父组件
let Parent = () => {
let [id, setId] = useState(0);
let [count, setCount] = useState(0);
const onChange = useCallback(() => { // 重点：通过useCallback包裹一层即可达到缓存函数的目的
// coding
}, [id]); // id 为依赖值
return (
{count}
);
};
```
**`useCallback`将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。**当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如 `shouldComponentUpdate`）的子组件时，它将非常有用。
> `useCallback(fn, deps)` 相当于 `useMemo(() => fn, deps)`
#### useEffect 里面拿不到最新的props和state
`useEffect`里面使用到的 state 的值, 固定在了`useEffect`内部，不会被改变，除非`useEffect`刷新，重新固定 state 的值。
**`useRef`保存任何可变化的值，`.current`属性总是取最新的值。**
```javascript
function Example() {
const [count, setCount] = useState(0);
const latestCount = useRef(count);
useEffect(() => {
// Set the mutable latest value
latestCount.current = count;
setTimeout(() => {
// Read the mutable latest value
console.log(`You clicked ${latestCount.current} times`);
}, 3000);
});
```
### 总结
以上只是收集了一部分工作中可能会遇到的坑，大致分为2种：
1. 闭包引起的 state 值过期
2. 依赖值监听问题导致死循环
以后遇到其他的问题会继续补充...
参考：
[react hooks踩坑记录](https://frezc.github.io/2019/03/23/react-hooks-traps/#%E5%9C%A8useEffect%E5%92%8CuseLayoutEffect%E9%87%8C%E4%BD%BF%E7%94%A8async%E5%87%BD%E6%95%B0)
[使用 JS 及 React Hook 时需要注意过时闭包的坑(文中有解决方法)](https://segmentfault.com/a/1190000020805789)
[终于搞懂react hooks了！！！！](https://juejin.im/post/5e53d9116fb9a07c9070da44)
