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，点击按钮将该值设置成1。首先这段代码会打印出// render 0 ; 随后我们点击按钮两次。输出结果如下：
// render 0
// render 1
// render 1
看到上边的结果是不是很意外，当我们第一次点击按钮的时候 value的值已经变成了1， 第二次点击按钮的时候将value的值还是设置成1， 那么前后的值是不是没有变化，理论上来讲是不是不应该打印出 render 1。
针对这个问题研究了很久，知道我在官网上仔细的看到了这句话
image.png
需要注意的是，React 可能仍需要在跳过渲染前渲染该组件。不过由于 React 不会对组件树的“深层”节点进行不必要的渲染，所以大可不必担心。如果你在渲染期间执行了高开销的计算，则可以使用
useMemo 来进行优化。
那么我试了一下给DOM中添加了个随机数，发现确实是在第二次点击的时候随机数并没有变化。说明确实是没有再一次的触发re-render
