安裝后，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時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 ，則獲取每個路由處理程序組件中的數據，並將數據傳遞給路由子組件。

Answer 2

設置狀態將重新呈現當前組件。 道具用於將數據傳遞給子組件。 他們不做同樣的事情。 它可能在您的示例中具有相同的效果，但它不會在場景后面。

在沒有看到所有代碼的情況下，我無法准確確定您是如何將有效負載傳遞給第一個代碼段中的Example組件的。