Всем привет! В этом посте (две части) я конвертирую код 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
не принимает второй аргумент, поэтому мы должны использовать useEffect
hook для обработки изменений в компоненте. Перед тем как уйти, проверьте два кода и поля, чтобы попробовать то, что вы узнали из этой статьи.
В части 2 - мы расширим наш код, включив в него ловушку useEffect
.
Изначально опубликовано в блоге и подписывайтесь на меня в твиттере