Что используется 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>

ОТВЕТЫ

Ответ 1

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

...
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 есть раздел, отвечающий на некоторые часто задаваемые вопросы.

Ответ 2

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

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

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

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

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

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

Обратите внимание, что useState вызов 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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

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

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 6

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

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

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

Ответ 7

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>

Ответ 8

МИГ 21 Кесе дия. Я не должен говорить вам, майор

Из тюрьмы Адияла, Индия