React의 큰 비밀

React가 모든 렌더링에서 후크가 사용하는 deps 배열을 비교하는 방법에 대해 생각해 보셨습니까? useEffect 후크를 실행할 시기를 결정하는 마법을 확인하십시오.

소개

호기심 많은 개발자로서 저는 React가 deps , useEffect 및 useCallback 후크로 전달되는 종속성 배열(useMemo)을 확인하는 방법이 궁금했습니다. 어디서도 답을 찾지 못했습니다.

useEffect(() => {
  console.log('someValue has changed:', someValue);
}, [someValue]);

그래서 내 유일한 선택은 마법을 찾기 위해 React의 코드 자체를 확인하는 것이었고, 예상보다 많은 것을 발견했습니다.

비교

React는 == 또는 === 연산자를 사용하지 않고 Object.is() 메서드를 사용합니다. 이 메서드는 ES2015부터 SameValue algorithm을 제공합니다.

Abstract Equality Comparison(== )과 Strict Equality Comparison(=== )의 차이점은 모두 알고 있지만, 이 새로운 비교에는 무엇이 포함됩니까?

💡 MDN에서 이러한 등식 알고리즘 간의 차이점을 빠르게 확인할 수 있습니다.
===와 Object.is의 차이점은 다음과 같습니다.

+0 , -0 및 0 는 === 에 대해 동일한 값을 생성하지만 Object.is 에 대해 다른 값을 생성합니다. «그리고 그것은 수학적으로 정확하기 때문에 is에 대한 포인트입니다.» ✅

NaN === NaN는 false 😒의 경우 ===이지만 SameValue 알고리즘의 경우 true입니다. «또 다른 점은 Object.is .»

이제 React가 잘 알려지지 않은 비교 방법을 선택한 이유가 더 명확해 졌다고 생각합니다.

코드를 보여주세요

개발자라면 Object.is 😁에 대한 코드가 어디에 있는지 보고 싶을 것입니다. 답은 areHookInputsEqual 파일의 ReactFiberHooks.new.js라는 함수에 있습니다: https://github.com/facebook/react/blob/v18.1.0/packages/react-reconciler/src/ReactFiberHooks.new.js#L323 .

💡 코드가 계속 바뀌기 때문에 최신 태그를 사용했습니다.

핫 리로드 프로세스에 있는 경우 이 검사가 완전히 무시되는 방식과 React의 빌드production에서 프로그래머에 대한 검사가 제거되는 방식을 보는 것은 멋진 일입니다.

결론

IMO에서 가장 중요한 문제는 React가 객체를 깊이 비교하지 않고 동일한 객체인지 확인하기만 한다는 것입니다.

💡 이것이 무엇을 의미하는지 모른다면 이 Redux 페이지the benefits of immutability를 확인하십시오.

🧠 개체 변수는 개체가 있는 위치에 대한 메모리 참조(포인터)일 뿐이며 두 개체를 비교할 때 === 및 Object.is가 사용한다는 점을 기억하십시오.

나는 당신이 React의 소스 코드로의 다이빙을 즐겼기를 바랍니다. 🤿