React-------setState

常见的改变state的方法
this.setState({ count: 1 });
这个函数的第一个参数是前一个State,第二个参数是当前接收到的最新Props
this.setState((prevState, props) => ({ count: prevState.count + 1 }));
在 React 内部,对于这种情况,采用的是对象合并的操作,就和我们所熟知的 Object.assign() 执行的结果一样。

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

count 点击每次只加一

var assign= Object.assign({b:5}, { a: 2, b: 3 }, { a: 1, c: 4 });
    console.log(assign);  =>{b: 3, a: 1, c: 4}
 increment() {
       me.setState((prevState, props) => ({ count: prevState.count + 1 }));
       me.setState((prevState, props) => ({ count: prevState.count + 1 }));
            }

React官网提到,this.state和this.props的更新可能是异步的,React可能会出于性能考虑,将多个setState的调用,合并到一次State的更新中。所以,不要依赖this.props 和 this.state的值计算下一个状态。

在调用setState之后,也不能立即使用this.state获取最新状态,因为这时的state很可能还没有被更新,要想保证获取到的state是最新的state,可以在componentDidUpdate中获取this.state。也可以使用带用回调函数参数版本的setStatesetState(stateChange, [callback]),回调函数中的this.state会保证是最新的state。
当Props变化时,组件的State需要重置,就可以在componentWillReceiveProps这个方法中调用this.setState()来重置状态。
需要注意,在这个方法中调用this.setState()并不会重新触发componentWillReceiveProps的调用,也不会导致render方法被触发两次。一般情况下,接收到新Props会触发一次render,调用this.setState也会触发一次render,但在componentWillReceiveProps中调用this.setState,React会把原本需要的两次render,合并成一次。
shouldComponentUpdate
这个方法常作为优化React性能使用。返回false不render,true渲染。
浅比较指,只会对state和props的第一级属性进行比较(使用!==)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值