적용 할 몇 가지 부작용이 있으며이를 구성하는 방법을 알고 싶습니다.
- 일회용으로
- 또는 여러 useEffects
성능과 아키텍처 측면에서 무엇이 더 낫습니까?
답변:
따라야하는 패턴은 useCase에 따라 다릅니다.
첫째 , 초기 마운트 중에 이벤트 리스너를 추가하고 마운트 해제시 정리해야하는 상황과 특정 리스너를 정리하고 소품 변경시 다시 추가해야하는 또 다른 경우가있을 수 있습니다. 이 경우 두 가지 다른 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
호출 로 분할 합니다.
React will apply every effect used by the component, in the order they were specified.
reactjs.org https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns에서 제안한대로 여러 효과를 사용하여 우려 사항을 구분해야합니다.
[]
(여전히 변경을 기다리는 상태 / props 의 하위 집합 이기 때문에) 사용하지 않을 것이지만 코드를 재사용하고 싶습니다. 따로 사용useEffects
하고 공유 코드를 각각 개별적으로 호출하는 함수에 넣습니까?