react-setState

想要更新视图必须用setState

错误的直接修改

---

state = {
  count : 0,
  list: [1,2,3],
  person: {
     name:'jack',
     age:18
  }
}
// 直接修改简单类型Number
this.state.count++
++this.state.count
this.state.count += 1
this.state.count = 1

// 直接修改数组
this.state.list.push(123)
this.state.list.spice(1,1)

// 直接修改对象
this.state.person.name = 'rose'

基于当前状态创建新值

---

this.setState({
    count: this.state.count + 1
    list: [...this.state.list, 4],
    person: {
       ...this.state.person,
       // 覆盖原来的属性 就可以达到修改对象中属性的目的
       name: 'rose'
    }
})

• 不可变值 -- 不要直接操作 this.state.xxx, 修改的值，不能影响原始值
  1. state 要在构造函数中定义
  2. 不能直接修改state, 要用this.setState修改
  3. this.setState 有可能是异步更新，有可能是同步更新

不可变值

---

state 要在构造函数中定义,不能直接修改state, 要用this.setState修改

import React from 'react';
class SetStateComponent extends React.Component {
    constructor() {
        super()
        // 不可变值
        this.state = {
            // 基本数据
            name: 'zhangsan',
            // 数组、 对象
            list: [1, 2, 3, 4, 5],
            obj:{
                name:'zhangsan',
                age: 20
            }

        }
    }
    handleClick = () => {
        // this.state.name = 'lisi' // 错误
        let listCopy = this.state.list.slice()
        listCopy.splice(5, 0, 6)  // 用副本操作数据
        this.setState({
            // 基本类型
            name: 'lisi',
            // 数组、
            // 数组： 不能使用push、pop、splice等、违反不可变值
            // list: this.state.list.concat(100), // 追加
            // list: [...this.state.list, 200], // 追加
            // list: this.state.list.slice(0,1) // 截取
            // list: this.state.list.filter(item => item > 2), // 过滤
            // list: listCopy
            //  对象
            // obj: Object.assign({}, this.state.obj, { email:'11@qq.com' })
            obj: {...this.state.obj, email:'11@qq.com'}

        })
    }
    render() {
        return <div>
            <div>{this.state.name}</div>
            <ul>
                {
                    this.state.list.map(item => <li key={item}>{item}</li>)
                }
            </ul>
            <hr />
            <ul>
                {
                    this.state.list.map(item => <li key={item}>{item}</li>)
                }
            </ul>
            <hr />
            <ul>
                {
                    Object.keys(this.state.obj).map((item,index) => {
                        return <li key={index}>{item}: {this.state.obj[item]}</li>
                    })
                }
            </ul>

            <button onClick={this.handleClick}>更新</button>
        </div>
    }
}
export const SetStateDemo = SetStateComponent

this.setState 有可能是异步更新，有可能是同步更新

同步

• setState在setTimeout中是同步的 （react18 改为异步，不会同步渲染第一个setState的结果）
• setState在原生事件中是同步的，即通过dom绑定事件的方式实现

异步

• setstate在合成事件中是异步的，这里说的异步实际上是react的批量更新，达到了提升性能的目的。
• setstate在生命周期中是异步的

直接执行是异步的

import React from 'react';
class SetStateComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }
    handleClick = () => {
        this.setState({
            count: this.state.count +1
        }, () => {
            console.log('setState第二个参数 ', this.state.count); // 0  是异步的
        })
        console.log('直接执行', this.state.count); // 0  是异步的
    }
    render() {
        return <div>
            <div>{this.state.count}</div>
            

            <button onClick={this.handleClick}>更新</button>
        </div>
    }
}
export const SetStateDemo = SetStateComponent

setState 合并

---

传入对象，会被合并（类似 Object.assign ）。执行结果只一次 +1

import React from 'react';
class SetStateComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }
    handleClick = () => {
       
        this.setState({
            count: this.state.count + 1
        })
        this.setState({
            count: this.state.count + 1
        })
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return <div>
            <h1>{this.state.count}</h1>
            <button onClick={this.handleClick}> 更新 </button>
        </div>
    }
}
export const SetStateDemo = SetStateComponent

传入函数，不会被合并。执行结果是 +3

import React from 'react';
class SetStateComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }
    handleClick = () => {
        
        this.setState((state,props) => {
            return {
                count: state.count + 1
            }
        })
        this.setState((state,props) => {
            return {
                count: state.count + 1
            }
        })
        this.setState((state,props) => {
            return {
                count: state.count + 1
            }
        })
    }
    render() {
        return <div>
            <h1>{this.state.count}</h1>
            <button onClick={this.handleClick}> 更新 </button>
        </div>
    }
}
export const SetStateDemo = SetStateComponent