javascript - 渲染既不是由 setState() 也不是forceUpdate() 触发

Question

我有一个简单的 React 设置，看起来像这样:

index.js

ReactDOM.render(<App />, document.getElementById('root'));

App.js

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            flag: false
        };
    }

    update = () => {
        // changing DOM to test if re-render occurs
        document.getElementById('test').innerHTML = '';

        this.setState({
            flag: true
        });

        this.forceUpdate();
    };

    render() {
        return(
            <table id="test">
                <tbody>
                <tr key="new">
                    <td>Row foo</td>
                    <td>Row bar</td>
                    <td>{this.state.flag ? 'Row foobar' : 'Row barfoo'}</td>
                </tr>
                </tbody>
            </table>
        );
    }
}

当调用 this.update 时，状态会更新，但即使 this.forceUpdate() 就位，DOM 也不会重新渲染。为什么 React 会忽略状态更改和forceUpdate，而它们都应该触发重新渲染？

我还添加了在预期重新渲染之前清除所有内容的测试，并且内容会被删除，但由于不会发生重新渲染而保持删除状态。

编辑:我删除了所有与 Redux 相关的代码，因为如果我将 Redux 排除在外，问题仍然存在。这是一个最小的 CodeSandox，因为我的实际代码约为 3.5k LOC:

Answer 1

通过查看您的尝试，我可以说您没有理解 react lifecycle正确。

让我们考虑一下您的情况，

您渲染了一个组件，文本显示在网页上，然后您单击按钮并更改渲染的文本，同时执行 setState。现在您希望重新渲染时恢复初始渲染的文本。

现在让我纠正你，

在第一次 setState 执行之前，您的组件会经历一些生命周期方法和组件挂载。当 setState 执行时，您的组件会经历另一组生命周期方法。这两个阶段是完全不同的。

组件的状态由React维护。因此，您在此阶段所做的任何更改都将持续存在，直到组件卸载为止。

要查看初始数据，您必须重新加载浏览器或必须具有某种导航。