Урок о состояниях реакции и о том, как изменить состояние программы

Прежде чем мы начнем состояния, нам нужно знать, что такое компоненты класса в React. Так как в функциональных компонентах используются функции для создания наших компонентов, в компонентах классов мы будем использовать классы.

Пример 1:

class Helo extends Component {
   render () {
      return <p>its a component</p>
}
}

это классы ES6. Чтобы преобразовать функциональный компонент в основанный на классах, вам необходимо внести эти изменения.

строка 1: сначала поместите класс ключевого слова перед именем вашего компонента, а затем он расширит класс компонента в реакции.

строка 2: поместите метод рендеринга.

строка 3: return напечатает тег HTML, в нашем случае это «это компонент»

теперь давайте посмотрим, что такое состояние и как его использовать внутри реакции.

состояния

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

Как и в предыдущем примере с приветствием, мы можем написать наш код и изменить состояние нашей программы.

welcome.js

import React, {Component} from 'react';
class Welcome extends Component { //line 1
constructor() {
 super()
  this.state = {      //line 2
  message: 'welcome to React ' //line 3
}}
differentText(){    //line 4
this.setState({
message:'thank you for clicking!!'
})
}
render() {
  return (
    <div>
       <p> {this.state.message}</p>      //line 5
       <button onClick={()=>this.differentText()} > //line 6
        Click Me</button>
   </div>
)
}}
export default Welcome

строка 1: мы создаем компонент класса.

строка 2: внутри конструктора мы используем метод super для изменения состояния нашего компонента (поскольку мы расширяем класс Component, нам нужно использовать метод super).

строка 3: сообщение сохраняет значение.

строка 4: определен метод DifferentText. Позже мы вызовем этот метод и напечатаем новое значение сообщения после нажатия кнопки.

строка 5: this.state.message напечатает значение, которое мы изначально сохранили в строке 3.

строка 6: мы помещаем прослушиватель событий в нашу кнопку, и он будет вызывать метод DifferentText.

App.js

import './App.css';
import React from 'react';
import Welcome from './components/welcome';
function App() {
return (
<div className="App">
<Welcome />
</div>
);
}
export default App;

Это все для этого урока. Не стесняйтесь комментировать, если что-то не ясно.

Фото автора Джеймс Харрисон на Unsplash