在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。
本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。
仅当组件的状态或传递给它的道具发生变化时,React中的组件才会re-render,但是如果某些数据发生变化,如果我们需要更改组件的re-render,则我们将使用React的forceUpdate()方法。调用forceUpdate()将强制组件re-render,从而跳过该shouldComponentUpdate()方法而调用该组件的render()方法。
提示:通常,避免使用forceUpdate(),而只能从render()中的this.props和this.state中读取。
用法:
component.forceUpdate(callback)
虽然确实有一些使用forceUpdate()方法的用例,但最好在需要时使用挂钩,道具,状态和上下文来对组件进行re-render处理。
默认情况下,当组件的state或props改变时,组件将重新渲染。如果你的render()方法依赖于一些其他的数据,你可以告诉React组件需要通过调用forceUpdate()重新渲染。
调用forceUpdate()会导致组件跳过shouldComponentUpdate(),直接调用render()。这将触发组件的正常生命周期方法,包括每个子组件的shouldComponentUpdate()方法。
forceUpdate就是重新render。有些变量不在state上,当时你又想达到这个变量更新的时候,刷新render;或者state里的某个变量层次太深,更新的时候没有自动触发render。这些时候都可以手动调用forceUpdate自动触发render
Sub.js class Sub extends React.Component{ construcotr(){ super(); this.name = "yema"; } refChangeName(name){ this.name = name; this.forceUpdate(); } render(){ return (<div>{this.name}</div>); } } App.js class App extends React.Component{ handleClick(){ this.subRef.refChangeName("yemafuren"); } render(){ return (<div> <Sub ref={(sub)=>{this.subRef = sub;}} /> <button onClick={this.handleClick}>click</button> </div>); } }
推荐学习:《react视频教程》
以上是react中forceupdate的用法是什么的详细内容。更多信息请关注PHP中文网其他相关文章!