將州作爲道具傳遞給孩子是好習慣嗎？

我發現自己在一個組件上聚合了狀態。通常情況下，我知道我將重新渲染節點，以便更改可以傳播，並且狀態不是全部。最近，我發現自己將道具的狀態作爲道具傳遞給第一個使用JSX spread attributes的孩子。只是要絕對明確的，這就是我的意思是：將州作爲道具傳遞給孩子是好習慣嗎？

var Child = React.createClass({ 
    handleClick: function(){ 
    this.props.owner.setState({ 
     count: this.props.count + 1, 
    }); 
    }, 
    render: function(){ 
    return <div onClick={this.handleClick}>{this.props.count}</div>; 
    } 
}); 

var Parent = React.createClass({ 
    getInitialState: function(){ 
    return { 
     count: 0, 
     owner: this 
    }; 
    }, 
    render: function(){ 
    return <Child {...this.state}/> 
    } 
});

和它的作品（http://jsbin.com/xugurugebu/edit?html,js,output），你可以隨時返回到該組件明白怎麼回事，並保持狀態儘可能小。

所以真正的問題是，如果這是/不是一個好的做法，爲什麼。

我現在可以考慮的缺點是，使用這種方法可能每個子組件總是會在所有者發生狀態更改時重新呈現，如果是這種情況，我認爲以上是可以使用的東西小的組件樹。

來源

2015-04-22 stringparser

當父母通過所有本地狀態時，如同對傳播屬性所做的那樣，這並不是很規範和容易遵循發送給孩子的內容。事實上，取決於組件的複雜性，可能難以推斷髮送的內容。我也很驚訝，孩子實際上需要父母的所有狀態。 – WiredPrairie

是的，這取決於情況。要查看正在發送的內容，您只需查看父母即可。我喜歡這一點的原因，從國家的來源和來源可以清楚地看出。 – stringparser

如果家長是在本地定義的，那很簡單。但隨着項目範圍的擴大，一個組件被多種父母使用，挑戰可能會擴大。 – WiredPrairie

是的！

狀態應該只設置在頂層元素上，這可以確保數據只能通過組件的一個方向流動。請注意，React將只渲染自上次渲染以來所做的更改，如果子元素的某些部分未被修改，則不會將其重新渲染到DOM。

React在他們的文檔中有一個標題爲lifting up state的部分。

來源

2015-04-22 11:48:39

對！我沒有想到差異。所以你所說的是，diff算法會考慮重新渲染的意義，所以即使它傳播了，它也只會確保重新渲染到那些實際上**有一些變化的DOM。我認爲，如果這樣堅持下去，我會測量一些東西，並通過這種方法進行處理。 – stringparser

@stringparser正確。 React使用虛擬DOM來區分任何變化。然後，這些更改，只有這些更改將呈現給真正的DOM。在jsperf上有許多React渲染測試，例如http://jsperf.com/react-vs-pure-js/9 –

謝謝，夥計。它讓事情變得清晰。 – stringparser

將州作爲道具傳遞給孩子是好習慣嗎？

回答

相關問題