Как я могу предварительно инициализировать состояние с помощью хуков в React?

Question

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

     constructor(props){
          super(props);
          this.state = {
                 count: 0
          }
     }

Но после введения хуков все компоненты класса стали функциональными компонентами с состоянием.

Но мой вопрос заключается в том, как я могу предварительно инициализировать состояние счетчика до 0 с помощью ловушек в React v16.7.0

Answer 1

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

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

https://reactjs.org/docs/hooks-reference.html#usestate

Answer 2

Вот пример того, как состояние инициализируется в классах по сравнению с функциями с хуками:

По сути, первый аргумент useState() является начальным состоянием.

class CounterClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  render() {
    return <div>
      <strong>Class: </strong>
      <span>Count: {this.state.count}</span>&nbsp;
      <button onClick={() => this.setState({ 
        count: this.state.count + 1
      })}>Increase</button>
    </div>;
  }
}

function CounterFunction() {
  const [count, setCount] = React.useState(0); // Initial state here.
  return (
    <div>
      <strong>Function: </strong>
      <span>Count: {count}</span>&nbsp;
      <button onClick={() => 
        setCount(count + 1)}
      >Increase</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <CounterClass />
    <hr/>
    <CounterFunction />
  </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>

Answer 3

Вот документация: https://reactjs.org/docs/hooks-state.html

Пример в документации показывает:

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

Параметр, переданный в useState (например, в данном случае «0»), является начальным значением.