setState的函数用法

作者: upup_dayday | 来源:发表于2018-12-30 22:45 被阅读4次

1. this.setState不会立即生效

React中使用this.setState的对象用法时,不会立即改变组件中state的值

//更新状态
this.setState({count: count + 1});

这就会导致下面的操作达不到字面上直观的效果。
字面上看,调用incrementMultiple,应该会导致state加了3,实际上只增加了1。

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

这是因为,this.setState并没有立即更改this.state,所以三次操作都在反复设置同一个值。

2. setState的函数用法

this.setState还可以接受一个函数作为参数。
React官网上说,这个函数接收两个参数,第一个是当前的state,第二个是当前的props,函数返回一个对象,与之前使用this.setState的返回对象相同,代表想对state的更改。

function increment(state, props) {
  return {count: state.count + 1};
}

从上面的描述,我读到的两个意思,一个是:把一个函数作为参数传给this.setState,那这个函数不管叫什么,他都有两个入参;第二个是:这个函数的第一个参数是当前的state,第二个参数是当前的props,不管他们叫什么。

用着试试吧,把这个入参打印出来,入参就顽皮地叫做cc吧

function plusone(cc, props){
    console.log(cc);
    return{count: cc.count + 1};
}

class AddByFunction extends React.Component {
    constructor(props){
        super(props);
        this.state = {count: 0};
        this.increment = this.increment.bind(this);
    }

    increment() {
        this.setState(plusone);
        this.setState(plusone);

    }

    render(){
        console.log('cc');
        return (
            <div>
                <button onClick={this.increment}>AddByFunction</button>
                <h2>Result:{this.state.count}</h2>
            </div>
        );
    }
}

ReactDOM.render(
    <AddByFunction />,
    document.getElementById('root')
);
image.png

点击一次按钮,确实实现了累加两次的效果,从控制台的打印也可以看出来,入参cc是一个state对象,并且每次调用plusone之前,cc都合并了之前的状态修改结果。

这样一来,用函数方式来使用setState,就更符合直观的逻辑了

参考:
setState:这个API设计到底怎么样
State and Lifecycle

相关文章

  • setState的函数用法

    1. this.setState不会立即生效 React中使用this.setState的对象用法时,不会立即改变...

  • React Hook用法详解(6个常见hook)

    1、useState:让函数式组件拥有状态 用法示例: PS:class组件中this.setState更新是st...

  • RN开发问题总结备忘

    目录 1)通知的用法 2)回调函数传入参数以区分点击 3)react-navigation 4 setState(...

  • react拓展

    setState() setState更新状态的2种方式 对象式的setState 函数式的setState 对象...

  • flutter中key的作用

    1.setState的原理 setstate会触发canUpdate函数的调用,这个函数会对比old widget...

  • setState总结

    1. 前言 总结下setState用法不要直接修改 State 2. 第一个参数是函数 state的更新异步的,...

  • 2018-11-20 React setState同步更新

    react的setState特点: react中的setState特点: 1. 异步操作函数; ...

  • React setState

    当组件的 setState 函数被调用之后,会发生什么 ? 在代码中调用setState函数之后,React 会将...

  • react之setState函数

    在react中,想要修改一个状态会使用到setState函数,它是一个异步函数。 setState函数除了接收对象...

  • react的更新机制

    每次setState都会调用组件的render函数?setState后会进入到shouldComponentUpd...

网友评论

    本文标题:setState的函数用法

    本文链接:https://www.haomeiwen.com/subject/rwkblqtx.html