04-react-state和setState

react-state和setState

state

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 1 };
    }
    // ...
}

setState

setState(updater[, callback])

updater 可以是一个函数也可以是一个对象类型

this.setState((state, props) => stateChange);
this.setState({ count: 1 });

setState 的基本使用

setState 的基本格式

this.setState({ count: this.state.count + 1 });

setState 是批量更新的

class Test extends React.Component {
    state = {
        count: 1
    };
    componentDidMount() {
        this.setState({
            count: this.state.count + 1
        });
        this.setState({
            count: this.state.count + 1
        });
        // 批量合并更新 count为2
    }
    render() {
        return <div>{this.state.count}</div>;
    }
}

this.state 和 this.props 可能会异步更新
- 可以让 setState（）接受一个函数
- 第一个参数为 state,第二个参数为 props

class Test extends React.Component{
    state = {
        count : 1
    }
    componentDidMount(){
        this.setState((state, props) => {
            console.log("state,props :", state, props);
            return { count: state.count + 1 };
        });
        this.setState((state, props) => ({
            count: state.count + 1
        })
        this.setState((state, props) => ({
            count: state.count + 1
        })
        // count 值为4

    }
    render(){
        return (
            <div>{this.state.count}</div>
        )
    }
}

setState 并不总是立即更新组件,它会批量推迟更新
所以调用后立即读取 this.state 成为隐患,可以是使用 componentDidUpdate 或者是 setState 的回调函数

this.setState(
    {
        count: 2
    },
    () => {
        console.log("this.setState的回调函数");
    }
);

setState 小结

1.setState 只在合成事件和钩子函数中是异步的,在原生事件和 setTimeout 中是同步的
2.setState 的异步并不是说内部异步代码是实现的,其本身的代码是同步的.

合成事件和钩子函数的调用在 setState 调用之前, 导致在合成事件和钩子函数中没法拿到 setState 更新后的值,形成了所谓的"异步",当然可以通过的第二个参数 setState(partialState,callback)中的 callback 拿到更新后的结果

总结:属于原生 js 执行的空间,setState 就是同步,被 react 处理过的就是异步

3.setState 的批量更新中,

在原生 js 事件和 setTimeout 中,不会批量更新
在 react 中
- 如果对同一个值进行多次 setState,setState 的批量更新会对其进行覆盖,取最后一次的执行,
- 如果是对不同的值,在更新时会其进行合并批量更新

最后编辑于：2020.10.16 11:14:00