问ReactJs:更改状态以响应状态更改

EN

首先，您提到组件外部的第三方可能会调用cmp.setState()吗？这是一个巨大的反应禁忌。一个组件应该只调用它自己的setState函数--任何外部都不应该访问它。

另一件要记住的事情是，如果你再次尝试改变状态以响应状态改变-这意味着你做错了什么。

当你以这种方式构建东西时，它会使你的问题变得比需要的困难得多。原因是，如果你接受外部没有东西可以设置你的组件的状态-那么基本上你唯一的选择就是允许外部事物更新你的组件的道具-然后在你的组件内部对它们做出反应。这简化了问题。

因此，例如，您应该考虑让以前调用cmp.setState()的任何外部事物重新调用您的组件上的React.renderComponent，给出一个新的属性或属性值，例如将showAdvanced设置为true。然后，您的组件可以在componentWillReceiveProps中对此做出反应，并相应地设置其状态。下面是一小段示例代码：

var MyComponent = React.createClass({
    getInitialState: function() {
        return {
            showAdvanced: this.props.showAdvanced || false
        }
    },
    componentWillReceiveProps: function(nextProps) {
        if (typeof nextProps.showAdvanced === 'boolean') {
            this.setState({
                showAdvanced: nextProps.showAdvanced
            })
        }
    },
    toggleAdvancedClickHandler: function(e) {
        this.setState({
            showAdvanced: !this.state.showAdvanced
        })
    },
    render: function() {
        return (
            <div>
                <div>Basic stuff</div>
                <div>
                    <button onClick={this.toggleAdvancedClickHandler}>
                        {(this.state.showAdvanced ? 'Hide' : 'Show') + ' Advanced'}
                    </button>
                </div>
                <div style={{display: this.state.showAdvanced ? 'block' : 'none'}}>
                    Advanced Stuff
                </div>
            </div>
        );
    }
});

因此，当您第一次调用React.renderComponent(MyComponent({}), elem)时，组件将被挂载，而高级div将被隐藏。如果您单击组件内部的按钮，它将切换并显示。如果您需要强制组件从组件外部显示高级div，只需像这样再次调用render：React.renderComponent(MyComponent({showAdvanced: true}), elem)，无论内部状态如何，它都会显示高级div。同样，如果你想从外部隐藏它，只需用showAdvanced: false调用它。

添加到上面的代码示例中的好处是，在componentWillReceiveProps内部调用setState不会导致另一个呈现周期，因为它会在调用render之前捕获并更改状态。有关更多信息，请查看此处的文档：http://facebook.github.io/react/docs/component-specs.html#updating-componentwillreceiveprops

不要忘记，在已经挂载的组件上再次调用renderComponent并不会再次挂载它，它只是告诉react更新组件的props，然后react将进行更改，运行组件的生命周期和渲染函数，并执行dom的差异魔术。

在下面的注释中修改了答案。

我最初的错误答案是：

当收到新的状态或属性时，将运行生命周期函数componentWillUpdate。您可以在此处找到相关文档：http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate

如果在调用外部setState时，在componentWillUpdate中将showAdvanced设置为true，则应该会得到所需的结果。

编辑:另一种选择是让对setState的外部调用包含处于新状态的showAdvanced: true。