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 执行之前，您的组件会经历一些生命周期方法和组件 mounts。当 setState 执行时，您的组件会经历另一组生命周期方法。这两个阶段是完全不同的。

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

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