在 React 中 - 操作 state 的一些注意事项

 1.函数组件

        当我们想要修改 state 数据的时候，直接修改是不能引起页面重新渲染的，必须要使用 useState 进行状态管理，但是用该钩子函数的时候需要注意几点。

（这里直接使用简单代码演示，没有补全函数组件）

//如果说是这种基本数据类型
const [name,setName] = useState('张三') 

//useState 也是一个函数 它的返回值是一个数组 
//通过解构出两项
//    1.值
//    2.操作值的方法

//直接通过 setName 进行修改即可
setName('李四')

//如果是引用类型
const [obj,setObj] = useState({
    name:"张三",
    age:18
})

//这个时候如果我们再用上面的方法去修改
//很明显会产生一个替换
setObj(obj.age+) 
//针对引用类型的值的修改使用合并对象的方式
setObj(
    ...obj,
    {
        age:++obj.age
    }
)

2.类组件

        在类组件中，我们并不能使用 Hook 管理状态，但是类组件内部拥有私有属性 state，通常我们通过 state 定义我们的数据，当我们想要去修改这个数据的时候，也会出现一定的问题需要重视。

        （这里直接写代码示例，没有补全类组件）

//使用私有属性 state 定义状态
state = {
    count: 0
}


//触发事件 注意这里的 this 指向丢失问题（类中自动开启严格模式）
//需要修改 this 指向  通常直接使用箭头函数解决（这里不细讲）
addCount = () => {
    //点击count ++ 
    //通常我们会这样子修改count 的值
    //但是会提示错误
    this.setState({
        count:++this.state.count   
    })
}



//绑定事件
<button onClick={addCount}>点我<button>

      如果我们用以上的形式修改 state 里面的值会给我们提示以下：        

意思就是：不要直接修改状态，其实这个错误是因为这个 React 存在一种保护机制，不允许这样子直接修改 state 的值，我们可以通过一个中间变量去做修改，以下是正确的写法。

addCount = () => {
    const newCount = ++ this.state.count
    this.setState({
        count: newCount 
    })
}

3.总结

       通过一些简单的案例，描述了一下类组件和函数组件修改状态的一些小的问题，虽然小，但也值得注意。