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也不会重新呈现。为什么反应会忽略状态更改和forceUpdate两者都应触发重新渲染？

我还添加了一项测试，用于在预期的重新渲染之前清除所有内容，并删除内容，但由于没有重新渲染，因此保持删除状态。

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

Answer 1

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

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

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

现在让我在这里对您进行纠正

在首先执行setState之前，您的组件会经历一些生命周期方法，并且组件mounts也会经历。当setState执行时，您的组件将经历另一套生命周期方法。这两个阶段完全不同。

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

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

渲染既不由setState（）也不由forceUpdate（）触发

1 个答案: