Автор оригинала: Reed Barger.

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

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

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

1. Государственные обновления с USESTATE не объединены

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

Большим преимуществом крючкового крюка является то, что мы можем назвать его столько раз, сколько мы любим использовать столько же, сколько нам нужно.

В этом примере у нас есть базовая форма с вводом электронной почты и пароля. Мы управляем состоянием электронной почты и пароля как отдельные переменные состояния:

import React from "react";

export default function App() {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");

  return (
    

       setEmail(e.target.value)}
      />
       setPassword(e.target.value)}
      />
      Submit
    
  );
}

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

Как мы являемся соответствующим образом обновлять состояние с setstate. Функция, когда это объект?

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

import React from "react";

export default function App() {
  const [state, setState] = React.useState({
    email: '',
    password: ''
  })

  function handleInputChange(e) {
    setState({
      [e.target.name]: e.target.value
    })
  }

  return (
    

      
      
      Submit
    
  );
}

Теперь мы обновляем значение каждого ввода в состоянии в соответствии с именем ввода нашего пользователя в настоящее время вводят в систему.

Этот шаблон обычно используется для обновления состояния в компонентах на основе классовых классов, но это не работает с USESTATE крючком. Государственные обновления с USESTATE’s SetState Функция не объединяется автоматически.

Что это обозначает?

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

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

import React from "react";

export default function App() {
  const [state, setState] = React.useState({
    email: '',
    password: ''
  })

  function handleInputChange(e) {
    setState({
      // spread in previous state with object spread operator
      ...state,
      [e.target.name]: e.target.value
    })
  }

  return (
    

      
      
      Submit
    
  );
}

Для USESTATE крючка у нас есть гибкость для управления несколькими примитивными значениями или использовать объект с несколькими свойствами.

Однако если вы будете оценивать с объектом, не забудьте распространяться в предыдущем состоянии при выполнении любых обновлений, чтобы убедиться, что он правильно обновляется.

2. Государственные крюки вызывают переназначение, УСЭРЕФ нет

Состояние React имеет очень важные отношения с рендеринговыми компонентами.

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

Если наш компонент использует любое состояние, мы должны понимать, что он должен быть снова оказан – то есть повторно представлен – в ответ на любое обновление государства.

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

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

Если он не повторно визуализирует всякий раз, когда мы вносим изменения в эту переменную, обновления не будут показаны.

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

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

Что такое такой пример? Допустим, у нас есть приложение, где пользователь может ввести в вход, значение которого управляется через состояние. Это приложение также имеет другой компонент, который отображает список данных.

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

То, как мы можем исправить это с помощью React.memo Функция, которая помогает предотвратить пересмотр нашего компонента, когда родительский компонент повторно рендерирует:

export default function App() {
  const [skill, setSkill] = React.useState("");
  const [skills, setSkills] = React.useState(["HTML", "CSS", "JavaScript"]);

  function handleChangeInput(event) {
    setSkill(event.target.value);
  }

  function handleAddSkill() {
    setSkills(skills.concat(skill));
  }

  return (
    <>
      
      Add Skill
      
    
  );
}

/* But the problem, if you run this code yourself, is that when we type into the input, because the parent component of SkillList (App) re-renders, due to the state being updated on every keystroke, the SkillList is rerendered constantly (as indicated by the console.log) */

/* However, once we wrap the SkillList component in React.memo (which is a higher-order function, meaning it accepts a function as an argument), it no longer re-renders unnecessarily when our parent component does. */
const SkillList = React.memo(({ skills }) => {
  console.log("rerendering");
  return (
    

      {skills.map((skill, i) => (
        
{skill}
      ))}
    
  );
});

Еще одна вещь, которую следует отметить, что есть технически способ управлять состоянием, не вызывая переназначения. Мы можем сделать это с помощью крючка, что большинство людей не видят, как гостевой крючок – УСЭРЕФ Отказ

USEREF можно использовать для хранения любого значения на его . Кавокзал имущество. Другими словами, если мы хотели сделать простой счетчик с USEREF и обновить значение счетчика, которое мы сохранили на нем, даже если мы обновим его значение, он не будет отображать правильный подсчет после начала рендера, потому что это не вызывает Re-Render:

import React from "react";

export default function App() {
  const countRef = React.useRef(0);

  function handleAddOne() {
    countRef.current += 1;
  }

  return (
    <>
      
Count: {countRef.current}

      {/* clicking this will not change display count */}
      + 1
    
  );
}

3. Государственные обновления должны быть неизменными

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

