为什么每次渲染都会计算2次，而不是1次，useRef和每个组件都要设置？

每次渲染都会计算2次而不是1次的原因是因为React的渲染过程分为两个阶段：render阶段和commit阶段。

在render阶段，React会对组件进行虚拟DOM的计算和比对，以确定哪些部分需要更新。在这个阶段，React会执行组件的render函数，并生成虚拟DOM树。

在commit阶段，React会将虚拟DOM树中需要更新的部分应用到实际的DOM上，完成页面的渲染。在这个阶段，React会执行组件的生命周期方法和副作用函数。

所以，每次渲染都会经历这两个阶段，因此会计算两次。

关于useRef和每个组件都要设置的问题，useRef是React提供的一个Hook函数，用于在函数组件中保存可变的引用。它的主要作用是在组件渲染之间存储数据，而不会触发组件的重新渲染。

在某些情况下，我们可能需要在组件渲染之间保存一些数据，比如保存上一次渲染时的某个状态或值。这时可以使用useRef来创建一个引用，并将其保存在组件中。由于useRef的值在组件重新渲染时不会改变，所以可以在组件的多次渲染中共享同一个引用。

至于为什么每个组件都要设置useRef，这是因为每个组件都有自己的状态和数据，需要在渲染之间保存不同的引用。如果多个组件共享同一个引用，可能会导致数据混乱或不一致的问题。

总结起来，每次渲染都会计算2次是因为React的渲染过程分为render阶段和commit阶段。而useRef是用于在组件渲染之间保存数据的Hook函数，每个组件都需要设置自己的useRef引用来保存不同的数据。