Что такое useState () в React?

Question

В настоящее время я изучаю концепцию хуков в React и пытаюсь понять приведенный ниже пример.

    import { useState } from 'react';

    function Example() {
        // Declare a new state variable, which we'll call "count"
        const [count, setCount] = useState(0);

      return (
         <div>
            <p>You clicked {count} times</p>
           <button onClick={() => setCount(count + 1)}>
               Click me
           </button>
        </div>
     );
 }

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

Рассмотрим пример ниже

    setCount = () => {
        //how can I modify count value here. Not sure if I can use setState to modify its value
        //also I want to modify other state values as well here. How can I do that
    }

    <button onClick={() => setCount()}>
               Click me
     </button>

Answer 1

useState - это один из встроенных реактивных хуков, доступных в версии 0.16.7.

useState следует использовать только внутри функциональных компонентов. useState - это способ, если нам нужно внутреннее состояние и нам не нужно реализовывать более сложную логику, такую ​​как методы жизненного цикла.

const [state, setState] = useState(initialState);

Возвращает значение с состоянием и функцию для его обновления.

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

Функция setState используется для обновления состояния. Принимает новый значение состояния и ставит в очередь повторную визуализацию компонента.

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

class UserInfoClass extends React.Component {
  state = { firstName: 'John', lastName: 'Doe' };
  
  render() {
    return <div>
      <p>userInfo: {JSON.stringify(this.state)}</p>
      <button onClick={() => this.setState({ 
        firstName: 'Jason'
      })}>Update name to Jason</button>
    </div>;
  }
}

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <UserInfoClass />
    <UserInfoFunction />
  </div>
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

Новый объект создается при использовании обратного вызова setUserInfo. Обратите внимание, что мы потеряли lastName значение ключа. Исправлено, что мы могли передать функцию внутрь useState.

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

См. Пример:

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo(prevState => ({
        ...prevState, firstName: 'Jason' }))}>
        Update name to Jason
      </button>
    </div>
  );
}

ReactDOM.render(
    <UserInfoFunction />
, document.querySelector('#app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

В отличие от метода setState, найденного в компонентах класса, useState делает не автоматически объединять объекты обновления. Вы можете повторить это поведение путем объединения формы средства обновления функций с распространением объекта Синтаксис:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

Подробнее о useState см. официальную документацию .

Answer 2

useState() является крючком React. Хуки позволяют использовать состояние и изменчивость внутри компонентов функции.

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

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

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.count };
  }
  
  inc() {
    this.setState(prev => ({count: prev.count+1}));
  }
  
  render() {
    return <button onClick={() => this.inc()}>{this.state.count}</button>
  }
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Это простой компонент класса с состоянием счета, и обновление состояния выполняется методами. Это очень распространенный шаблон в компонентах класса. Первым делом нужно обернуть его компонентом функции с таким же именем, который делегирует все его свойства обернутому компоненту. Также вам нужно отрендерить завернутый компонент в функции return. Вот оно:

function Hello(props) {
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => this.inc()}>{this.state.count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

Это точно такой же компонент, с таким же поведением, тем же именем и теми же свойствами. Теперь давайте поднимем состояние счета до функционального компонента. Вот как это происходит:

function Hello(props) {
  const [count, setCount] = React.useState(0);
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => setCount(count+1)}>{count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>

Обратите внимание, что метод inc все еще существует, он никому не повредит, на самом деле это мертвый код. Это идея, просто продолжайте поднимать состояние. Когда вы закончите, вы можете удалить компонент класса:

function Hello(props) {
  const [count, setCount] = React.useState(0);

  return <button onClick={() => setCount(count+1)}>{count}</button>;
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>

<div id='root'></div>

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

С наилучшими пожеланиями

Answer 3

useState () - это пример встроенного React-хука, который позволяет вам использовать состояния в ваших функциональных компонентах. Это было невозможно до Реакции 16.7.

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

ПРИМЕЧАНИЕ. Обратите внимание, что в настоящее время крючки находятся в альфа-версии, поэтому они еще не готовы к производству. Это также означает, что API может измениться.

Answer 4

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

На самом базовом уровне используется следующим образом:

const [isLoading, setLoading] = useState(true);

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

Answer 5

Ловушки React - это новый (все еще разрабатываемый) способ доступа к основным функциям реакции, таким как state, без использования классов, в вашем примере, если вы хотите увеличить счетчик непосредственно в функция-обработчик без указания ее непосредственно в onClick prop, вы можете сделать что-то вроде:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

и onClick:

<button onClick={setCount}>
    Click me
</button>

Давайте быстро объясним, что происходит в этой строке:

const [count, setCounter] = useState(0);

useState(0) возвращает кортеж, где первый параметр count - это текущее состояние счетчика, а setCounter - метод, который позволит нам обновить состояние счетчика. Мы можем использовать метод setCounter для обновления состояния count где угодно - в этом случае мы используем его внутри функции setCount, где мы можем делать больше вещей; Идея использования хуков заключается в том, что мы можем сделать наш код более функциональным и избегать компонентов, основанных на классах , если они не нужны / не нужны.

Я написал полную статью о хуках с несколькими примерами (включая счетчики), такими как этот код , я использовал useState, useEffect, useContext, и нестандартные крючки . Я мог бы получить более подробную информацию о том, как перехватчики работают с этим ответом, но документация очень хорошо объясняет подробное описание перехвата состояния и других перехватчиков, надеюсь, это поможет.

обновление: Крючки больше не являются предложением , так как версия 16,8 теперь они доступны для использования, на сайте React есть раздел, который отвечает на некоторые вопросы FAQ .

Answer 6

Синтаксис хука useState прост.

const [value, setValue] = useState(defaultValue)

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

Я бы порекомендовал вам прочитать документацию . Отличное расширение с приличным количеством примеров.

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
  
  // its up to you how you do it
  const buttonClickHandler = e => {
   // increment
   // setCount(count + 1)
   
   // decrement
   // setCount(count -1)
   
   // anything
   // setCount(0)
  }
  

  return (
       <div>
          <p>You clicked {count} times</p>
         <button onClick={buttonClickHandler}>
             Click me
         </button>
      </div>
   );
 }

Answer 7

Крючки - это новая функция, в React v16.7.0-alpha useState это «Крюк». useState() установить значение по умолчанию для любой переменной и управлять компонентом функции (функции PureComponent). ex : const [count, setCount] = useState(0); установите значение по умолчанию для счетчика 0. И вы можете использовать setCount в incriment или decriment значение. onClick={() => setCount(count + 1)} увеличивает значение счетчика. DOC