2017-04-09 57 views
1

通過在JSX道具中使用.bind或使用Arrow函數。 JSX道具中的bind函數或 箭頭函數將在每個 單個渲染器上創建一個全新的函數。Redud mapDispatchToProps會在每次狀態更新時創建新的函數嗎?

這是否意味着下面的例子將創建每次組件重新渲染的() => props.pressCard(card)cardList.length新功能呢?

const cards = cardList.map(card => 
     <TouchableOpacity key={card.id} onPress={() => props.pressCard(card)}> 
     <Card {...card} /> 
     </TouchableOpacity> 
); 

如果是這樣的話,Redux的mapDispatchToProps怎麼樣?例如,

const mapDispatchToProps = (dispatch) => ({ 
    pressCard: (card) => dispatch(homeActions.pressCard(card)) 
}); 

是否也創造了新的功能組件更新時的狀態?

+0

第一個definetly創造了新的功能,每一個渲染。第二個 - 我沒有看到在狀態改變時運行mapDispatchToProps的理由,因爲你無法從那裏訪問狀態。不知道REDX如何處理這個。 –

回答

1

我肯定這樣做,

onPress={() => props.pressCard(card) 

創建cardList.length新功能

克服這個是使用一類曾經在構造函數創建一個組件和綁定功能的方式,

例如:

class Card extends React.Component { 
    constructor(props) { 
    super(props) 

    this.handlePressCard = this.handlePressCard.bind(this) 
    } 
    handlePressCard(e) { 
    const card = e.currentTarget.dataset.id 
    // Find the card with the above `id` 
    this.props.pressCard(card) 
    } 
    render() { 
    return (
     cardList.map((card) => (
     <TouchableOpacity key={card.id} data-id={card.id} onPress={this.handlePressCard}> 
      <Card {...card} /> 
     </TouchableOpacity> 
    )) 
    ) 
    } 
} 

QUES-2:

它更多地取決於實施細節。據我所知,如果你沒有與store.getState()進行比較並操作對象(我也可能是錯的)返回相同的對象,它將只加載一次。

+0

或者只是定義它內聯'handlePressCard =(e)=> {'那麼你不需要寫出每個函數的綁定:) –

+0

這也適用於.. :) –

0

A mapDispatchToProps函數返回你寫它返回的任何內容。在你的例子中,它會在運行時作爲道具返回一個新的pressCard()函數。

但是,默認情況下connect只會在您的組件實例創建時調用您的mapDispatch函數一次。它將而不是調度動作時再次調用它。

如果你宣佈你mapDispatch功能爲採用兩個參數,它將被包裹組件的道具作爲第二個參數調用,就像這樣:

const mapDispatchToProps = (dispatch, ownProps) => ({ 
    pressCard: (card) => dispatch(homeActions.pressCard(card, ownProps.itemId)) 
}); 

在這種情況下,它會再次調用任何時間即將到來的道具會發生變化,但這可能不會用於「每次派發的行動」。

有綁定方法「對象簡寫」語法,這是簡單的使用:

const actions = { 
    pressCard : homeActions.pressCard 
} 

export default connect(mapState, actions)(MyComponent); 
相關問題