Question

我有以下代码：

var Try = React.createClass({displayName: "Try",
  getInitialState: function() {
    return {
        int: 'x'
    };
  },
  ck: function() {
    this.setState({int: 1});
    console.log(this.state.int);
  },
  render: function() {
    return (
      React.createElement("div", {onClick: this.ck}, "Hello")
    );
  }
});

React.render(React.createElement(Try, null), $('body')[0]);

在此处试试：http://codepen.io/rlog/pen/qdvVEK/

当我第一次点击Hello div时，日志为x。为什么不是1？

Answer 1

根据文件：

setState（）不会立即改变this.state但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

无法保证对setState的调用进行同步操作，并且可以对调用进行批处理以获得性能提升。

除非在shouldComponentUpdate（）中实现条件呈现逻辑，否则setState（）将始终触发重新呈现。如果正在使用可变对象且无法在shouldComponentUpdate（）中实现逻辑，则仅当新状态与先前状态不同时调用setState（）将避免不必要的重新渲染。

Component API @ React docs

您可以使用可选的第二个参数作为回调函数，在setState完成后获取更改后的值。

this.setState({int: 1}, function () {
  console.log(this.state.int)
});

第二个（可选）参数是一个回调函数，它将在setState完成并重新呈现组件后执行。

http://codepen.io/anon/pen/JdzONa

为什么React状态是init状态而不是我刚设置的状态？

1 个答案: