기다리다반응이 어떻습니까?상태 작업?

그래서 React 갈고리가 발표된 지 한참 됐는데 아주 좋아요!나는 생산 코드에서 그것들을 사용했는데, 그것은 모든 것을 더욱 좋아 보였다.내가 갈고리를 계속 사용했을 때, 나는 이 모든 마법들이 어떻게 작용하는지 알고 싶어졌다.
분명히 나는 보스턴 반응 회의가 있기 때문에 유일한 사람이 아니다.라이언 플로렌스와 마이클 잭슨이 이 주제를 둘러싸고 이렇게 멋진 강연을 해 주셔서 감사합니다.계속 보시면 useEffect에 대한 더 많은 정보와 그 작업 원리를 알게 될 것입니다!

그것은 어떻게 일합니까?

기능 구성 요소를 만들고 추적 상태의 React 갈고리를 던졌습니다. 업데이트를 하면 정상적으로 작동할 수 있습니다.
우리 중 많은 사람들이 이전에 이 예의 변화를 본 적이 있다.

하나의 사용 상태

import React from "react";

const App = () => {
  const [count, setCount] = React.useState(1);

  return (
    <div className="App">
      <h1>The infamous counter example</h1>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span style={{ margin: "0 16px" }}>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

export default App;

👏 👏 👏 얘가 작용했어!

좋아, 다행이다. 그런데 어떻게 마술이 됐지?React.useState선 보세요.이 책은 읽기가 매우 쉬워서 나는 지금까지 의심한 적이 없다.count값과 setCount이라는 함수를 추출하는 분석 함수 그룹이 있습니다. useState의 기본값으로 count를 초기화합니다.그림에 또 다른 React.useState을 추가하면 어떻게 됩니까?

useState 두 개, 하하하

드라큘라 백작에게 누가 있나?

const App = () => {
  const [count, setCount] = React.useState(1);
  const [message, setMessage] = React.useState("");

  const adder = () => {
    if (count < 10) {
      setCount(count + 1);
      setMessage(null);
    } else {
      setMessage("You can't go higher than 10");
    }
  }

  const subtracter = () => {
    if (count > 1) {
      setCount(count - 1);
      setMessage(null);
    } else {
      setMessage("You can't go lower than 1, you crazy");
    }
  }

  return (
    <div className="App">
      <h1>The infamous counter example</h1>
      <button onClick={subtracter}>-</button>
      <span style={{ margin: "0 16px" }}>{count}</span>
      <button onClick={adder}>+</button>
      <p>{message}</p>
    </div>
  );
};

현재, 사용자가 1-10의 경계를 넘어서려고 시도할 때마다 우리는 메시지를 표시합니다

우리 구성 요소에는 같은 React.useState 갈고리를 사용하고 서로 다른 기본값을 가진 두 개의 비구조화 그룹이 있습니다.와, 지금 우리는 이 모든 마력에 들어가고 있어.
알겠습니다. React에서 React.useState을 삭제하겠습니다. "usestate가 정의되지 않았습니다"라는 인용 오류를 받아야 합니다.

우리 자신의 useState 함수를 실현합시다.

역방향 공정useState 함수

useState 함수는 하나의 값과 이 값을 설정할 함수가 있다
다음과 같이 하십시오.

const useState = (value) => {

  const state = [value, setValue]
  return state
}

우리는 아직 setValue을 정의하지 않았기 때문에 인용 오류가 발생할 수 있습니다.우리는 setValue가 함수라는 것을 안다. 왜냐하면 우리는 useState에서 그것을 사용하기 때문이다.
저희 계수 useState: const [count, setCount] = React.useState(1);전화 setCount: setCount(count + 1);setValue 함수를 만드는 데는 더 많은 오류가 발생하지 않지만 - 및 + 단추는 작동하지 않습니다.

const useState = (value) => {
  const setValue = () => {
    // What do we do in here?
  }

  const state = [value, setValue]
  return state
}

useState의 기본값을 변경하면 count이 업데이트됩니다.👍🏽. 적어도 어떤 것들이 작용하고 있다😂.

다음은 set Value가 도대체 무엇을 했는지 알아야 한다.

setCount을 보았을 때, 그것은 어떤 가치를 재분배하고 있으며, 그 후에 다시 정렬하는 것에 대한 반응을 일으킬 것이다.이것이 바로 우리가 다음에 해야 할 일이다.

const setValue = () => {
  // What do we do in here?
  // Do some assigning
  // Rerender React
}

우리는 setValue 함수에 새로운 값 매개 변수를 전달할 것이다.

const setValue = (newValue) => {
  // What do we do in here?
  // Do some assigning
  // Rerender React
}

그러나 newValue 함수에서 우리는 setValue을 어떻게 처리합니까?

const setValue = (newValue) => {
  // Do some assigning
  value = newValue // Does this work?
  // Rerender React
}

value = newValue은 의미가 있지만 계수기의 값을 업데이트하지 않습니다.왜?내가 console.log이 setValue 안과 setValue을 제외했을 때, 이것이 바로 우리가 본 것이다.

그래서 내가 페이지를 새로 고친 후에계수 초기화는 1이고, 메시지 초기화는null입니다. 이것은 좋은 시작입니다.+ 단추를 누르면 계수 값이 2로 증가하는 것을 보았지만, 화면의 계수는 업데이트되지 않습니다.🤔 아마도 내가 수동으로 브라우저를 다시 렌더링해서 계수를 업데이트해야 합니까?

브라우저를 수동으로 다시 렌더링하는 빈약한 방식 구현

const useState = (value) => {
  const setValue = (newValue) => {
    value = newValue;
    manualRerender();
  };
  const state = [value, setValue];
  return state;
};
.
.
.
const manualRerender = () => {
  const rootElement = document.getElementById("root");
  ReactDOM.render(<App />, rootElement);
};

manualRerender();

이것은 여전히 브라우저의 계수를 업데이트하지 않습니다.무슨 꿍꿍이수작이야?
나는 이 일에 한동안 지체했는데, 지금 나는 왜 그런지 안다.우리가 그것을 만든 후, 우리는 즉시 console.log을 성명합시다.

const state = [value, setValue];
console.log(state)

useState에 대한 호출로 인해 첫 번째 렌더링이 발생했습니다.[1, setValue()]useState을 두 번째 호출할 때 다음과 같이 표시됩니다.[null, setValue()]결과:

더 잘 시각화하기 위해서, 우리는 렌더링 화면의 횟수를 계산하기 위해 렌더링 추적기를 추가합니다.

let render = -1

const useState = (value) => {
  const setValue = (newValue) => {
    value = newValue;
    manualRerender();
  };
  const state = [value, setValue];
  console.log(++render)
  console.log(state)
  return state;
};

우리의 setValue 함수는 어떤 값을 업데이트해야 하는지 어떻게 압니까?그것은 없기 때문에 우리는 그것을 추적할 방법이 필요하다.그룹이나 객체를 사용하여 이 작업을 수행할 수 있습니다.나는 빨간색 알약을 선택했다.useState 함수 외에 states이라는 대상을 만들 것입니다

const states = {}

useState 함수에서 states 대상을 초기화합니다.괄호 기호를 사용하여 키/값 쌍을 지정합니다.states[++render] = state괄호 안에서 id을 추출할 수 있도록 렌더링 값을 저장하는 ++render이라는 변수도 만들 것입니다.
너는 이런 물건이 있어야 한다.

let render = -1;
const states = {};

const useState = (value) => {
  const id = ++render;

  const setValue = (newValue) => {
    value = newValue;
    manualRerender();
  };
  const state = [value, setValue];
  states[id] = state;
  console.log(states);
  return state;
};

우리 states의 대상은 무엇처럼 보입니까?

states = {
  0: [1, setValue],
  1: [null, setValue]
}

지금, 우리가 가감 버튼을 눌렀을 때, 우리는...다신 없어요.아, 맞다. value = newValue은 여전히 아무것도 하지 않았기 때문이다.
하지만 어떤 일들이 벌어지고 있다.컨트롤러를 보면, 우리가 그 중 하나를 클릭할 때마다 states 대상에 같은 그룹을 추가하지만, count은 증가하지 않고, 메시지는 여전히 비어 있음을 발견할 수 있습니다.
따라서 setValue은 value을 찾아서 newValue을 value에 분배해야 한다.

const setValue = (newValue) => {
  states[id][0] = newValue;
  manualRerender();
};

그리고 키: 0과 1만 업데이트해야 합니다. 이것은 우리의 두 개의 useState 위치가 될 것입니다.
따라서 manualRerender 함수로 이동하여 render에 대한 호출을 추가하고 -1에 재분배하십시오.

const manualRerender = () => {
  render = -1;
  const rootElement = document.getElementById("root");
  ReactDOM.render(<App />, rootElement);
};

우리가 이렇게 하는 것은 setValue를 호출할 때마다 manualRerender 함수를 render로 되돌리기 때문이다 - 1
마지막으로, 우리는 대상이 존재하는지 확인하기 위해 검사를 추가할 것이다.만약 그렇다면, 우리는 대상에게만 돌아갈 것이다.

if (states[id]) return states[id];

이제 우리는 또 일을 시작한다!

아이고.이것은 매우 많은 처리를 필요로 하는데, 이것은 단지 useState에 대한 매우 간단한 방법일 뿐이다.아직 막후에서 많은 일이 일어나고 있지만, 적어도 우리는 그것의 작업 원리에 대해 대략적인 이해를 가지고 있으며, 그것에 대해 약간의 해혹을 가지고 있다.
모든 코드를 보고 어떻게 작동하는지 머릿속에 모형을 만들어 보세요.
도움이 됐으면 좋겠어요.😊