useState是 react 提供的一个定义响应式变量的 hook 函数,基本语法如下:
const [count, setCount] = useState(initialCount)
const [count, setCount] = useState(() => { const initialCount = someExpensiveComputation(); return initialCount })
接下来把定义好的状态运用到页面:
import { useState } from 'react' function App() { const [count, setCount] = useState(0) const handleClick = () => { setCount(count + 1) // 传入一个函数,更新的值是基于之前的值来执行 // setCount(count => count + 1) } return ( <div> <h4>count: {count}</h4> <button onClick={ handleClick }>点击更新状态</button> </div> ) }
页面渲染完成后,我们可以看到 count的值是 0,当我们点击按钮时,会将 count的值加 1,页面也同时更新;
了解完基础用法后,我们可以思考几个问题;
setCount
修改值时它是同步还是异步?setCount
会发生什么?const handleClick = () => { console.log("value1: ", count) setCount(count => count + 1) console.log("value2: ", count) }
从图中我们可以看出,页面的值是更新了,但是控制台打印的是之前的值,这是不是也表示 setCount
是异步的呢?我们换一种方法,用异步来修改状态;
const handleClick = () => { console.log("value1: ", count) setTimeout(() => { setCount(count => count + 1) console.log("value2: ", count) }, 0) }
显然,异步修改状态跟同步修改状态的结果是一致的,这也表明了 setCount
是异步更新的;那我们要怎么拿到更新后的值呢,我们可以用另外一个 hook 函数 useRef
,代码如下:
function App() { const [count, setCount] = useState(0) const countRef = useRef(count) countRef.current = count const handleClick = () => { setCount(count => count + 1) console.log("value3: ", count) setTimeout(() => { console.log(countRef.current) }, 0) } return ( <div> <h4>count: {count}</h4> <button onClick={handleClick}>点击更新状态</button> </div> ) }
从图中我们可以看出,我们已经拿到了更新之后的值,useRef
不仅可以用于访问 DOM 节点,也可以用来表示一个容器,current
属性可以保存任何值,而且useRef
返回的对象会在整个生命周期内保持;
(1)传入一个基于状态的值
const handleClick = () => { console.log("value1: ", count) setCount(count + 1) console.log("value2: ", count) setCount(count + 1) console.log("value3: ", count) }
从图片可以看出,如果我们传入的是一个普通值,他只会进行最后一次更新;
(2)传入一个函数
const handleClick = () => { console.log("value1: ", count) setCount(count => count + 1) console.log("value2: ", count) setCount(count => count + 1) console.log("value3: ", count) }
可以看出,传入一个函数的话,它会进行两次赋值,因为它更新的值是基于之前的值来执行,所以在开发中推荐使用函数传入的形式进行修改;
对于复杂类型的变量我们修改时需要重新定义,在原来数据的基础上修改不会引起组件的重新渲染,因为 React 组件的更新机制只进行浅对比,也就是更新某个复杂类型数据时只要它的引用地址没变,就不会重新渲染组件;举个例子
function App() { const [arr, setArr] = useState([1]) const pushData = () => { arr.push(4) setArr(arr) } return ( <div> <h4>{arr.join("-")}</h4> <button onClick={pushData}>点击添加数组</button> </div> ) }
上面的代码在点击按钮时,视图不会发生变化,但是 arr
的值是变化了,如果想修改这个数组,需要重新定义一个数组来修改,在原数组上的修改不会引起组件的重新渲染,React 组件的更新机制对只进行浅对比,也就是更新某个复杂类型数据时只要它的引用地址没变,就不会重新渲染组件;
const pushData = () => { setArr([...arr, 4]) }
在类组件里面,修改值时异步操作可以拿到更新后的值,但是在函数组件,异步获取是拿不到更新后的值的,举个例子对比一下:
类组件
class App extends React.Component { constructor() { super() this.state = { count: 0 } } handleClick = () => { this.setState({ count: this.state.count + 1 }) console.log(this.state.count) setTimeout(() => { console.log(this.state.count) }) } render() { return ( <> <h4>count: {this.state.count}</h4> <button onClick={this.handleClick}>点击更新状态</button> </> ); } }
函数组件
function App() { const [count, setCount] = useState(0) const handleClick = () => { setCount(count => count + 1) console.log("value1: ", count) setTimeout(() => { console.log("value2: ", count) }) } return ( <div> <h4>count: {count}</h4> <button onClick={handleClick}>点击更新状态</button> </div> ) }
显然,在函数组件中是不能通过异步来获取更新的值,我们可以通过 useRef
来获取;
const countRef = useRef(count) countRef.current = count const handleClick = () => { setCount(count => count + 1) console.log("value1: ", countRef.current) setTimeout(() => { console.log("value2: ", countRef.current) }) }