Всем привет! В этом посте (две части) я конвертирую код reactjs из компонента класса в функциональный компонент. Сосредоточение на крючках useState и useEffect. начнем с части 1 useState крючка.

Состояние

В компоненте класса

В компоненте класса мы инициализируем объект state класса this в функции constructor, чтобы сказать, что это состояние принадлежит этому компоненту, а его значение инициализируется в constuctor. Мы можем изменить состояние, вызвав setState(), передав новый объект. Код для этого будет примерно таким

import React, { Component } from "react";
import ReactDOM from "react-dom";
export default class App extends Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
  }
  render() {
    return (
      <div className="App">
        <h1>Current count: {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

<button
  onClick={() =>
    this.setState({ count: this.state.count + 1 }, () => {
      console.log(this.state.count);
     })
  }
>

В функциональном компоненте

В функциональном компоненте нет constructor(), нет this ключевого слова, нет render()function. Сначала нам нужно импортировать useState из react. import React, { useState } from "react"; useState принимает только один аргумент, который является начальным значением, и возвращает значение с состоянием и функцию для его изменения, мы деструктурировали его следующим образом: const [state, setState] = useState(initialValue); Чтобы использовать его, мы просто можем использовать его как пример класса.

const [state, setState] = useState({
  count: 0
});
console.log(state.count); // 0

и обновите его вот так

setState({ count: state.count + 1 });

Но что, если у нас более одного значения?

Здесь у нас есть два варианта:

  • во-первых, просто используйте его, как указано выше.
const [state, setState] = useState({
  count: 0,
  barcode: "1A"
});

НО, когда вы его меняете, не забудьте передать текущее состояние и просто измените то, что хотите, например:

setState({
  ...state,
  barcode: "2B"
});

если вы напишете это setState({barcode: "2B"});, вы просто измените состояние и удалите count ключ.

  • Во-вторых, вы можете использовать useState несколько раз в одном компоненте, один для count и один для barcode следующим образом:
const [count, setCount] = useState(0);
const [barcode, setBarcode] = useState("1A");

и чтобы обновить его, просто передайте значение:

setBarcode(value);
setCount(count + 1);

К сожалению, useState не принимает второй аргумент, поэтому мы должны использовать useEffecthook для обработки изменений в компоненте. Перед тем как уйти, проверьте два кода и поля, чтобы попробовать то, что вы узнали из этой статьи.

В части 2 - мы расширим наш код, включив в него ловушку useEffect.

Изначально опубликовано в блоге и подписывайтесь на меня в твиттере