Изучение хука useState, повторный рендеринг приложения

Хук React useState полезен для хранения текущих state переменных в функции или компоненте.

Крюки позволяют использовать больше функций React без классов. (из документации по реакции)

Изучим этот код, хорошо?

import { useState } from "react";
const App = () => {
const [number, setNumber]= useState(4);
  return <div>
   
   {number}
  </div>;
};
export default App;

У нас есть только один аргумент для useState . Кроме того, useState вернет два значения: первое — это текущее состояние, а второе — функция, используемая для обновления значения состояния. Таким образом, мы можем использовать эту функцию для обновления значения состояния.

import { useState } from "react";
const App = () => {
const [number, setNumber]= useState(4);
  return <div>
   
  <button onClick={()=>setNumber(number+1)}>
{number}
    </button>
  </div>;
};
export default App

Если вы нажмете на кнопку, то увидите, что число увеличивается. Итак, ясно, что setNumber используется для обновления состояния числа.

Можем ли мы использовать несколько состояний?

Да, мы можем использовать несколько состояний для хранения нескольких значений внутри компонентов. Мы уже сделали приложение-101 .

Мы узнаем больше о сложном состоянии после изучения форм.

Теперь мы изменим это приложение и создадим приложение 212.

Итак, повестка дня этого приложения.

1- Мы можем разделить число на 2

2- Мы можем умножить на 2

3- И мы можем установить число на 2

Теперь удалите содержимое App.js и замените его этим.

import React from "react";
import { useState } from 'react'
const App = () => {
  const [ counter, setCounter ] = useState(1)
  return (
      <>
    <div>{counter}</div>
    
    <button>Multiply By 2</button>
     <button>Divide By 2</button>
      <button>Set 1</button>
    </>
)
}
export default App

Теперь вы правильно догадались, мы должны сделать три обработчика событий.

1- ручкаMultiplyTwo

2- дескрипторDivideTwo

3- ручка SetOne

Итак, представьте эти функции в уме, если вы читаете. И напишите эти обработчики событий, если вы учитесь.😊

import React from 'react';
import { useState } from 'react';
const App = () => {
  const [counter, setCounter] = useState(1);
const handleMultiplyTwo = () => {
    setCounter(counter * 2);
  };
  const handleDivideTwo = () => {
    setCounter(counter / 2);
  };
  const handleSetOne = () => {
    setCounter(1);
  };
  return (
    <>
      <div>{counter}</div>
<button onClick={() => handleMultiplyTwo()}>Multiply By 2</button>
<button onClick={() => handleDivideTwo()}>Divide By 2</button>
      <button onClick={() => handleSetOne()}>Set 1</button>
    </>
  );
};
export default App;

Вы можете использовать CSS, чтобы выглядеть более привлекательно. Но теперь мы должны больше сосредоточиться на функциональности.

Теперь давайте разделим это приложение на несколько компонентов. Так

1- Заголовок — (Счетчик)

2- Кнопка — кнопка

Хорошо, мы можем изменить вот так, загляните в код.

import React from 'react';
import { useState } from 'react';
import './style.css';
const Header = (props) => {
  return <h2>{props.counter}</h2>;
};
const Button = (props) => {
  return <button onClick={props.onClick}>{props.text}</button>;
};
const App = () => {
  const [counter, setCounter] = useState(1);
const handleMultiplyTwo = () => setCounter(counter * 2);
const handleDivideTwo = () => setCounter(counter / 2);
  const handleSetOne = () => setCounter(1);
return (
    <>
      <Header counter={counter} />
      <Button onClick={handleMultiplyTwo} text="Multiply By 2" />
      <Button onClick={handleDivideTwo} text="Divide By 2" />
      <Button onClick={handleSetOne} text="Set 1" />
    </>
  );
};
export default App;

Давайте начнем анализ того, как меняется значение нашего счетчика. При нажатии любой из кнопок вызывается setCounter . И это изменит состояние counter. Теперь, если мы изменим значение состояния, это вызовет повторную визуализацию компонентов Header и Button.

Итак, вывод: если мы вызываем функцию и она меняет состояние, это вызовет повторную визуализацию компонентов.

import React from 'react';
import { useState } from 'react';
import './style.css';
const Header = (props) => {
  console.log("Runheader")
  return <h2>{props.counter}</h2>;
};
const Button = (props) => {
  
  console.log("Runbutton")
  return <button onClick={props.onClick}>{props.text}</button>;
};
const App = () => {
  const [counter, setCounter] = useState(1);
  
  console.log("Run", counter)
const handleMultiplyTwo = () => setCounter(counter * 2);
const handleDivideTwo = () => setCounter(counter / 2);
  const handleSetOne = () => setCounter(1);
return (
    <>
      <Header counter={counter} />
      <Button onClick={handleMultiplyTwo} text="Multiply By 2" />
      <Button onClick={handleDivideTwo} text="Divide By 2" />
      <Button onClick={handleSetOne} text="Set 1" />
    </>
  );
};
export default App;

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

О предохранениях от повторного рендеринга мы поговорим в следующих чтениях.