반응: 상태 X 파생 상태

파생 상태란 무엇인가요? 텍스트에 대한 상태와 대문자 텍스트에 대한 다른 상태를 생각해 보세요.

파생 상태

function Foo() {
    const [text, setText] = useState('hello, za warudo!');
    const [uppercaseText, setUppercaseText] = useState(text.toUpperCase());

    useEffect(() => {
        setUppercaseText(text.toUpperCase());
    }, [text])

    ...
}

그런데 아무나 할 거라고 생각하면 말도 안 되는 일이… 그렇지요? 그렇죠?

예, 이와 같은 예를 보면 이것이 잘못된 것임을 분명히 알 수 있습니다.

파생 상태의 나쁜 점

• 실제 상태와 동기화되지 않고 별도로 저장됩니다.
• 불필요한 재렌더링을 트리거합니다.

파생된 상태를 리팩터링하는 방법은 무엇입니까?

비용이 많이 드는 계산이라면… useMemo를 사용하는 것이 해결책입니다.

function Foo() {
    const [text, setText] = useState('hello, za warudo!');
    const uppercaseText = useMemo(() => text.toUpperCase(), [text]);
    ...
}

파생될 수 있는 상태를 빠르게 파악하는 방법은 무엇입니까?

나는 상태가 "다른 상태"인지 아니면 단지 계산된 속성(기억되는지 여부에 따라 케이스에 따라 다름)인지 더 쉽게 알아할 수 있는 좋은 사고 방식을 생각해 냈습니다.

function Foo({
    text = 'hello, za warudo!',
    uppercaseText = text.toUpperCase(),
}) {
    ...
}

// Forget react for a moment...
// Would you ever call a function like this?
const text = 'hello, za warudo!';
Foo({
    text,
    uppercaseText: text.toUpperCase(),
});

이러한 상태를 "소품"으로 생각하면 더 노골적으로 있어야 할 상태가 됩니다.

React를 완전히 잊어버리고 기능만 생각하세요.
변수를 사용하여 함수를 호출한 다음 내부에서 계산할 수 있는 다른 변수를 호출하시겠습니까?

위 내용은 반응: 상태 X 파생 상태의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!