Рубрики
Без рубрики

Что такое «подъемное состояние» в реакции?

Вот простой и практичный пример, что это значит

Автор оригинала: FreeCodeCamp Community Member.

Вот простой и практичный пример, что значит «поднять состояние» в реакции, и как он может помочь вам построить свои приложения.

Подъемное состояние вверх – это общий шаблон, который необходим для разработчиков реагирования. Это помогает избежать более сложных (и часто ненужных) шаблонов для управления вашим государством.

Как оно это делает? Давайте посмотрим, как через простой пример.

Ломая наше приложение Todo

Начнем с базового приложения TODO, который состоит из трех компонентов: Тодоон , Тодолист и Addtodo Отказ

Все эти компоненты, как предполагают их имя, собираются поделиться некоторому общему государству.

Если вы посмотрите на Тодоон Это то, где вы собираетесь отображать, вверх в верхней части вашего приложения, сколько всего снимается в вашем приложении.

Тодолист будет там, где вы показываете все ваши TODOS. Он имеет некоторое начальное состояние с этими тремя пунктами («Пункт 1», «Пункт 2», «Пункт 3»), который вы отображете в некопленном списке.

И, наконец, у вас есть Addtodo Отказ Это состоит из формы, где вы хотите добавить новый элемент в этот список. Прямо сейчас вы просто войдите в систему ToDo, который вы вводите на вход в консоль:

// src/App.js

import React from "react";

export default function App() {
  return (
    <>
      
      
      
    
  );
}

function TodoCount() {
  return 
Total Todos: 
;
}

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

  return (
    
    
      {todos.map((todo) => (
        
  • {todo}
    • 
      ))}
    

  );
}

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

  return (
    

      
      
    

  );
}

Почему вы должны заботиться о подъемном состоянии вверх?

Как вы можете использовать концепцию подъемного состояния, чтобы помочь закончить ваше приложение?

Эти компоненты должны поделиться каким-то государством, каким-то государством Todo. Вам нужно поделиться этим постановлением TODO, чтобы отобразить количество TODOS, а также для обновления вашего списка Todo.

Вот где приходит концепция подъема государства вверх.

Каким общим предком вы должны поднять свое состояние, чтобы все компоненты могли читать и обновить это состояние? Приложение составная часть.

Вот что ваше приложение теперь должно выглядеть так:

// src/App.js

import React from "react";

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

function TodoCount() {
  return 
Total Todos: 
;
}

function TodoList() {
  return (
    
    
      {todos.map((todo) => (
        
  • {todo}
    • 
      ))}
    

  );
}

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

  return (
    

      
      
    

  );
}

Как пройти состояние

Тем не менее, есть небольшая проблема.

Тодолист не имеет доступа к Тодос Переменная состояния, поэтому вам нужно передать это от Приложение :

Вы можете сделать это с компонентами в реакции с использованием реквизитов.

На Тодолист Давайте добавим опоры с именем Тодос Отказ Вы можете разрушать Тодос от объекта реквизита. Это позволяет вам снова увидеть ваши предметы Todo.

Теперь, как насчет отображения общего количества TODOS в пределах Тодоон составная часть?

Это еще один экземпляр, в котором вы можете передавать данные в виде опоры, поскольку Тодоон полагается на это состояние. Еще раз мы предоставим такое же опоры, Тодос Разрушайте его от объекта реквизита и отобразить общее количество TODOS, используя todos.length :

import React from "react";

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

  return (
    <>
      
      
      
    
  );
}

function TodoCount({ todos }) {
  return 
Total Todos: {todos.length}
;
}

function TodoList({ todos }) {
  return (
    
    
      {todos.map((todo) => (
        
  • {todo}
    • 
      ))}
    

  );
}

Как пройти обратные вызовы вниз

Теперь последний шаг должен быть в состоянии добавить новый TODO.

Это где ваша функция сеттера, Сатодос , входит. Чтобы обновить состояние Todo, вам не нужно передавать оба значения, переменную и функцию настройки – все, что вам нужно сделать, это передавать вниз Сатодос Отказ

Вы передадите это до Addtodo как опоры того же имени (Settodos) и разрушают его от реквизит.

Как вы можете видеть, вы используете свою форму при отправке, чтобы получить доступ к значению ввода – все, что было введено в него, которое вы надеваете в локальную переменную с именем Todo Отказ

Вместо того, чтобы использовать текущий массив TODOS, вы можете просто использовать внутреннюю функцию, чтобы получить значение предыдущего ToDo. Это позволяет вам получить предыдущие TODOS и просто вернуть то, что вы хотите, чтобы новое состояние было.

Это новое состояние будет массивом, в котором вы будете распространять все предыдущие TODOS и добавить новый TODO в качестве последнего элемента в этом массиве:

import React from "react";

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

  return (
    <>
      
      
      
    
  );
}

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

  return (
    

      
      
    

  );
}

Как только вы добавите новый элемент в свой список Todo, он сразу добавляется в состояние. Тогда вы видите свой Тодолист Component Re-Render, чтобы отобразить этот новый элемент, а также Тодоон Чтобы показать общее количество TODOS, которое сейчас 4:

Заключение

Подъемное состояние вверх – это важный шаблон для разработчиков реагирования, потому что иногда у нас есть государство, которое находится в пределах определенного компонента, который также необходимо поделиться со компонентами брата.

Вместо того, чтобы использовать целую государственную библиотеку управления, такие как контекст Redux или React, мы можем просто поднять состояние до ближайшего общего предка и передавать оба переменные состояния, внизу значения состояния, а также любые обратные вызовы для обновления этого состояния.

Готов к следующему шагу? Присоединяйтесь к React BootCamp

React Bootcamp Занимает все, что вы должны знать о изучении реагирования и связки в один комплексный пакет, включая видео, обманывать, плюс специальные бонусы.

Получить инсайдерскую информацию сотни разработчиков уже использовалось для освоения реагирования, находить работу своей мечты и контролировать свое будущее:

Нажмите здесь, чтобы быть уведомленным, когда он открывается

Читайте ещё по теме: