web-dev-qa-db-fra.com

Comment pré-initialiser l'état avec des hooks dans React?

Fondamentalement, dans les composants de classe, nous pré-initialisons l'état dans le constructeur avec des valeurs initiales comme ci-dessous.

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

Mais après l'introduction des hooks, tous les composants de la classe sont devenus des composants fonctionnels avec état.

Mais ma question est de savoir comment puis-je pré-initialiser l'état de comptage à 0 avec des crochets dans React v16.7.0

javascriptreactjsreact-nativereact-hooks
7
Hemadri Dasari

Voici la documentation: https://reactjs.org/docs/hooks-state.html

L'exemple de la documentation montre:

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

Le paramètre passé à useState (par exemple "0" dans ce cas) est la valeur initiale.

2
Ryan Cogswell

Selon la documentation React, vous pouvez transmettre vos valeurs initiales aux hooks useState.

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

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

1
Omid Nikrah

Voici un exemple de la façon dont l'état est initialisé dans les classes vs les fonctions avec des hooks:

Fondamentalement, le premier argument de useState() est l'état initial.

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/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>
1
Yangshun Tay