美女镇楼
react Hocks中的useEffect勾子极大简化了代码，但是又有些副作用，这些副作用用好了提高效率，用不好加班秃头！
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState({});
useEffect(() => {
setCount({test:"count是一个对象，使得页面死循环"})
},[count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
结果：页面死循环
解释：
useEffect接受两个参数：
- 第一个参数是函数（这里叫effect函数），它的作用是，在页面渲染后执行这个函数。因此你可以把ajax请求等放在这里执行；
- 第二个参数是一个数组，这里注意：
| 参数情况 | 效果 | 注意 |
|---|---|---|
| 不传 | 每次渲染后都执行清理或者执行effect | 这可能会导致性能问题，比如两次渲染的数据完全一样 |
| 传空数组 | 只运行一次的 effect（仅在组件挂载和卸载时执行） | 这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行 |
| 传[count] | React 将对前一次渲染的count和后一次渲染的count进行比较。若相等React 会跳过这个 effect， | 实现了性能的优化 |
上面例子中之所以造成页面的死循环，是因为在JavaScript中，{} === {}结果是false，{a:1} === {a:1}同样，由此造成了react以为两个值不同，就一直的渲染最终页面死循环。
结论：第二个参数一般情况下不要使用引用类型！
THE END!
网友评论