반응 후크-useState 및 변수 사용

반응 후크는 우리에게 useState 옵션을 제공하며 항상 후크 대 클래스 상태 비교를 봅니다. 그러나 후크와 일부 정규 변수는 어떻습니까?

예를 들어

function Foo() {
    let a = 0;
    a = 1;
    return <div>{a}</div>;
}

나는 Hooks를 사용하지 않았으며 다음과 같은 결과를 얻을 것이다.

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

차이점은 무엇입니까? 이 경우 후크를 훨씬 더 복잡하게 사용하는 이유는 무엇입니까?

이유는 useState뷰 를 다시 렌더링하기 때문입니다 . 변수 자체는 메모리의 비트 만 변경하며 앱 상태는 뷰와 동기화되지 않을 수 있습니다.

이 예제를 비교하십시오 :

function Foo() {
    const [a, setA] = useState(0);
    return <div onClick={() => setA(a + 1)}>{a}</div>;
}

function Foo() {
    let a = 0;
    return <div onClick={() => a + 1}>{a}</div>;
}

두 경우 모두 a클릭시 변경 사항이 있지만 useState보기를 올바르게 사용 하면 a의 현재 값이 올바르게 표시 됩니다.

상태를 업데이트하면 구성 요소가 다시 렌더링 될 수 있지만 로컬 값은 그렇지 않습니다.

귀하의 경우 구성 요소에서 해당 값을 렌더링했습니다. 즉, 값이 변경되면 업데이트 된 값을 표시하기 위해 구성 요소를 다시 렌더링해야합니다.

따라서 useState일반적인 지역 값보다 사용하는 것이 좋습니다 .

function Foo() {
    let a = 0;
    a = 1; // there will be no re-render.
    return <div>{a}</div>;
}

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // re-render required
    return <div>{a}</div>;
}

첫 번째 예제는 데이터가 본질적으로 절대 변경되지 않기 때문에 작동합니다. 사용의 시작점은 setState상태가 정지 될 때 전체 구성 요소를 다시 렌더링하는 것입니다. 따라서 예제에 일종의 상태 변경 또는 관리가 필요한 경우 변경 값이 필요하다는 것을 빨리 인식하고 변수 값으로 뷰를 업데이트하려면 상태 및 다시 렌더링이 필요합니다.

function Foo() {
    const [a, setA] = useState(0);
    if (a != 1) setA(1); // to avoid infinite-loop
    return <div>{a}</div>;
}

에 해당

class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a: 0
        };
    }
    // ...
}

어떤 useState두 가지 반환 있습니다 :

1. 새로운 상태 변수
2. 해당 변수의 세터

당신이 전화 setA(1)하면 당신은 전화 this.setState({ a: 1 })를 다시 렌더링을 트리거합니다.

로컬 변수는 돌연변이에 따라 렌더링 될 때마다 재설정되지만 상태는 업데이트됩니다.

function App() {
  let a = 0; // reset to 0 on render/re-render
  const [b, setB] = useState(0);

  return (
    <div className="App">
      <div>
        {a}
        <button onClick={() => a++}>local variable a++</button>
      </div>
      <div>
        {b}
        <button onClick={() => setB(prevB => prevB + 1)}>
          state variable b++
        </button>
      </div>
    </div>
  );
}