Hooks可以说是非常香了,对于react开发来说
其中最基本的就是useState的使用了
先导入
import React,{useState} from 'react'
介绍下useState
useState
本身是一个函数,来自react包,参数和返回值,返回一个数组
参数:作用是给创建出来的状态一个默认值
返回值:数组
元素1:当前state的值
元素2:设置新的值时,使用的一个函数
例:
实现点击按钮加减
export default function CounterHook() {
const [count,setState] = useState(0)
return (
<div>
<h2>当前计数:{count}</h2>
<button onClick={e=>setState(count+1)}>+1</button>
<button onClick={e=>setState(count-1)}>-1</button>
</div>
)
}
是不是特别方便,那么当有很多不同的数据咋办呢?很简单,多定义几个就行了啊
const [count, setCount] = useState(0)
const [age, setAge] = useState(18)
再举个例子,我们展示一个数组,想往它里面push数据,那么怎么做呢?
export default function MultiHookState() {
const [friends, setFriends] = useState(['kobe','lilei'])
return (
<div>
<ul>
{
friends.map((item)=>{
return <li>{item}</li>
})
}
<button onClick={e=>setFriends([...friends,"tom"])}>添加数据</button>
</ul>
</div>
)
}
肯定有些人会这样添加数据
export default function MultiHookState() {
const [friends, setFriends] = useState(['kobe','lilei'])
function addFriend(){
friends.push('lsh')
setFriends(friends)
}
return (
<div>
<ul>
{
friends.map((item)=>{
return <li>{item}</li>
})
}
<button onClick={addFriend}>添加数据</button>
</ul>
</div>
)
}
这样行不行呢,只能说行,但是也不行,啥意思呢,这样写的话它内部确实push进了数据,但是页面却没有变化,为什么呢??
react内部在决定当前组件是否重新渲染的时候,做了一个判断,判断这次设置的state的值和原来的是否相等,如果相等就不会返回新的JSX,但是其实内部已经push进去了,但是界面没有重新渲染
所以还是按照我第一种方法来写吧
因为react如果要改数据的话,它不是让你在原数据上进行修改,更多时候是将这个数据进行拷贝,然后在拷贝的这个数据上进行操作,之后在把这个数据再赋给原数据,这样进行数据的刷新,是覆盖而不是直接修改