javascript - 如何将带有参数的回调传递给 React.memo？

Question

我正在阅读这篇关于处理将回调函数传递给记忆化的 React 组件的文章（使用React.memo()）

为了不在每次组件重新渲染时都创建一个新函数，本文建议不要将该函数设为匿名，而是在父级中定义它，然后再将其传递下去：

function ParentComponent() {
    const onHandleClick = useCallback(() => {
        // this will return the same function
        // instance between re-renders
    });

    return (
        <MemoizedSubComponent
            handleClick={onHandleClick}
        />
    );
}

到目前为止，这对我来说很有意义。但是，在我的情况下，我需要将一些参数传递给 my handleClick()，以便稍后识别组件。

到目前为止，我一直通过箭头函数解决这个问题：所以handleClick={onHandleClick}我通常不会这样做 handleClick={()=> onHandleClick(i)}- 但在这里这样做会再次创建一个新函数，对吗？所以我会再次出现在 1 号广场。

我将如何理想地解决这个问题？

编辑：

例如，假设我想这样做：

function ParentComponent() {
    const onHandleClick = useCallback((itemIndex) => {
       console.log(itemIndex);
    });
    
    let data = [1,2,3,4]

    return (<div>
       {data.map(item => {
        return <MemoizedSubComponent
            handleClick={(i)=> onHandleClick(i)}
        />}
    </div>)
}

...但不是在每次重新渲染时重新创建箭头函数。

标签： javascriptreactjsdata-bindingmemoizationarrow-functions