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

Question

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

В настоящее время я изучаю концепцию хуков в 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>

230

javascript reactjs react-native react-hooks react-state

Источник

user6903497 06 ноя '18 в 04:56

14 ответов

Решение

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 смотрите официальную документацию.

78

Источник

user3910434 02 дек '18 в 21:02

Синтаксис 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>
   );
 }

25

Источник

user6947248 06 ноя '18 в 05:20

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>

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

С уважением

12

Источник

user652528 06 авг '19 в 03:25

useState является одним из хуков, доступных в React v16.7.0-alpha. Это в основном позволяет вам превратить ваши в противном случае не сохраняющие состояния / функциональные компоненты в тот, который может иметь свое включенное состояние.

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

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

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

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

9

Источник

user7905437 06 ноя '18 в 05:44

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

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

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

8

Источник

user10007471 06 ноя '18 в 06:33

Спасибо loelsonk, я так и сделал

const [dataAction, setDataAction] = useState({name: '', description: ''});

    const _handleChangeName = (data) => {
        if(data.name)
            setDataAction( prevState  => ({ ...prevState,   name : data.name }));
        if(data.description)
            setDataAction( prevState  => ({ ...prevState,   description : data.description }));
    };
    
    ....return (
    
          <input onChange={(event) => _handleChangeName({name: event.target.value})}/>
          <input onChange={(event) => _handleChangeName({description: event.target.value})}/>
    )

6

Источник

user7689772 17 дек '19 в 13:43

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

5

Источник

user7833077 06 ноя '18 в 05:09

React useState - это React Hook, который позволяет вам управлять состоянием в функциональных компонентах.

Например:

      import React, { useState } from 'react'

const Example = () => {
  // create the "counter" state
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Button clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Count + 1
      </button>
    </div>
  )
}

export default Example

С помощью useState вы можете легко создавать функциональные компоненты с отслеживанием состояния. Старый эквивалентный способ, использующий компоненты класса с Component класс и setState является:

      import React, { Component } from 'react'

class Example extends Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

  render() {
    const { count } = this.state
    return (
      <div>
        <p>Button clicked {count} times</p>
        <button onClick={() => this.setState({ count: count + 1 })}>
          Count + 1
        </button>
      </div>
    )
  }
}

export default Example

Источник:

React useState Hook: что нового и как его использовать

Ссылки:

Документация по React Hooks

3

Источник

user8551915 02 апр '21 в 19:54

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

import React, {useState} from react    

function HookCounter {    
  const [count, stateCount]= useState(0)    
    return(    
      <div>     
        <button onClick{( ) => setCount(count+1)}> count{count}</button>    
      </div>    
    )   
 }

useState принимает начальное значение переменной состояния, которое в данном случае равно нулю, и возвращает пару значений. Текущее значение состояния было вызвано count, а метод, который может обновлять переменную состояния, был вызван как setCount.

3

Источник

user10238847 16 май '20 в 21:35

В принципе React.useState(0) волшебным образом видит, что он должен вернуть кортеж count и setCount (способ изменить count). Параметр useState принимает устанавливает начальное значение count.

  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(0);

  // increments count by 1 when first button clicked
  function handleClick(){
    setCount(count + 1);
  } 

  // increments count2 by 1 when second button clicked
  function handleClick2(){
    setCount2(count2 + 1);
  } 

  return (
    <div>
      <h2>A React counter made with the useState Hook!</h2>
      <p>You clicked {count} times</p>
      <p>You clicked {count2} times</p>
      <button onClick={handleClick}>
        Click me
      </button> 
      <button onClick={handleClick2}>
        Click me2
      </button>
  );

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

2

Источник

user1308453 20 сен '20 в 09:36

Давайте разберемся в useState очень легко и просто

предположим, у нас есть код реакции:-

index.js

      import React from 'react';
import ReactDOM from 'react-dom';
import Test from './components/Test.jsx'
ReactDOM.render(
  <div>
      <Test />
  </div>
,
  document.getElementById('root')
);

Test.jsx

      import React from "react";

function Test() {
  var x = 5;
  function update() {
    console.log(x);
    return x++;
  }
  return (
    <div>
      <h1>{x}</h1>
      <button onClick={update}>click</button>
    </div>
  );
}
export default Test;

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

посмотреть результат и проверить консоль, нажав на эту ссылку

здесь usState волшебным образом работает,

Test.jsx с использованием useState

      import React, { useState } from "react";

function Test() {
  var x = 5;
  const [value, setValue] = useState(x);

  function update() {
    setValue(value + 1);
  }

  return (
    <div>
      <h1>{value}</h1>
      <button onClick={update}>click</button>
    </div>
  );
}
export default Test;

посмотреть результат, нажав на эту ссылку

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

2

Источник

user14191609 21 июл '21 в 14:09

useState - это ловушка, которая позволяет вам иметь переменные состояния в функциональных компонентах.

В React есть два типа компонентов: класс и функциональные компоненты.

Компоненты класса - это классы ES6, которые происходят от React.Component и могут иметь методы состояния и жизненного цикла:

      class Message extends React.Component {
constructor(props) {
super(props);
this.state = {
  message: ‘’    
 };
}

componentDidMount() {
/* ... */
 }

render() {
return <div>{this.state.message}</div>;
  }
}

Функциональные компоненты - это функции, которые просто принимают аргументы как свойства компонента и возвращают действительный JSX:

      function Message(props) {
  return <div>{props.message}</div>
 }
// Or as an arrow function
const Message = (props) =>  <div>{props.message}</div>

Как видите, нет методов состояния или жизненного цикла.

1

Источник

user2983185 08 дек '20 в 13:16

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

import { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      // passing a callback to useState to update count
      <button onClick={() => setCount(count => count + 1)}>
        Click me
      </button>
    </div>
  );
}

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

1

Источник

user11852389 28 сен '20 в 17:55

Другие вопросы по тегам javascript reactjs react-native react-hooks react-state

user5711480 06 ноя '18 в 05:26 2018-11-06 05:26 · Accepted Answer · 2018-11-06 05:26

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

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

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

и onClick:

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

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