Question

class Hello extends React.Component {
    constructor(props){
        super(props)
            this.state={count:1};
            this.myRef = React.createRef();
        }
        use(){
            console.log(this.myRef);
            let f=function(){
            this.setState({count:2});
            console.log("in f" + this.state.count);
        }
        //let a=React.findDOMNode(this.myRef.current);
        this.myRef.current.onclick=f.bind(this);
        //console.log(a);
    }

    render() {
        console.log("in render"+" "+this.state.count);
        return (
            <div>Hello {this.state.count}
                <div onClick={this.use.bind(this)}>add function</div>
                <button ref ={this.myRef}>click</button>
            </div>;
        )
    }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

在此代码中，“ console.log（“ in”“ + this.state.count）'仅在'console.log（” in render“ +”“ + this.state.count）'之后执行如果setState是同步函数调用，在内部调用另一个同步函数render。但是根据reactjs，setState是异步的，因此应首先执行“ console.log（“ in f” + this.state.count）“。这个吗？

Answer 1

这与batched updates有关。在上面的代码中，f事件监听器是手动添加的，click事件是在React生命周期之外触发的。状态更新不是批处理的，而是同步发生的。如果状态更新可以从批处理中受益，那么这可能会对性能产生负面影响。

以下是显示其工作原理的简单示例。

示例1

状态更新发生在React生命周期内，它是批处理且异步的。

  f = () => {
    this.setState({count:2});
    console.log("in f" + this.state.count);
  }

  render() {
    console.log("in render"+" "+this.state.count);

    return <div>
      Hello {this.state.count}
      <button onClick={this.f}>click</button>
    </div>;
  }

输出为：

在f1

在渲染2中

示例2

状态更新发生在React生命周期之外，它是成批的和同步的。

  f = () => {
    setTimeout(() => {
      this.setState({count:2});
      console.log("in f" + this.state.count);
    })
  }
  ...

输出为：

在渲染2中

在f2

示例3

状态更新再次被批处理并且是异步的。

  f = () => {
    setTimeout(() => {
      ReactDOM.unstable_batchedUpdates(() => {
        this.setState({count:2});
        console.log("in f" + this.state.count);
      });
    })
  }
  ...

输出为：

在f1

在渲染2中

对于findDOMNode，顾名思义，它与DOM有关。是ReactDOM.findDOMNode，而不是React.findDOMNode。

合成ReactJS事件外的setState

1 个答案:

示例1

示例2

示例3