React-18函数式组件---useState()钩子函数

钩子函数useState()

为什么需要使用useState()

在React中，当组件渲染完毕后，再修改组件中的变量，不会使组件重新渲染要使得组件可以收到变量的影响，必须在变量修改后对组件进行重新渲染，这里我们就需要一个特殊变量，当这个变量被修改使，组件会自动重新渲染，所以我们可以使用useState()

state相当于一个变量
只是这个变量在React中进行了注册，React会监控这个变量的变化，当state发生变化时，会自动触发组件的重新渲染，使得我们的修改可以在页面中呈现出来

所以在函数式组件中，我们需要通过钩子函数，获取state

使用钩子函数来创建state，我们需要从react中导入

import {useState} from "react";

主要参数

它需要一个值作为参数，这个值就是state的初始值

• 该函数会返回一个数组
  数组中第一个元素，是初始值， 初始值只用来显示数据，直接修改不会触发组件的重新渲染
• 数组中的第二个元素，是一个函数，通常会命名为setXxx
  这个函数用来修改state，调用其修改state后会触发组件的重新渲染， 并且使用函数中的值作为新的state值
  直接定义在函数组件中，useState()中传入state的初始值，

 const [counter, setCounter] = useState(1);

注意

state 实际就是一个被react管理的变量
当我们通过setState()修改变量的值的时候 会触发组件的自动渲染
只有state值发生变化时 组件才会重新渲染
当state的值是一个对象时 修改时是使用一个新的对象去替换旧的对象
当通过SetState去修改一个state 并不表示修改当前的state
它修改的是组件下一次渲染时的State值
setSate()会触发组件的重新渲染 是异步的
所以当我们调用setState()需要用到旧state的值时 一定要注意 有可能出现计算错误的情况
为了避免这种情况 可以通过为setState()传递回调函数的形式来修改state

setState() 中回调函数的返回值将会成为新state
回调函数执行时 React会将最新的state值作为参数传递

setState的执行流程

当我们直接在函数体中调用setState时 会触发 Too many re-renders报错
这是因为
setState() 的执行流程（函数组件）
当执行useState中的setCount改变值 -> dispatchSetDate() -> 会先判断 组件当前处于什么阶段
如果时渲染阶段 -> 不会检查state值是否相同
如果不是渲染阶段 -> 会检查state值是否相同
如果值不相同 则对组件进行重新渲染
如果值相同 则不对组件进行重新渲染
如果值相同 React在一些情况下会继续执行当前组件的渲染
但是这个渲染不会触发其子组件的渲染 这次渲染不会产生实际的效果
这种情况通常发生在值第一次相同时

使用方法演示

这里使用数字的增减来做演示

 import './App.css';
import {useState} from "react";

const App = () => {
  console.log('函数执行了 ---> 组件创建完毕！');
  const [counter, setCounter] = useState(1);
  
  const addHandler = () => {
    // 点击后数字+1
    setCounter((prevState) => prevState + 1); // 将counter值修改为2
  };

  const lessHandler = () => {
    // 点击后数字-1
    setCounter((prevState) => prevState - 1);
  };

  return <div className={'app'}>
    <h1>{counter}</h1>
    <button onClick={lessHandler}>-</button>
    <button onClick={addHandler}>+</button>
  </div>;
};

// 导出App
export default App;