반응 - useState의 setter 기능을 변경할 수 있는가?
useState의 세터는 구성 요소 수명 동안 변경할 수 있는가?
예를 들어, 우리가 한 가지 문제를 가지고 있다고 가정해 봅시다.useCallback
상태를 갱신할 수 있을 겁니다세터가 변경할 수 있는 경우 콜백은 콜백을 사용하기 때문에 콜백의 종속성으로 설정되어야 한다.
const [state, setState] = useState(false);
const callback = useCallback(
() => setState(true),
[setState] // <--
);
세터 기능은 부품 수명 동안 변경되지 않는다.
(setCount 함수의 ID는 안정성이 보장되므로 생략해도 무방함)
setter 함수(setState
)에서 반환됨useState
구성 요소 재장착 시 변경 사항(어느 쪽이든)callback
새로운 예를 들게 될거야.
종속성 어레이에 상태 설정자를 추가하는 것이 좋은 방법임([setState]
사용자 정의 후크를 사용할 때.예를 들어, 모든 렌더에 대한 새 인스턴스 가져오기 기능을 사용할 경우 다음 없이 원하지 않는 동작이 발생할 수 있음:
// Custom hook
import { useDispatch } from "react-redux";
export const CounterComponent = ({ value }) => {
// Always new instance
const dispatch = useDispatch();
// Should be in a callback
const incrementCounter = useCallback(
() => dispatch({ type: "increment-counter" }),
[dispatch]
);
return (
<div>
<span>{value}</span>
// May render unnecessarily due to the changed reference
<MyIncrementButton onIncrement={dispatch} />
// In callback, all fine
<MyIncrementButton onIncrement={incrementCounter} />
</div>
);
};
단답은, 아니, no, useState()의 세터(setter)는 변경할 수 없으며, 리액션 문서는 이를 명시적으로 보증하고 세터를 생략할 수 있음을 증명하는 예까지 제시한다.
나는 당신이 콜백()의 값이 변할 수 있다는 것을 알지 못하는 한, 당신이 당신의 사용의 종속성 목록에 어떤 것도 추가하지 않는 것을 제안하고 싶다.모듈이나 모듈 레벨 함수에서 가져온 함수를 추가하지 않는 것처럼, 구성 요소 외부에서 정의된 상수 표현식 등이 추가되는 것은 불필요하며 핸들러를 읽기 어렵게 만든다.
언급된 모든 것은, 이 모든 것이 useState()에 의해 반환되는 기능에 매우 구체적이며, 기능을 반환할 수 있는 모든 가능한 사용자 정의 후크까지 추론 범위를 확장할 이유가 없다.그 이유는 react 문서가 useState()와 그 설정자의 안정적인 행동을 명시적으로 보증하지만, 어떠한 사용자 정의 후크에도 동일한 것이 반드시 사실이어야 한다고는 말하지 않기 때문이다.
리액션 훅은 여전히 새롭고 실험적인 개념이며, 우리는 서로를 격려하여 가능한 한 읽을 수 있게 하고, 더 중요한 것은 그들이 실제로 무엇을 하고 왜 하는지 이해할 수 있도록 해야 한다.우리가 그렇게 하지 않는다면, 갈고리는 "나쁜 생각"이라는 증거로 보여질 것이고, 그것은 갈고리에 대한 채택과 더 넓은 이해를 금지할 것이다.그것은 나쁠 것이다; 내 경험에 비추어 볼 때, 그들은 단순히 수업으로는 불가능하다는 조직적 기법을 허용할 수 있다는 사실은 말할 것도 없고, 리액션이 보통 연관되어 있는 클래스 기반의 요소들에 대해 훨씬 더 깨끗한 대안을 만들어 내는 경향이 있다.
참조URL: https://stackoverflow.com/questions/57180731/react-is-usestate-s-setter-function-able-to-change
'IT이야기' 카테고리의 다른 글
Laravel/VueJS - 블레이드 내부의 여러 구성 요소가 제대로 작동하지 않음 (0) | 2022.03.28 |
---|---|
Vuex를 사용하여 어레이의 개체를 업데이트하는 중 (0) | 2022.03.28 |
각도2 처리 http 응답 (0) | 2022.03.28 |
기능 구성 요소를 애니메이션으로 전달.애니메이션 구성 요소 생성 (0) | 2022.03.27 |
크론 앤 버추얼엔브 (0) | 2022.03.27 |