假设我有一些状态取决于其他状态(例如,当A更改时,我希望B也更改)。
创建一个钩子来观察A并在useEffect钩子内设置B是否合适?
当我单击按钮时,效果是否会级联,导致第一个效果触发,导致B更改,然后触发第二个效果,在下一次渲染之前?结构化代码存在任何性能缺陷吗?
let MyComponent = props => {
let [a, setA] = useState(1)
let [b, setB] = useState(2)
useEffect(
() => {
if (/*some stuff is true*/) {
setB(3)
}
},
[a],
)
useEffect(
() => {
// do some stuff
},
[b],
)
return (
<button
onClick={() => {
setA(5)
}}
>
click me
</button>
)
}
useEffect
内部使用setState
的另一个情况是在订阅或事件监听器中设置状态
。但不要忘记取消订阅。https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup - timqian