React의'컨디션 향상'은 무엇입니까?

다음은 간단하고 실용적인 예로'상태 향상'의 개념이 무엇인지, 그리고 응용 프로그램을 구축하는 데 어떻게 도움을 주는지 설명한다.
상태 향상은 React 개발자가 반드시 알아야 할 흔한 모델이다. 왜냐하면 이것은 우리가 상태를 관리하는 데 더욱 복잡한 (일반적으로 불필요한) 모델을 피하는 데 도움을 주기 때문이다.
얘는 어떻게 했어?간단한 예를 어떻게 통과하는지 봅시다.

Want to build amazing React apps using best practices from front to back? Check out the React Bootcamp.

Todo 어플리케이션 분해

기본적인 todo 응용 프로그램부터 시작하겠습니다. 세 가지 구성 요소로 구성됩니다. TodoCount, TodoList, AddTodo.
말 그대로 모든 이 구성 요소들은 공공 상태를 공유해야 한다.
만약 우리가 TodoCount을 보면, 이것이 바로 우리가 응용 프로그램 상단에 표시할 내용인데, 우리의 응용 프로그램에 모두 얼마의 지불해야 하는가이다.TodoList는 우리가 해야 할 모든 사항을 보여주는 곳이 될 것이다.이것은 이 세 가지 초기 상태(제1항, 제2항, 제3항)에 대해 무질서한 목록에 표시한다.
마지막으로 우리는 AddTodo이 있다.목록에 새 항목을 추가할 수 있는 폼이 포함되어 있습니다.현재, 우리는 입력한 todo를 컨트롤러의 입력에 기록할 뿐입니다.

// src/App.js

import React from "react";

export default function App() {
  return (
    <>
      <TodoCount />
      <TodoList />
      <AddTodo />
    </>
  );
}

function TodoCount() {
  return <div>Total Todos: </div>;
}

function TodoList() {
  const [todos, setTodos] = React.useState(["item 1", "item 2", "item 3"]);

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo}>{todo}</li>
      ))}
    </ul>
  );
}

function AddTodo() {
  function handleSubmit(event) {
    event.preventDefault();
    const todo = event.target.elements.todo.value;
    console.log(todo);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" id="todo" />
      <button type="submit">Add Todo</button>
    </form>
  );
}

우리는 왜 국가의 지위를 향상시키는 데 관심을 가지고 있습니까?

우리는 어떻게 상태를 향상시키는 개념을 사용하여 응용 프로그램의 완성을 돕습니까?
이 구성 요소들은 일부 상태, 일부 업무 대기 상태를 공유해야 한다.우리는 이 대기사항 상태 순서를 공유하여 대기사항의 수량을 표시하고 대기사항 목록을 업데이트해야 한다.
이것이 바로 상태를 향상시키는 개념이다.

We lift up state to a common ancestor of components that need it, so that they can all share in the state. This allows us to more easily share state among all of these components that need rely upon it.

모든 구성 요소가 이 상태를 읽고 업데이트할 수 있도록 상태를 어느 공동 조상으로 끌어올려야 합니까?App 구성 요소
다음은 우리 애플리케이션의 현재 모습입니다.

// src/App.js

import React from "react";

export default function App() {
  const [todos, setTodos] = React.useState(["item 1", "item 2", "item 3"]);    

  return (
    <>
      <TodoCount />
      <TodoList />
      <AddTodo />
    </>
  );
}

function TodoCount() {
  return <div>Total Todos: </div>;
}

function TodoList() {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo}>{todo}</li>
      ))}
    </ul>
  );
}

function AddTodo() {
  function handleSubmit(event) {
    event.preventDefault();
    const todo = event.target.elements.todo.value;
    console.log(todo);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" id="todo" />
      <button type="submit">Add Todo</button>
    </form>
  );
}

계승 상태

하지만 작은 문제가 하나 있다.TodoList 상태 변수에 액세스할 수 없으므로 todos 에서 다음 단계로 전달해야 합니다.

