forceUpdate()触发react的render渲染

`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的源码实现了，因为我也是在学习中还有很多不懂，感兴趣的小伙伴，可以自己去深入学习一波