我應該使用自定義事件代表團陣營JS

陣營使用事件代表團作爲文檔here中提到：我應該使用自定義事件代表團陣營JS

事件委託：陣營並不事件處理程序實際上連接到節點本身。當React啓動時，它開始使用單個事件偵聽器監聽頂級的所有事件。當組件被掛載或卸載時，事件處理程序可以簡單地添加到內部映射或從內部映射中刪除。

我有一個很常見的情況，我有一個項目清單，我想在每個項目上的事件處理程序，我應該用我的自定義事件代表團訪問目標元素從事件對象進行邏輯或我應該重視個別事件監聽器回調到每個列表項並依靠React來處理性能。

來源

2015-11-16 Aditya Singh

我不知道你所說的「我的自定義事件委託」的意思，你能舉個例子嗎？ –

'自定義事件委託'我的意思是在列表項的父元素添加事件監聽器，而不是單個項目。 –

我真的不明白 - 這是什麼定製？ –

將事件處理程序附加到每個。您可能會查看分頁列表，大多數顯示屏一次不會顯示500-1000個項目。

class SnipListItemRender extends React.Component { 
 
    render() { 
 
    let SnipSpanSty = {width: 'calc(70% - 142px)'}; 
 
    SnipSpanSty.color = (this.props.index === this.props.selectedKey) ? '#b58900' : '#afac87'; 
 
    return (
 
     <div id='SnipDivSty' onclick={this.snipClickHandler} className="FlexBox" style={SnipDivSty}> 
 
     <div id='SelectSnipDivSty' style={SelectSnipDivSty}> 
 
      <JButton btn={selectSnipBtn} parentClickHandler={this.snipClickHandler} /> 
 
     </div> 
 
     <span id='SnipSpanSty' style={SnipSpanSty}>{this.props.snippet.snip}</span> 
 
     <JButton btn={SnipBtn} parentClickHandler={this.snipClickHandler} /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
class SnipListItem extends SnipListItemRender { 
 
    snipClickHandler = (buttonid) => { Actions.selectSnipItem(this.props.snippet, buttonid); } 
 
} 
 

 
let _snipDataMap = function(snip, index) { 
 
    return (
 
    <li id='SnipsDivLiSty' key={index} style={SnipsDivLiSty}> 
 
     <SnipListItem snippet={snip} index={index} selectedKey={this.props.selectedKey} /> 
 
    </li> 
 
); 
 
} 
 

 
export default class SnipsView extends React.Component { 
 
    render() { 
 
    let list = this.props.data.map(_snipDataMap, this) 
 
    return (
 
     <div id='SnipsDivSty' style={SnipsDivSty}> 
 
     <ul id='SnipsDivUlSty' style={SnipsDivUlSty}> 
 
      {list} 
 
     </ul> 
 
     </div> 
 
    ); 
 
    } 
 
}

來源

2015-11-16 18:58:15

如果有事件中的自定義數據的custom event delegation手段，你不應該這樣做。因爲它違背了React的哲學。

新的數據流進行引導
- 反應傾向於單向數據流
隱依賴介紹
- 反應更喜歡傳球的數據和功能道具。所有的相關性都應當明確

欲瞭解更多詳情，您可以閱讀this

來源

2017-09-01 05:45:42 sundayku

我應該使用自定義事件代表團陣營JS

回答

相關問題