Когда дело доходит до управления государством с помощью крючка USESTATE, мы должны Только Используйте специальную функцию Setter, как предусмотрено в качестве второго элемента в массиве, мы возвращаемся от steScate, чтобы обновить его. Если мы этого не сделаем и пытаемся обновить его вручную, с помощью просто простого JavaScript, наше приложение не будет работать так, как мы ожидаем.

Этот момент очень тесно связан с предыдущим пунктом, который мы сделали: Состояние, при обновлении правильно приводит к восстановлению нашего компонента.

Как вы думаете, что произойдет, если мы попытаемся обновить состояние по-своему вместо того, чтобы «реагировать» путь?

Опять же, Rect – это то, что заботится о том, чтобы отображать и правильно рендурировать наш компонент, когда что-то меняется. Если мы не будем использовать React, то мы не можем ожидать, что наше приложение отражает любые изменения, которые мы сделали в государстве.

Другими словами, Если мы обновим состояние с простой JavaScript, а не SetState , он не будет вызвать перезарядки и реагировать не будет отображать эти (недействительные) изменения в состоянии нашего пользователя.

Это простой, но важный урок, чтобы запомнить.

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

Независимо от нашего выбора в государственном управлении мы должны обновлять состояние соответствующим образом и не пытаться обновить или мутировать его напрямую.

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

Государственные обновления всегда должны быть неизменными. Это означает, что мы не должны сделать наши собственные изменения или мутировать данные, хранящиеся в нашем переменных состоянии. Это делает наше государство непредсказуемо и может привести к непреднамеренным проблемам в нашем приложении, которые трудно отладить.

import React from 'react';

export default function App() {
  const [count, setCount] = React.useState(0);
  
  // Don't assign state to new (non-state) variables
  const newCount = count;
  // Don't directly mutate state
  const countPlusOne = count + 1;

  return (
    <>
      
Count: {count}
    
  );
}

В дополнение к непосредственно не мутирующим переменным состояния, убедитесь, что никогда не назначайте переменные состояния к другим (негосударственным) переменным.

4. Государственные обновления асинхронные и запланированы

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

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

Что означает это слово «снимает»?

Другими словами, это немедленно не восстанавливает компонент. Он не останавливает наш код прямо в этой строке, где мы обновляем состояние, но это происходит в какой-то момент в будущем. Это для целей производительности, и это дает нам лучшее представление о том, что реагирует под капотом.

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

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

Это важно сравнить с УСЭРЕФ , который мы упоминали ранее, способные сдерживать данные в пределах своей текущей собственности. Любые обновления, сделанные с USEREF, выполняются синхронно – мы можем посмотреть наш код и точно увидеть, когда было выполнено заданное обновление в УСЭРЕФ , но не с утилизацией.

5. Стае может случиться с закрытиями

Наконец, важная проблема, которая может возникнуть с состоянием реагирования, является проблемой устаревшего состояния.

Что такое несвежие государства в реакции?

Steale State – это проблема, которая возникает всякий раз, когда мы пытаемся обновить состояние, часто в закрытии.

Эта проблема Stale State основана на том факте, что замыкание может не захватить самое современное значение состояния. Вот что мы подразумеваем под страдами – мы имеем в виду, что оно старое, а не текущее значение, которое мы хотим.

Эта проблема Stale State тесно связана с темой, которую мы обсудили, что предыдущая тема обновлений государства является асинхронной.

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

Мы можем выразить проблему устаревшего замыкания в простом счетчике приложения, которые обновляют количество после второго, используя Сетримс функция.

Поскольку Settimeout создает замыкание, мы доступ к несвежей стоимости нашей государственной переменной, считать , когда мы называем setcount Отказ

import React from 'react';

export default function App() {
  const [count, setCount] = React.useState(0);

  function delayAddOne() {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  }

  return (
    <>
      
Count: {count}
      + 1
    
  );
}

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

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

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

В нашем случае это будет предыдущее значение подсчета, увеличиваемое на один:

import React from 'react';

export default function App() {
  const [count, setCount] = React.useState(0);

  function delayAddOne() {
    setTimeout(() => {
      // stale state problem goes away using inner function
      setCount(prevCount => prevCount + 1);
    }, 1000);
  }

  return (
    

      
Count: {count}
      + 1
    
  );
}

Как только мы предоставим эту внутреннюю функцию для SetState Чтобы надежно получить предыдущее состояние и вернуть новое состояние из нашей функции, наша несвежная государственная проблема из-за нашего закрытия уходит.

Наслаждайтесь этим постом? Присоединяйтесь к React BootCamp

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

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

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

Оригинал: “https://www.freecodecamp.org/news/what-every-react-developer-should-know-about-state/”