React,Hooks中useState使用

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如果要改数据的话，它不是让你在原数据上进行修改，更多时候是将这个数据进行拷贝，然后在拷贝的这个数据上进行操作，之后在把这个数据再赋给原数据,这样进行数据的刷新，是覆盖而不是直接修改