우리는 도구를 사용하여 반응 중에 조립품을 사용할 수 있다.App에 TodoList라는 아이템을 추가합니다.우리는 도구의 대상에서 해체할 수 있다todos.이것은 우리로 하여금 다시 처리해야 할 사항을 볼 수 있게 한다.
현재 대기 사항 계수 구성 요소에 대기 사항 총수를 표시하는 것은 어떻습니까?
이것은 우리가 도구로 데이터를 전달할 수 있는 또 다른 실례이다. 왜냐하면 Do count는 이 상태에 의존하기 때문이다.그래서 우리는 다시 같은 도구 to due를 제공할 것이다. 구조는 to do counts, 도구 object에서 to due의 총수를 나타낸다.이것은 수치todos에서 나온 것이다. 우리는 지금 그것이 3이라는 것을 보았다.

import React from "react";

export default function App() {
  const [todos, setTodos] = React.useState(["item 1", "item 2", "item 3"]);

  return (
    <>
      <TodoCount todos={todos} />
      <TodoList todos={todos} />
      <AddTodo />
    </>
  );
}

function TodoCount({ todos }) {
  return <div>Total Todos: {todos.length}</div>;
}

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo}>{todo}</li>
      ))}
    </ul>
  );
}

리콜을 아래로 전달

이제 마지막 단계는 새로운 대기 사항을 추가할 수 있는 것이다.
이것이 바로 우리setter 함수todos.length의 작용이다.todo 상태를 업데이트하려면 변수와setter 함수 두 값을 동시에 전달할 필요가 없고 전달setTodos만 하면 됩니다.
우리는 그것을 동명 도구(setTodos)로 전달setTodos하고 도구에서 분해할 것이다.
보시다시피, 우리는 제출할 때 표를 사용하여 입력 값을 가져옵니다.우리는 그것을 addTodo라는 국부 변수에 놓았다.
현재 todos 그룹을 전달할 필요가 없습니다. 내부 함수를 사용하여 이전의 todos 값을 가져올 수 있습니다.이렇게 하면 우리는 이전의 TODO를 얻을 수 있고 우리가 원하는 새로운 상태만 되돌릴 수 있다.
이 새 상태는 하나의 그룹이 될 것입니다. 우리는 그 중에서 모든 이전의 todo를 전파하고, 새로운 todo를 이 그룹의 마지막 요소로 추가할 것입니다.

import React from "react";

export default function App() {
  const [todos, setTodos] = React.useState(["item 1", "item 2", "item 3"]);

  return (
    <>
      <TodoCount todos={todos} />
      <TodoList todos={todos} />
      <AddTodo setTodos={setTodos} />
    </>
  );
}

function AddTodo({ setTodos }) {
  function handleSubmit(event) {
    event.preventDefault();
    const todo = event.target.elements.todo.value;
    setTodos(prevTodos => [...prevTodos, todo]);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" id="todo" />
      <button type="submit">Add Todo</button>
    </form>
  );
}

Not only by lifting state up and passing its state variable down to the components that need to read from it, can we use this pattern, we can also use it for callbacks to be able to update state.

새 항목을 대기사항 목록에 추가하면 즉시 상태에 추가됩니다. 새 항목을 표시하기 위해 todo 구성 요소가 다시 렌더링되고 TodoList 총 대기사항 수가 4로 표시됩니다.

결론

상태를 향상시키는 것은 React 개발자에게 중요한 모델이다. 왜냐하면 때때로 우리의 상태는 특정 구성 요소에 위치하고 동급 구성 요소와 공유해야 하기 때문이다.
Redux나 React Context 같은 전체 상태 관리 라이브러리를 사용할 필요가 없습니다. 상태를 가장 가까운 공공 조상으로 끌어올리고 상태 변수와 상태 값을 아래로 전달하며, 그 어떠한 리셋도 이 상태를 업데이트할 수 있습니다.

다음 준비 됐어요?훈련소에 들어가다

The React Bootcamp 당신이 알아야 할 러닝 리액트에 대한 모든 지식을 동영상, 메모지, 특별 보너스를 포함한 종합 패키지로 포장한다.
수백 명의 개발자가 이미 파악하고 있는 내막 정보를 얻어 반응을 하고 이상적인 일을 찾으며 자신의 미래를 장악한다.

열릴 때 알림을 받으려면 여기를 누르십시오