纯功能如何处理事件反应的组分

Question

据Cam Jackson，我们应该使用终极版，写小，无状态的，功能组件。这里有一个例子：

const ListView = ({items}) => (
    <ul> 
     {items.map(item => <ItemView item={item}/>)} 
    </ul> 
) 

const ItemView = ({item}) => (
    <li><a>{item.name}</a></li> 
) 

现在，假设你想要处理鼠标点击，并触发一个采取被点击项目的动作。我觉得这是一个很不错的办法做到这一点：

const ListView = ({items, onItemClicked}) => { 
    const _onClick = item => event => { 
     event.preventDefault() 
     onItemClicked(item) 
    } 
    return (
     <ul> 
      {items.map(item => <ItemView item={item} onClick={_onClick(item)}/>)} 
     </ul> 
    ) 
} 

const ItemView = ({item, onClick}) => (
    <li><a onClick={onClick}>{item.name}</a></li> 
) 

然而，根据Esa-Matti Suuronen，这是一个反模式，这将导致性能损失。

很明显，可以处理ItemView组件内的事件，并注入item。但是，如果我们想避免在渲染函数内部创建函数，那么我们需要将它变成一个类组件。

这是一个很常见的模式，我想找到一个简单的方法来处理这个问题，有功能部件，不会造成性能问题。你有什么建议？

如果没有办法做到这一点，我将无法在所有使用功能组件。因为我经常想到，在某些时候，我需要将每个功能组件转换为一个类。

Answer 1

在做了更多的思考之后，我想我已经找到了解决问题的方法。我意识到我们需要更多的Redux容器。不仅用于主要顶级组件，还用于可重用的子组件。

上面的例子可以解决这样的：

const ListView = ({items, onItemClicked}) => (
    <ul> 
     {items.map(item => <ItemContainer item={item} onItemClicked={onItemClicked}/>)} 
    </ul> 
) 

const ItemView = ({item, onClick}) => (
    <li><a onClick={onClick}>{item.name}</a></li> 
) 

const mapDispatch = (dispatch, {item, onItemClicked}) => ({ 
    onClick: (event) => { 
     event.preventDefault() 
     onItemClicked(item) 
    } 
}) 

const ItemContainer = connect(null, mapDispatch)(ItemView) 

在很多情况下，我们将不再需要从外部组件传递一个回调到内的，因为我们将能够直接派遣行动来自ItemContainer。

Answer 2

通过onItemClicked功能作为ItemView上的道具并将其用作onClick函数。在onItemClicked实施有它收到一个事件，并获得item关闭事件。

<ItemView item={item} onItemClicked={onItemClicked}/> 

const ItemView = ({item, onItemClicked}) => (
    <li><a item={item} onClick={onItemClicked}>{item.name}</a></li> 
)