react响应式数据useState()

react使用useState()创建响应式数据，useState()返回一个数组，第一个元素是响应式数据，第二个元素是修改响应式数据的方法

const [count, setCount] = useState(0)

修改响应式数据

给修改响应式数据的方法传入一个新值即可

简单类型

const [count, setCount] = useState(0)

const countNum = () => {
    setCount(count + 1) 
}

复杂类型

// 对象类型：给修改响应式数据的方法传入旧的对象属性，再修改需要改变的属性；简而言之覆盖旧的属性值
const [people, setPople] = useState({ name: '张三' })
  
const changName = () => {
    setPople({
      ...people,
      name: '李四'
    })
}
console.log(people.name) // 李四

// 数组类型：先修改旧数组的元素，再将它传入修改响应式数据的方法中
const [arr, setArr] = useState(['苹果', '梨子', '香蕉'])
  
const changArr = () => {
    arr[2] = '菠萝'
    setArr([
      ...arr
    ])
}
console.log(arr) // 苹果梨子菠萝