День 8: Стрелочные функции и setState в React

мы узнаем, как использовать стрелочные функции в React и как использовать состояния

мы изучали состояние React на предыдущем уроке. В этом уроке мы увидим, как использовать setState для React. Однако, прежде чем мы начнем, я хотел бы пересмотреть стрелочные функции в JS, так как мы будем их широко использовать.

Стрелочные функции

Пример:1

функция с аргументом

addToX = function (x) {
   return x + 100;
}

в стрелочной функции

addToX =(x) => x + 100 

в этой стрелочной функции x является аргументом, и нам не нужно писать ключевое слово function и return.

Пример 2:

функция без аргументов

let x = 10
let y = 5
sumOfTwo = function(){
   return x + y ;
}

в стрелочной функции

let x = 10
let y = 5
sumOfTwo = ()=> x + y;

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

Пример 3:

function addTen(a) {
   return a + 10 ;
}

в стрелочной функции

let addTen = a => a + 10 ;

Синтаксис функции стрелки

Пример 4: один параметр

param => expression

Пример 5: несколько параметров

(param1, param2) => expression

Пример 6: несколько операторов

(param1, param2) => {
  let k = 1;
  return k + param1;
}

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

setState

мы добавим в наш проект новый файл student.js и добавим следующий код.

student.js

import React , {Component} from 'react' ;
class Student extends React.Component {
 constructor(props) {       line//1
 super(props);             //line 2
   this.state = {     //line 3
   name : 'John',     //line 4
   roll : this.props.roll   //line 5
};
}
handleClick = () =>{    //line 6
console.log('clicked', this)   //line 7
};
render() {
return (
<div>
  <h1>   //line 8
  Hey, {this.state.name}, your roll number is {this.state.roll}
  </h1>
  <button  onClick = {this.handleClick}>   //line 9
  click here
  </button>
</div>
)}}
export default Student

строка 1: реквизиты без строки, состояния обычно помещаются внутри конструктора, и он может принимать реквизиты в качестве аргумента.

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

строки 3,4,5: «это» — это ключевое слово, которое мы используем внутри класса. С помощью this мы удостоверяемся, что переменная, которую мы присваиваем или возвращаем, принадлежит к тому же классу. Объект this.state будет иметь два свойства: имя и список.

строка 6,7: это функция события клика, как только мы нажмем на эту кнопку, эта функция будет выполнена.

строка 8,9: это напечатает имя и номер учащегося.

App.js

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

тег ‹Студент /› принимает значение roll=1 в качестве реквизита. Отдых такой же, как и раньше.

Вывод:

мы видели, как стрелочные функции работают в JS и как работает состояние в React. Однако нам еще предстоит увидеть, что setState делает в React, о чем мы поговорим завтра.

Фото AltumCode на Unsplash