优化react应用性能的最佳单useState或多useState是什么?

Question

我想优化ReactJS应用程序的性能，这是最好的使用?

1-使用对象:

const [count, setCount] = useState({ count: 4, theme: 'blue'});

2-创建多个React useState钩子:

const [count, setCount] = useState(4);
const [theme, setTheme] = useState('blue');

Answer 1

根据React文档:

我们建议将状态拆分为多个状态变量，这些变量的值倾向于一起变化

然而，就性能而言，根据Vladimir Klepov执行的基准测试，带原语的useState比object稍微好一些，这可能是由于对象分配的成本。然而,

请注意，这里的差异是在亚微秒范围内(是的，微秒，1/1000毫秒，或1/16000/60FPS帧)，所以任何实际影响都是可笑的。

总而言之，最好以一种更易读的方式编写状态钩子，而不是专注于任何过早的优化，因为差异很小。通过花时间进行基准测试，找出应用程序中执行缓慢的组件，并使用记忆来防止不必要的重新呈现，您可能能够获得更高的性能。