forceUpdate()
触发react
的render
渲染
使用过react
的小伙伴都知道,默认情况下当组件的state
或者props
改变的时候,组件将被重新渲染,但是是否遇到过一些非state
或者props
的数据驱动组件render
的情况
最近由于在学习react
的源码,看到其中有一个forceupdate
的方法,发现他和setState
一样会导致组件重新渲染,但是不同的是他会跳过生命周期shouldComponentUpdate
,直接进入render
所以有些变量不在state
上,当你又想达到当这个变量更新的时候,刷新render
,或者state
里的某个变量层次太深,更新的时候没有自动触发render
。这些时候都可以手动调用forceUpdate
自动触发render
class App extends React.Component{
constructor() {
super();
this.name = '------>我是默认值';
this.state = {
count: 0,
};
}
handelforceUpdate = (name) => {
this.name = name;
this.forceUpdate();
}
handelSetState = () => {
const { count } = this.state;
this.setState({
count: count + 1,
});
}
shouldComponentUpdate() {
console.log('shouldComponentUpdate');
return true;
}
render(){
const {count} = this.state;
console.log('this.name:', this.name, 'count:', count);
return (
<div>
<Button onClick={() => this.handelforceUpdate('---->我是forceUpdate方法')}>点击使用forceUpdate</Button>
<Button onClick={this.handelSetState}>点击使用setState</Button>
<div>handelforceUpdate{this.name}</div>
<div>handelSetState:{count}</div>
</div>
);
}
}
上述代码初次渲染的UI
:
-
点击
点击使用setState
按钮,结果如下: 页面:页面
UI
更新
控制台打印结果:走了生命周期render
和shouldComponentUpdate
-
点击
点击使用forceUpdate
按钮,结果如下: 页面:页面
UI
更新
控制台打印结果:只走了生命周期render
,跳过了生命周期shouldComponentUpdate
这里就不赘述forceUpdate
的源码实现了,因为我也是在学习中还有很多不懂,感兴趣的小伙伴,可以自己去深入学习一波