React component.forceUpdate() 强制重新渲染


component.forceUpdate() 一个不常用的生命周期方法, 它的作用就是强制刷新

官网解释如下

默认情况下，当组件的 state 或 props 发生变化时，组件将重新渲染。如果 render() 方法依赖于其他数据，则可以调用 forceUpdate() 强制让组件重新渲染。
调用 forceUpdate() 将致使组件调用 render() 方法，此操作会跳过该组件的 shouldComponentUpdate()。但其子组件会触发正常的生命周期方法，包括 shouldComponentUpdate() 方法。如果标记发生变化，React 仍将只更新 DOM。
通常你应该避免使用 forceUpdate()，尽量在 render() 中使用 this.props 和 this.state。

通常来说, 我们应该用 setState() 更新数据,从而驱动更新.所以用到 component.forceUpdate() 的情况并不多

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
class App extends React.Component {<!-- -->
    constructor(props) {<!-- -->
        super(props);
        console.log("constructor")

        this.onClickHandler = this.onClickHandler.bind(this);
    }
    componentWillMount() {<!-- -->
        console.log("componentWillMount")
    }
    componentDidMount() {<!-- -->
        console.log("componentDidMount")
    }
    componentWillUnmount() {<!-- -->
        console.log("componentWillUnmount")
    }
    componentWillReceiveProps() {<!-- -->
        console.log("componentWillReceiveProps")
    }
    shouldComponentUpdate() {<!-- -->
        console.log("shouldComponentUpdate")
        return true
    }
    componentWillUpdate() {<!-- -->
        console.log("componentWillUpdate")
    }
    componentDidUpdate() {<!-- -->
        console.log("componentDidUpdate")
    }

    onClickHandler() {<!-- -->
        console.log("onClickHandler")
        this.forceUpdate();
    }

    render() {<!-- -->
        console.log("render")
        return (
            <button onClick={<!-- -->this.onClickHandler}> click here </button>
        );
    }
}

ReactDOM.render(<App />,
    document.getElementById("react-container")
);

end