React State

第一章 React Hooks学习之State学习

---

---

前言

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

---

一、State是什么？

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

二、使用方法

1.引入方法

在函数组件中，我们需要通过钩子函数，获取state使用钩子 useState() 来创建state

import {useState} from “react”

代码如下（示例）：

import {useState} from "react";

2.在组件中使用

代码如下（示例）：

import {useState} from "react";
const [num , setNum] = useState(1)
const clickHandler = () => {
	setNum( num + 1 )
}
const StateTemple = () => {
	return <div>
		<h1>{{num}}</h1>
		<button onClick = "clickHandler">add</button>
	</div>
}

它需要一个值作为参数，这个值就是state的初始值
该函数会返回一个数组
数组中第一个元素，是初始值

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

---

注意

• 当state的值是一个对象时，修改时是使用新的对象去替换已有对象
• 当通过setState去修改一个state时，并不表示修改当前的state
  它修改的是组件下一次渲染时state值
• setState()会触发组件的重新渲染，它是异步的
  所以当调用setState()需要用旧state的值时，一定要注意
  有可能出现计算错误的情况。
  为了避免这种情况，可以通过为setState()传递回调函数的形式来修改state值
  解决代码如下（示例）：

import {useState} from "react";
const [num , setNum] = useState(1)
const clickHandler = () => {
	setTimeout(() => {
		setNum( (prevNum) = > {
			return prevNum + 1
		} )
	},1000)
}
const StateTemple = () => {
	return <div>
		<h1>{{num}}</h1>
		<button onClick = "clickHandler">add</button>
	</div>
}

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