安装后，ReactJS 组件可以接收新属性或新状态。组件内部发生了什么不同？

Question

挂载后，ReactJS 组件可以接收新的属性或新的状态。通常可以使用不同的方法来解决相同的问题。

有效负载用于设置新状态：

getInitialState: function() {
    return {data: {}};
},
componentDidMount: function() {
    requestData().then(function(payload) {
        this.setState({data: payload});
    }); 
}
// this.state.data is available for use

或者新的 payload 作为 props 传递：

requestData().then(function(payload) {
    React.render(<Example data={payload}/>, container);
});
// this.props.data is available for use

在这两种情况下，组件都会在 requestData 解决后更新。组件内部发生了什么不同？

Answer 1

设置状态将重新渲染当前组件。道具用于将数据传递给子组件。他们不做同样的事情。它在您的示例中可能看起来具有相同的效果，但在幕后却并非如此。

在没有看到您的所有代码的情况下，我无法确定您是如何将负载传递给第一个代码段中的示例组件的。

Answer 2

state 和 props 的最大区别在于责任。对于状态，由组件本身来获取它需要的任何数据，并更新它自己的状态，这将导致组件重新渲染。

有了 props，获取数据的不是组件本身，而是父组件。父级获取数据并更新其状态，并在渲染方法中将该状态作为 prop 传递给子组件。

本身没有任何状态但仅获取作为 props 传递的数据的组件更容易理解。它们是 "pure"，因为它们没有副作用。将相同的道具传递给该组件将始终给出相同的输出。这些组件通常只有一个 render 方法，因为它们通常不需要任何其他东西，只需要渲染作为 props 传递的内容。

当您的组件具有状态时，您需要更多地考虑如何改变该状态以及它导致的副作用。

因此，由于无状态组件更容易保持无错误，因此使用 React 时的经验法则是尽可能少地使用有状态组件，并将它们保持在组件层次结构的顶部。这些有状态组件然后将数据作为 props 传递给无状态组件。如果您有几个有状态组件，其余组件是无状态的，您就会知道应用程序的大部分复杂性都包含在这些有状态应用程序中。因此，更容易专注于保持它们的正确性，而不是到处散布复杂性。

编辑

有关术语 "component hierarchy" 的更新。

组件层次结构是您的 React 组件，顶层组件是您传递给 React.render() 的组件。所以这是一个例子，其中 Top 是顶部，Bottom 是底部的，你想保持状态 Top 而 而不是 在 Bottom.

var Top = React.createClass({
  getInitialState() {
    return {
      data: {title: '', contents: ''}
    };
  },
  componentWillMount() {
    SomeAsyncService.fetch()
      .then(data => this.setState({data: data}));
  },
  render() {
    return (
      <Middle 
        title={this.state.data.title} 
        contents={this.state.data.contents}
      />
    );
  }
});

var Middle = React.createClass({
  render() {
    return (
      <h1>{this.props.data.title}</h1>
      <Bottom contents={this.props.contents} />
    );
  }
});

var Bottom = React.createClass({
  render() {
    return (
      <p>{this.props.contents}</p>
    );
  }
});

理想情况下，您在该顶级组件中获取和管理所有应用程序状态，然后将该数据作为 props 传递给子组件，而他们不知道它在哪里来自，使它们本质上更简单。但正如我所说，只有一个有状态组件可能会失控，但你应该努力使状态尽可能接近顶层。

或者，如果您正在使用 react-router，您可以在每个路由处理程序组件中获取数据，并将数据向下传递给该路由的子组件。

安装后，ReactJS 组件可以接收新属性或新状态。组件内部发生了什么不同？

After mounted, ReactJS components can receive new properties or new state. What happens differently inside the component?

javascript

reactjs