Question

根据Cam Jackson，我们应该使用Redux，并编写小型的无状态功能组件。这是一个例子：

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

将ItemView函数作为onClick上的道具传递，并将其用作onItemClicked函数。在item的实现中，它会收到一个事件，并让<ItemView item={item} onItemClicked={onItemClicked}/> const ItemView = ({item, onItemClicked}) => ( <li><a item={item} onClick={onItemClicked}>{item.name}</a></li> )离开事件。

Pattern regex = Pattern.compile("(?:.*?\\/){3}([^?#]+)", Pattern.DOTALL);

如何处理纯函数React组件中的事件

2 个答案: