리액트 훅 - 후드 아래에서 무슨 일이 일어나고 있습니까?

리액트 훅 - 후드 아래에서 무슨 일이 일어나고 있습니까?

리액트 훅을 사용해 봤는데 상태 저장과 같은 것이 단순해진 것 같습니다.하지만, 그들은 많은 것을 마술로 하는 것 같고, 나는 그들이 실제로 어떻게 작동하는지 좋은 기사를 찾을 수 없다.

첫 번째로 마법처럼 보이는 것은 useState()와 같은 함수를 호출하면 setXX 메서드를 호출할 때마다 기능 컴포넌트가 어떻게 리렌더 되는가 하는 것입니다.

기능 컴포넌트가 Mount/Unmount에서 코드를 실행할 수 없는 경우 useEffect()와 같은 것은 어떻게 componentDidMount를 가짜로 만들 수 있습니까?

useContext()는 실제로 컨텍스트에 어떻게 액세스하고 어떤 컴포넌트가 컨텍스트를 호출하는지 어떻게 알 수 있습니까?

또한 다음 기능을 사용할 수 있는 useDataLoader처럼 이미 생겨나고 있는 서드파티 훅을 모두 커버하는 것도 아닙니다.

const { data, error, loading, retry } = useDataLoader(getData, id)

컴포넌트가 변경되었을 때 데이터, 오류, 로드 및 재시도 어떻게 컴포넌트를 재렌더합니까?

죄송합니다. 많은 질문들이 있지만 대부분 한 가지 질문으로 요약할 수 있습니다. 바로 다음과 같습니다.

후크 뒤에 있는 함수는 어떻게 그것을 호출하는 기능/상태 없는 컴포넌트에 실제로 접근하여 리렌더 사이의 사물을 기억하고 새로운 데이터로 리렌더를 시작할 수 있을까요?

리액트 훅은 컴포넌트의 숨겨진 상태를 이용하여 파이버 내에 저장됩니다.파이버는 컴포넌트 인스턴스에 대응하는 엔티티입니다(더 넓은 의미에서 기능 컴포넌트는 클래스 컴포넌트로 인스턴스를 생성하지 않기 때문입니다).

훅에 각 컨텍스트, 상태 등에 대한 액세스를 제공하는 것이 React 렌더러이며, 컴포넌트 함수를 호출하는 것이 React 렌더러입니다.따라서 컴포넌트 인스턴스를 컴포넌트 함수 내부에서 호출되는 후크 함수와 연관지을 수 있습니다.

이 스니펫에서는, 그 기능에 대해 설명합니다.

let currentlyRenderedCompInstance;
const compStates = new Map(); // maps component instances to their states
const compInstances = new Map(); // maps component functions to instances

function useState(initialState) {
  if (!compStates.has(currentlyRenderedCompInstance))
    compStates.set(currentlyRenderedCompInstance, initialState);

  return [
    compStates.get(currentlyRenderedCompInstance) // state
    val => compStates.set(currentlyRenderedCompInstance, val) // state setter
  ];
}

function render(comp, props) {
  const compInstanceToken = Symbol('Renderer token for ' + comp.name);

  if (!compInstances.has(comp))
    compInstances.set(comp, new Set());

  compInstances.get(comp).add(compInstanceToken);

  currentlyRenderedCompInstance = compInstanceToken;

  return { 
    instance: compInstanceToken,
    children: comp(props)
  };
}

방법과 마찬가지로useState를 통해 현재 렌더링된 컴포넌트 인스턴스 토큰에 액세스할 수 있습니다.currentlyRenderedCompInstance다른 삽입 후크도 이 기능을 사용하여 이 컴포넌트인스턴스의 상태를 유지할 수 있습니다.

Dan Abramov는 불과 며칠 전에 이 내용을 다루는 블로그 투고를 작성했습니다.

https://overreacted.io/how-does-setstate-know-what-to-do/

후반부는 특히 useState와 같은 후크에 대해 자세히 설명합니다.

몇 가지 구현 세부 사항에 대해 자세히 알아보려면 여기에 관련 답변을 드리겠습니다.리액트 훅은 대상 컴포넌트를 어떻게 결정합니까?

저는 https://eliav2.github.io/how-react-hooks-work/을 읽는 것을 추천합니다.

리액트 훅을 사용할 때 일어나는 일에 대한 자세한 설명과 많은 인터랙티브한 예를 들어 설명합니다.

주의 - 이 문서에서는 리액트 스케줄이 어떻게 후속 단계를 호출하는지에 대해 기술적인 용어로 설명하지는 않지만, 후속 단계를 위해 콜을 스케줄링하기 위해 반응하는 규칙이 무엇인지 설명합니다.

Eliav Louski가 제공한 또 다른 답변의 URL은 지금까지 제가 접한 설명 중 가장 좋은 React 설명입니다.이 페이지는 훅과 친구들로부터 모든 마법을 제거하므로 React의 공식 튜토리얼을 대체할 것입니다.

언급URL : https://stackoverflow.com/questions/53729917/react-hooks-whats-happening-under-the-hood