【React.js】之setState

setState

• 不可变值
• 可能是异步更新
• 可能会被合并

不可变值

从React渲染组件性能考虑，使用旧数据创建新数据时，要保证旧数据同时可用，

并且没有变化的部分还可用，目的是尽量减少不必要的渲染和重绘。

如果是简单的赋值给一个新的变量，新旧对象只是名称不同，不进行深比较js认为数据不变。其次，也会带来引入对象浅拷贝的问题，造成不可预测的展示值。

这对react响应重新渲染造成了性能影响，或不能及时更新dom。

shouldComponentUpdate 是因为 state值和setState值一样是也会触发更新，但是只到浅比较，对于深层结构没有效率。

但是做深层拷贝很耗时，于是这才有了Immutable 不可变数据，来提升组件render的效率。

可能是异步的

setState本身是异步调用的，可以在回调函数中拿到同步更新的值，在setTimeout中和自定义的DOM事件中setState是同步的。

可能会被合并

import React from 'react'

// 函数组件（后面会讲），默认没有 state
class StateDemo extends React.Component {
    constructor(props) {
        super(props)

        // 第一，state 要在构造函数中定义
        this.state = {
            count: 0
        }
    }
    render() {
        return <div>
            <p>{this.state.count}</p>
            <button onClick={this.increase}>累加</button>
        </div>
    }
    increase = () => {
        // // 第二，不要直接修改 state ，使用不可变值 ----------------------------
        // // this.state.count++ // 错误
        this.setState({
            count: this.state.count + 1 // SCU
        })
        // 操作数组、对象的的常用形式

        // 第三，setState 可能是异步更新（有可能是同步更新） ----------------------------
        
        this.setState({
           count: this.state.count + 1
        }, () => {
            // 联想 Vue $nextTick - DOM
       console.log('count by callback', this.state.count) // 回调函数中可以拿到最新的 state
        })
       console.log('count', this.state.count) // 异步的，拿不到最新值

        // setTimeout 中 setState 是同步的
        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            })
         console.log('count in setTimeout', this.state.count)
       }, 0)

        // 自己定义的 DOM 事件，setState 是同步的。在 componentDidMount 中
        

        // 第四，state 异步更新的话，更新前会被合并 
        // 传入对象，会被合并（类似 Object.assign ）。执行结果只一次 +1
        this.setState({
             count: this.state.count + 1
        })
        this.setState({
           count: this.state.count + 1
        })
        this.setState({
            count: this.state.count + 1
        })
        
        // 传入函数，不会被合并。执行结果是 +3
        this.setState((prevState, props) => {
            return {
                count: prevState.count + 1
            }
        })
        this.setState((prevState, props) => {
            return {
                count: prevState.count + 1
            }
        })
        this.setState((prevState, props) => {
            return {
                count: prevState.count + 1
            }
        })
    }
    bodyClickHandler = () => {
        this.setState({
            count: this.state.count + 1
        })
        console.log('count in body event', this.state.count)
   }
    componentDidMount() {
        // 自己定义的 DOM 事件，setState 是同步的
        document.body.addEventListener('click', this.bodyClickHandler)
    }
    componentWillUnmount() {
        // 及时销毁自定义 DOM 事件
      document.body.removeEventListener('click', this.bodyClickHandler)
       // clearTimeout
    }
}

export default StateDemo

// -------------------------- 我是分割线 -----------------------------

// 不可变值（函数式编程，纯函数） - 数组
const list5Copy = this.state.list5.slice()
list5Copy.splice(2, 0, 'a') // 中间插入/删除
this.setState({
    list1: this.state.list1.concat(100), // 追加
    list2: [...this.state.list2, 100], // 追加
    list3: this.state.list3.slice(0, 3), // 截取
    list4: this.state.list4.filter(item => item > 100), // 筛选
    list5: list5Copy // 其他操作
})
// 注意，不能直接对 this.state.list 进行 push pop splice 等，这样违反不可变值

// 不可变值 - 对象
this.setState({
     obj1: Object.assign({}, this.state.obj1, {a: 100}),
     obj2: {...this.state.obj2, a: 100}
})
// 注意，不能直接对 this.state.obj 进行属性设置，这样违反不可变值