Что такое 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>
45
задан ravibagul91 15 September 2019 в 02:51
поделиться

1 ответ

useState() Реагировать рычаг. Рычаги делают возможными использовать состояние и переменчивость в функциональных компонентах.

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

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

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>

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

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>

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

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

2
ответ дан 7 November 2019 в 15:04
поделиться
Другие вопросы по тегам:

Похожие вопросы: