react中的forceupdate怎么用

本文小编为大家详细介绍“react中的forceupdate怎么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“react中的forceupdate怎么用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

在react中，forceupdate()用于强制使组件跳过shouldComponentUpdate()，直接调用render()，可以触发组件的正常生命周期方法，语法为“component.forceUpdate(callback)”。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react中forceupdate的用法是什么

仅当组件的状态或传递给它的道具发生变化时，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中的forceupdate怎么用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。