我有一些副作用要应用,并且想知道如何组织它们:
- 一次性使用
- 或多次使用
在性能和体系结构方面有什么更好的选择?
Answers:
您需要遵循的模式取决于您的useCase。
首先,您可能遇到以下情况:在初始挂载期间需要添加事件侦听器,并在卸载时对其进行清理;而在另一种情况下,则需要清理特定的侦听器并在prop更改时将其重新添加。在这种情况下,使用两个不同的useEffect更好地将相关逻辑保持在一起,并具有性能优势
useEffect(() => {
// adding event listeners on mount here
return () => {
// cleaning up the listeners here
}
}, []);
useEffect(() => {
// adding listeners everytime props.x changes
return () => {
// removing the listener when props.x changes
}
}, [props.x])
第二:在某些状态或道具在一组中改变时,可能需要触发API调用或其他副作用。在这种情况下,一个useEffect
具有相关值进行监视的个人应该是一个好主意
useEffect(() => {
// side effect here on change of any of props.x or stateY
}, [props.x, stateY])
第三:第三种情况,当您需要对不同的值进行更改时采取不同的操作。在这种情况下,请将相关比较分为不同的useEffects
useEffect(() => {
// some side-effect on change of props.x
}, [props.x])
useEffect(() => {
// another side-effect on change of stateX or stateY
}, [stateX, stateY])
useEffect
调用。
您应按照reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns的建议使用多种效果来分离关注点
[]
(因为它只是等待更改的状态/属性的一个子集),但是您还想重用代码。您是否使用单独useEffects
的代码并将共享代码放入各自分别调用的函数中?