如何防止在 REACT 钩子中使用状态更新重新渲染？

Question

（虽然我英文不好，但希望你能明白我想说的话。）

你好。 我将编写类组件的代码迁移到功能组件。 但是我遇到了这样的几个问题：

1. 我发现没有办法迁移 shouldComponentUpdate 生命周期。 我知道 React.memo 可以像 shouldComponentUpdate 一样处理它。 但是这种方式只能应用于道具更新。 我需要这个状态更新过程。

2. 当你想一次改变几个状态时，你会怎么做？ 如何将此代码迁移到功能组件？

   类示例： this.setState({aaa: 'a', bbb: 'b', ccc: 1});

   => 你只是调用所有方法吗？

   迁移示例： setAaa(); setBbb(); setCcc(); setAaa(); setBbb(); setCcc();

3. 我不知道如何使用 useState 添加回调函数。

   类示例： this.setState({state: value}, ()=> {callback function});

   迁移示例：（未解决）

这是与我应该迁移的代码类似的示例代码。

https://codesandbox.io/s/heuristic-firefly-sq1dm9?file=/src/App.js

由于安全原因，我无法附加真正的代码，所以我只是尝试提出所有我应该解决的问题。

谢谢 ：）

Answer 1

useEffect(() => {
// do stuff here

}, [someState]) // will be triggered only when someState changes

useEffect(() => {
// do stuff here

}, []) // will be triggered once on first render

useEffect(() => {
// do stuff here

}) // will be triggered on each render

useEffect(() => {
// do stuff here
const timer = setTimeout(() => console.log('hi'), 5000)
return () => clearTimeout(timer); // you can unsubscribe of any 
// listeners here
}, []) // will be triggered once on first render