그리고 OOP/C# 사람이 React Hooks 뒤에 있는 메커니즘을 이해하려고 해요.

내가 이 글을 쓴 것도 나의 미래를 기념하기 위해서이며, 나의 목표는 그것을 간단하게 쓰는 것이다.만약 이곳에 기술적으로 정확하지 않은 곳이 있다면, 우리는 감격을 금할 수 없을 것이다.

React 갈고리의 단순성 뒤에 있는 마력은 무엇입니까?
OOP/MVVM/C#의 배경에서부터 반응을 하기 시작했는데 한동안 리액트 훅스에 대해'장면 뒤의 작업 원리'증후군이 생겼어요.
간단하고 무상태로 보이는 자바스크립트 함수에서 호출될 때 갈고리는 상태를 유지합니다.
특히 같은 함수 구성 요소에 같은 종류의 갈고리가 공존하는 방법과 여러 렌더링에서 상태를 유지하는 방법에 대해 설명합니다.
예를 들어, 다음 함수MyComponent의 여러 호출에서

function MyComponent() {
  const refUp = useRef(0);
  const refDown = useRef(0);

  const [countUp, setCountUp] = useState(0);
  const [countDown, setCountDown] = useState(0);

  const clicked = () => {
    setCountUp(count => count + 1);    
    setCountDown(count => count - 1);    
  };

  console.log("rendering");

  return (
    <p>
      <span>Up: {refUp.current++}</span><br/>
      <span>Down: {refDown.current--}</span><br/>
      <span>Counts: {countUp}, {countDown}</span><br/>
      <button onClick={clicked}>Count</button>
    </p>
  );
}

refA.current와refB.current 어떻게 자바스크립트this 같은 것에 의존하지 않는 상황에서 변이가 발생하고 여러 개의 렌더링에 여전히 존재하며 그들의 값을 유지할 수 있습니까?
특히 두 개의 같은 호출useRef(0)을 통해 만들어진 것을 감안하면?나의 직감은 나에게 유일한 명칭 매개 변수, 예를 들면 useRef(0, "refA")가 있어야 한다고 말했지만, 실제로는 없었다.
같은 문제도 이러한 변수를 초기화하는countUp,countDown와 상응하는 useState(0) 호출에 적용된다.
try it in the CodePen
반드시 어떤 것이 우리의 상태를 유지해야 한다.
모든 갈고리는 반드시 어떤 1:1의 반사가 있어야만 그 상태로 들어갈 수 있다.
그것이 움직일 때 마법이 없다.요컨대, 다음은 내가 그것에 대한 이해이다.

우선, 디자인에 따라 갈고리 호출은 React 함수 구성 요소 이외에 작용하지 않는다.그것들은 구성 요소를 보여줄 때 리액션이 제공하는 호출 상하문에 은밀하게 의존한다.

React는 웹 페이지의 생명 주기 내에 자신의 내부 상태를 유지한다.비록 완전히 정확하지는 않지만, 우리는 정태라고 부른다.

위MyComponent와 같은 모든 구성 요소는 React의 정적 상태에서 하나의 전용 항목을 가지고 이 항목은 렌더링 사이에서 구성 요소가 사용하는 모든 갈고리의 상태를 유지한다.

갈고리와 유사한 useRef를 호출할 때 React는 호출된 구성 요소 (현재 렌더링 중인 구성 요소) 를 알고 있기 때문에 React는 이전에 비추고 정적 속에 저장된 단일 구성 요소의 상태 항목을 검색할 수 있습니다.이것은 각 구성 요소의 갈고리useRef와 useState의 현재 값을 저장하는 곳이다.

처음에는 구성 요소를 설치할 때 이런 항목을 만들고 비추었다(또는 처음 렌더링할 때 깊이 연구하지 않았지만 이미 한 번 완성했다).

구성 요소 함수useRef나 useState 등 호출의 정확한 순서는 매우 중요하기 때문에 후속 렌더링에서는 변하지 않아야 한다.우리의 예에서 React는 처음에 useRef에 내부 상태MyComponent의 두 항목을 만들고 useState에 두 항목을 만들었다.

후속으로 (호출MyComponent))될 때 React는 정확한 상태에 접근하는 방법을 알고 각useRef 또는 useState의 호출 순서에 따라 어떤 값을 되돌려줍니다.

저는 React to map 갈고리가 함수 구성 요소의 출현 순서에 사용된 정확한 데이터 구조를 확정하지 못했고 깊이 연구하지 못했습니다.그러나 우리는 모든 갈고리가 호출되는 순서를 구성 요소의 생명주기 유지보수를 위한 갈고리 그룹의 인덱스로 보기 쉽다.

따라서, 만약 우리가 여러 개의 렌더링 중에 이 순서를 어지럽힌다면, 우리의 상태는 원시 인덱스가 정확하지 않기 때문에 파괴될 것이다.예를 들어 아래의 허구의 예는 곧 refUp와 refDown의 상태를 어지럽힐 수 있다. 왜냐하면 그들의 useRef 호출 순서가 일치하지 않기 때문이다.

 // don't mess up the order of hooks like this:
 let refUp;
 let refDown;
 if (Date.now() & 1) {
   refUp = useRef(0);
   refDown = useRef(0);
 } 
 else {
   refDown = useRef(0);
   refUp = useRef(0);
 }

마지막으로 갈고리는 클래스 구성 요소에 적용되지 않습니다.이론적으로 클래스 구성 요소 연결render() 방법을 지원할 수 있지만 React의 이념은 상태를 클래스this.state에 보존하고 클래스 구성 요소를 업데이트하는 것이다.
다음 자료는 이러한 갈고리 메커니즘을 이해하는 데 큰 도움을 주었다.

ReactHooks.js

Rules of Hooks

Hooks FAQ - Under the Hood

Deconstructing the Magic Behind React Hooks

Under the hood of React’s hooks system

Why Do React Hooks Rely on Call Order?