我应该在React JS中使用自定义事件委托

Question

React uses event delegation, as mentioned in the documentation here :

Event delegation: React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping.

I have a very common scenario where I have a list of items and I want a event handler on each item, should I use my custom event delegation and access target element from event object to perform logic or should I attach individual event listener callbacks to each list item and rely on React to take care of performance.

Answer 1

Attach event handler to each. You might look into paging the list, most displays won't show 500-1000 items at a time.

 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> ); } } 

Answer 2

If your custom event delegation means having custom data in event, you shouldn't do it. Because it against React's philosophy.

• New data flow is introduced
  • React prefer one-way data flow
• Implicit dependency is introduced
  • React prefer passing data and functions to props. All dependencies should be explicit

For more details, you can read this