安裝後，ReactJS組件可以接收新屬性或新狀態。組件內部會發生什麼不同？

安裝後，ReactJS組件可以接收新屬性或新狀態。通常可以使用不同的方法解決相同的問題。安裝後，ReactJS組件可以接收新屬性或新狀態。組件內部會發生什麼不同？

有效載荷用於設置一個新的狀態：

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

或新的有效載荷爲道具傳遞：

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

在這兩種情況下，當requestData解決組件進行更新。組件內部會發生什麼不同？

來源

2015-04-21 sigmus

國家和道具之間的巨大差異是責任。有了狀態，取決於組件本身需要的任何數據，並更新自己的狀態，這將導致組件重新呈現。

使用道具，它不是獲取數據的組件本身，而是父組件。父級讀取數據並更新其狀態，並在render方法中將該狀態作爲prop傳遞給子組件。

沒有任何自己狀態但只能獲取作爲道具傳遞的數據的組件更容易理解。它們是「純」的，因爲它們沒有副作用。將相同的道具傳遞給該組件將始終提供相同的輸出。這些組件通常只有一個渲染方法，因爲它們通常不需要其他任何東西，只能渲染通過道具的東西。

當你有組件有狀態時，你需要更多地考慮你如何改變這個狀態以及它引起的副作用。

因此，因爲無狀態組件更容易保持無錯誤，所以使用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，則可以獲取每個路由處理程序組件中的數據，並將數據傳遞給路由子組件。

來源

2015-04-21 05:35:12

我已經開始明白的是，「在組件層次結構的頂部*並不一定是一個陣營組成部分，它可以是被作爲道具來傳遞任何JS對象的‘根’的組成部分。 – sigmus

-1

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

沒有看到你所有的代碼，我無法確定你是如何將有效載荷傳遞給第一個片段中的Example組件的。

來源

2015-04-21 04:53:51 kevintechie

安裝後，ReactJS組件可以接收新屬性或新狀態。組件內部會發生什麼不同？

回答

相關問題