const [value, setValue] = React.useState(0);
const onClick = () => {
setValue(1);
};
console.log(`render`, value);
return (
// <div onClick={onClick}>click {Math.random()}</div>
<div onClick={onClick}>click</div>
);
首先我們來看這段代碼，value的初始值是0，點擊按鈕將該值設(shè)置成1。首先這段代碼會打印出// render 0 ; 隨后我們點擊按鈕兩次。輸出結(jié)果如下：
// render 0
// render 1
// render 1
看到上邊的結(jié)果是不是很意外，當(dāng)我們第一次點擊按鈕的時候 value的值已經(jīng)變成了1， 第二次點擊按鈕的時候?qū)alue的值還是設(shè)置成1， 那么前后的值是不是沒有變化，理論上來講是不是不應(yīng)該打印出 render 1。
針對這個問題研究了很久，知道我在官網(wǎng)上仔細的看到了這句話
image.png
需要注意的是，React 可能仍需要在跳過渲染前渲染該組件。不過由于 React 不會對組件樹的“深層”節(jié)點進行不必要的渲染，所以大可不必擔(dān)心。如果你在渲染期間執(zhí)行了高開銷的計算，則可以使用
useMemo 來進行優(yōu)化。
那么我試了一下給DOM中添加了個隨機數(shù)，發(fā)現(xiàn)確實是在第二次點擊的時候隨機數(shù)并沒有變化。說明確實是沒有再一次的觸發(fā)re-render
