react文档学习在react中提供函数 useState 3.state数据为复杂类型，如何修改卧槽，刚接到通知，要

在react中提供函数

// 函数后面不加()是正确的，代表button这个dom触发click事件的时候才会调用相关的函数
// 加了（），初始化就去渲染这个函数了
function Fn() {
    <button onClick={handleClick} />
}

useState

// useState(0)这个0是初始值
// index每次拿到的都是上一次的值
// setIndex用来告诉state修改index的值setIndex（index + 1)
// 一个useState只能结构出来两个值，多个变量需要多个useState
// 每个模块中的state都是独立的
import { useState } from 'react';

const [index, setIndex] = useState(0);

setIndex(index + 1)
setIndex(index + 1)
setIndex(index + 1)
console.log(index) // 1
// 替换state的值，每次index都是0,不管触发多少次最终的值都是初始值+1

setIndex(n => n + 1); // index此时是1
setIndex(n => n + 1); // index此时是2
setIndex(n => n + 1);// index此时是3
console.log(index) // 3
// n => n + 1是更新state的函数。每调用一次n => n + 1 react就会加入队列，调用useState的时候，遍历队列，拿到上一个队列的值往下传递

// 案例
<button onClick={() => {  
setNumber(number + 5);   // 替换 number = 5
setNumber(n => n + 1);  // 更新 number = 6
setNumber(42);   // 替换 number = 42
}}>

3.state数据为复杂类型，如何修改

React中的state中的数组是只读的，每次要更新时，需要把一个的新的对象or数组传入。 useState操作起来每次都需要传递，有点麻烦，官方提供了Immer插件来搞定这些问题。使用useState的地方换成useImmer，import { useImmer } from 'use-immer'。

// 使用useState
import { useState } from 'react';
const [person, setPerson] = useState({  
    name: 'Niki de Saint Phalle',  
    artwork: {  
        title: 'Blue Nana',  
        city: {
            town: 'shanghai',
            mark: '1111
            },  
        image: 'https://i.imgur.com/Sd1AgUOm.jpg',  
       }  
    });
 // 只需要修改person对象其中的一个值，用展开运算符即可
setPerson({...person})
setPerson({...person,city: {...person.city,town: 'hangzhou'}})

// 使用Immer，可以直接修改原来的person对象
import { useImmer } from 'use-immer'

setPerson（draft => {
      draft.name = e.target.value;
    }）

卧槽，刚接到通知，要离场，我他妈，再见，下次在学习