Ich muss einige Nebenwirkungen anwenden und möchte wissen, wie ich sie organisieren kann:
- als Single UseEffect
- oder mehrere useEffects
Was ist besser in Bezug auf Leistung und Architektur?
quelle
Ich muss einige Nebenwirkungen anwenden und möchte wissen, wie ich sie organisieren kann:
Was ist besser in Bezug auf Leistung und Architektur?
Das Muster, dem Sie folgen müssen, hängt von Ihrem useCase ab.
Erstens kann es vorkommen , dass Sie während des ersten Bereitstellens einen Ereignis-Listener hinzufügen und beim Aufheben der Bereinigung bereinigen müssen, und in einem anderen Fall muss ein bestimmter Listener bei einem Requisitenwechsel bereinigt und erneut hinzugefügt werden. In einem solchen Fall ist es besser, zwei verschiedene useEffect zu verwenden, um die relevante Logik zusammenzuhalten und Leistungsvorteile zu erzielen
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])
Zweitens: Es kann vorkommen, dass Sie einen API-Aufruf oder einen anderen Nebeneffekt auslösen müssen, wenn sich der Status oder die Requisiten innerhalb eines Sets ändern. In einem solchen Fall sollte eine Single useEffect
mit den zu überwachenden relevanten Werten eine gute Idee sein
useEffect(() => {
// side effect here on change of any of props.x or stateY
}, [props.x, stateY])
Drittens: Ein dritter Fall, in dem Sie unterschiedliche Maßnahmen zur Änderung unterschiedlicher Werte ergreifen müssen. Trennen Sie in einem solchen Fall relevante Vergleiche in verschiedeneuseEffects
useEffect(() => {
// some side-effect on change of props.x
}, [props.x])
useEffect(() => {
// another side-effect on change of stateX or stateY
}, [stateX, stateY])
[]
(da es sich immer noch nur um eine Teilmenge von Status / Requisiten handelt, auf die Sie Änderungen warten), aber Sie möchten auch Code wiederverwenden. Verwenden Sie separateuseEffects
und fügen Sie den gemeinsam genutzten Code in eine Funktion ein, die sie jeweils separat aufrufen?useEffect
Anrufe aufteilen können .React will apply every effect used by the component, in the order they were specified.
Sie sollten mehrere Effekte verwenden, um Bedenken zu trennen, wie von reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns vorgeschlagen
quelle