合成reactjs事件外的setState
合成reactjs事件外的setState
提问于 2018-12-29 18:45:58
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 f“+this.state.count)‘是在'console.log("in render"+”+this.state.count)’之后执行的，只有当setState是同步函数调用时才有可能，根据reactjs setState是异步的，那么'console.log("in f“+ this.state.count)‘应该被执行first.Why它是这样的吗？
回答 1
Stack Overflow用户
发布于 2018-12-29 19:27:30
这与batched updates相关。在上面的代码中，f事件监听器是手动添加的，单击事件是在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中的
在render 2中
示例2
状态更新发生在React生命周期之外，它是未批处理的和同步的。
f = () => {
setTimeout(() => {
this.setState({count:2});
console.log("in f" + this.state.count);
})
}
...输出为：
render 2中的
在f2中
示例3
状态更新也是批处理的和异步的。
f = () => {
setTimeout(() => {
ReactDOM.unstable_batchedUpdates(() => {
this.setState({count:2});
console.log("in f" + this.state.count);
});
})
}
...输出为：
f1中的
在render 2中
至于findDOMNode，顾名思义，它与DOM有关。是ReactDOM.findDOMNode，不是React.findDOMNode。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53968819
复制相关文章
相似问题
腾讯云开发者
