美女鎮(zhèn)樓
react Hocks中的useEffect勾子極大簡化了代碼，但是又有些副作用，這些副作用用好了提高效率，用不好加班禿頭！
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState({});
useEffect(() => {
setCount({test:"count是一個(gè)對象，使得頁面死循環(huán)"})
},[count]);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
結(jié)果：頁面死循環(huán)
解釋：
useEffect接受兩個(gè)參數(shù)：
- 第一個(gè)參數(shù)是函數(shù)（這里叫effect函數(shù)），它的作用是，在頁面渲染后執(zhí)行這個(gè)函數(shù)。因此你可以把a(bǔ)jax請求等放在這里執(zhí)行；
- 第二個(gè)參數(shù)是一個(gè)數(shù)組，這里注意：
| 參數(shù)情況 | 效果 | 注意 |
|---|---|---|
| 不傳 | 每次渲染后都執(zhí)行清理或者執(zhí)行effect | 這可能會(huì)導(dǎo)致性能問題，比如兩次渲染的數(shù)據(jù)完全一樣 |
| 傳空數(shù)組 | 只運(yùn)行一次的 effect（僅在組件掛載和卸載時(shí)執(zhí)行） | 這就告訴 React 你的 effect 不依賴于 props 或 state 中的任何值，所以它永遠(yuǎn)都不需要重復(fù)執(zhí)行 |
| 傳[count] | React 將對前一次渲染的count和后一次渲染的count進(jìn)行比較。若相等React 會(huì)跳過這個(gè) effect， | 實(shí)現(xiàn)了性能的優(yōu)化 |
上面例子中之所以造成頁面的死循環(huán)，是因?yàn)樵贘avaScript中，{} === {}結(jié)果是false，{a:1} === {a:1}同樣，由此造成了react以為兩個(gè)值不同，就一直的渲染最終頁面死循環(huán)。
結(jié)論：第二個(gè)參數(shù)一般情況下不要使用引用類型！
THE END!
