usePrevious 및 유사한 시간 지향 후크의 문제점

Theo는 이번 주에 React 후크의 비직관적인 동작에 대한 비디오를 제작했습니다. 특히 현재 재렌더링 이전에 마지막 재렌더링의 값 버전을 유지하기 위해 usePrevious라는 후크에 대한 아이디어를 탐구했습니다. 하나. 이전 상태와 새 상태로 논리를 수행하는 방법입니다.

구현 방법에 대한 아이디어를 보고 싶다면 영상을 확인하세요. 이번 게시물의 아이디어는 use와 같은 후크를 갖는 개념적 측면을 탐구하는 것입니다.

반응적 표현

보시다시피 React에는 이와 같은 기본 후크가 없습니다. 후크 이전, 클래스 기반 시대에는 이전 상태와 소품을 모두 매개변수로 가져오는 componentDidUpdate라는 수명 주기 메서드가 있었는데 왜 후크를 사용하여 이 동작을 유지하지 않았나요?

이 시리즈의 게시물을 읽고 계시다면 다소 반복적일 수 있지만 이 경우 패러다임 전환에 대해 이야기해야 합니다.

클래스를 사용하면 일부 상태가 업데이트될 때 파생된 값을 자동으로 다시 계산할 수 없습니다. 일부 특정 소품과 상태를 사용하여 새로운 값을 계산하는 경우 일부가 변경되었는지 직접 확인해야 합니다.

이 방법의 해결책은 모든 업데이트에서 호출되는 콜백을 갖고 사용자에게 이전 값을 보내는 것입니다. 앱 코드는 차이점을 확인하고 계산된 상태를 새로운 결과로 업데이트합니다. 이것이 클래스 기반 구성요소의 직접성입니다. 데이터 흐름을 완벽하게 제어할 수 있으며 계산을 수동으로 제어해야 합니다.

여기서 반응성 표현에 대해 알아보겠습니다.

확인하고 변경하는 대신 표현식, 계산 공식 등을 작성합니다. 이 계산은 이전 버전에 액세스하지 않고 현재 상태 버전으로 실행되어야 합니다.

공식을 생각해 보세요.

a = b + c


b = 10
c = 20


a = 10 + 20
a = 30

이 표현식을 100만 번 사용하여 b를 10으로, c를 20으로 전달하면 동일한 결과를 얻게 됩니다. 이것은 순수한 계산입니다. React는 동일한 원리를 수행합니다. 모든 파생 계산은 순수해야 합니다.

그런데 그것이 왜 중요한가요?

리렌더링 작업에서 React를 사용하세요. 각 주기는 UI에 대한 설명을 생성하고 현재와 다음 간의 차이점을 기반으로 DOM에 변경 사항을 적용합니다. 각 렌더링은 이전 또는 다음 렌더링과 완전히 분리됩니다.

UI = fn(state)

각각의 상태 버전에 대해 서로 다른 UI 버전을 얻었습니다. 여기에 이전 값을 추가하면 꽤 혼란스러워집니다. 이제는 상태뿐만 아니라 이전 상태에도 의존하기 때문입니다. 하나의 소스, 하나의 표현식, 하나의 결과를 갖는 대신 여러 소스를 가질 수 있으며, 이러한 소스와 일관되지 않고 예측할 수 없는 UI를 결과로 처리하기 위한 더 복잡한 표현식을 가질 수도 있습니다.

각 렌더링은 이전 상태에 따라 다르게 작동합니다. 그리고 usePrevious의 가능한 구현 중 일부는 React에서 시간 순서에 의존하므로 이는 더욱 위험해집니다.

동시 기능을 사용하면 React는 렌더링 경고 없이 중지하여 다른 작업의 우선순위를 지정할 수 있습니다. useEffect 및 ref에 따라 실제 이전 렌더인 "이전" 렌더의 오래된 버전을 유지할 수 있습니다. 추론할 사항이 더 많습니다.

메모

이런 표현으로 생각해보세요

a = b + c


b = 10
c = 20


a = 10 + 20
a = 30

그 중 한 부분은 우선순위가 있어서 먼저 계산해야 합니다. 자바스크립트 코드로 생각해 보겠습니다.

UI = fn(state)

이제 개별적으로 계산할 수 있고 완벽하게 순수한 두 개의 분리된 표현식이 생겼습니다. 하지만 b 값이 많이 변하고 cdResult 계산 비용이 많이 든다면 어떻게 해결할 수 있을까요? 암기중!

a = b + (c - d)

이제 c 또는 d가 변경되면 cdResult가 다시 계산됩니다.

그런데 위의 텍스트에서 이전 값이 없다고 했는데, 한 렌더의 계산이 다음 렌더에서 어떻게 사용될 수 있습니까? 이것이 계산의 순수성을 깨뜨리는 것은 아닌가?

사실 그렇지 않습니다. 예:

const cdResult = c - d;
const a = b + cdResult;

렌더링 번호 1에 있다고 상상해 보세요. c의 값은 30이고 d의 값은 20이므로 결과는 10입니다. 하지만 메모하는 동안 React는 내가 추가한 종속성을 추적합니다. 배열. 일부 변경되면 다시 계산됩니다.

const cdResult = React.useMemo(() => c - d, [c, d]);
const a = b + cdResult;

그러나 그들은 변하지 않았습니다. c를 30으로, d를 20으로 사용하여 이 표현식을 다시 호출하면 결과는 동일하게 10이 됩니다. 렌더 번호 2에 있고 다른 변수가 변경되었음에도 불구하고 이 계산에 사용된 종속성은 변경되지 않았습니다.

렌더링할 때마다 다시 계산할 수 있는데, 이는 React의 기본 동작이지만, 동일한 값을 반환하는 불필요한 재계산을 건너뛸 수 있으므로 그대로 두었습니다. 순수함을 유지하고 렌더링 간의 분리를 유지했습니다

이전 상태

하지만 이전 상태, 사용자 작업으로 논리를 수행하기에 좋은 곳이 있습니다. 물론 콜백이 호출되는 순간의 현재 상태가 됩니다. 하지만 논리에 따라 변경해야 하는 상태가 있다면 바로 그 곳입니다.

물론 usePrevious와 같은 후크가 필요한 매우 구체적인 경우가 있을 수 있지만 이로 인해 발생할 수 있는 불일치에 유의하고 애플리케이션에 버그가 발생하지 않도록 보장을 추가해 보세요.

그리고 더 중요한 것은 가능하면 피하는 것입니다.

위 내용은 usePrevious 및 유사한 시간 지향 후크의 문제점의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!