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

Question

安装后,ReactJS组件可以接收新属性或新状态.通常可以使用不同的方法解决相同的问题.

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

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

或者新的有效负载作为props传递:

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

在这两种情况下,组件在requestData解析时都会更新.组件内部会发生什么不同？

Answer 1

国家与道具之间的巨大差异是责任.使用state,由组件本身来获取它需要的任何数据,并更新它自己的状态,这将导致组件重新呈现.

使用props,获取数据的不是组件本身,而是父组件.父获取数据并更新其状态,并且在render方法中,它将该状态作为prop传递给子组件.

没有任何状态但仅获取作为道具传递的数据的组件更容易理解.它们是"纯净的",因为它们没有副作用.将相同的道具传递给该组件将始终提供相同的输出.这些组件通常只有一个render方法,因为它们通常不需要任何其他东西,只能呈现作为props传递的内容.

当你拥有具有状态的组件时,你需要更多地思考你是如何改变这种状态以及它导致的副作用.

因此,因为无状态组件更容易保持无错误,所以使用React时的经验法则是尽可能少地使用有状态组件,并将它们保留在组件层次结构的顶部.那些有状态的组件然后将数据作为道具传递给无状态组件.如果您有一些有状态的组件,其余的是无状态的,那么您知道应用程序的大部分复杂性都包含在那些有状态的应用程序中.因此,更容易专注于保持它们的正确性,而不是将复杂性洒在各处.

编辑

关于术语"组件层次结构"的更新.

组件层次结构是您的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>
    );
  }
});

理想情况下,您可以在该顶级组件中获取和管理所有应用程序状态,并将这些数据作为道具传递给子组件,并且它们不知道它来自何处,使它们本身更简单.但就像我说的那样,只有一个有状态的组件可能会失控,但你应该努力保持状态尽可能接近顶级.

或者,如果您正在使用react-router,则获取每个路由处理程序组件中的数据,并将数据传递给路由子组件.