React-在无状态组件数组中，哪种方式将参数传递给prop函数更好

Question

我正在重构我的react组件，并想知道在父组件和子组件数组之间，向prop函数传递参数的哪种方式更干净、更可读。

1. 在子组件中传递参数

const ChildComponent = ({data, onButtonClick}) => {
return (
<div>
{data.name}
<button type="button" onClick={() => onButtonClick(data.id)}>Clcik</button>
</div>
);
};
const ParentComponent = () => {
const list = [{id: 'a', name: 'Apple'}, {id: 'b', name: 'Banana'}];
const recordId = (id) => {
console.log(id);
};
return (
list.map((item) => (
<ChildComponent key={item.id} data={item} onButtonClick={recordId} />
))
);
};

2. 在父组件中传递参数

const ChildComponent2 = ({data, onButtonClick}) => {
return (
<div>
{data.name}
<button type="button" onClick={onButtonClick}>Clcik</button>
</div>
);
};
const ParentComponent2 = () => {
const list = [{id: 'a', name: 'Apple'}, {id: 'b', name: 'Banana'}];
const recordId = (id) => {
console.log(id);
};
return (
list.map((item) => (
<ChildComponent2 key={item.id} data={item} onButtonClick={() => recordId(item.id)} />
))
);
};

Answer 1

从优化的角度来看，第一种方法更好，因为您可以轻松地将recordId转换为一个稳定的实体(由于它是一个纯函数，所以可以将其移动到组件体之外，或者使用useCallback(，这样它就不会触发不必要的子级渲染(如果您决定在它们上使用React.memo(。

从团队合作的角度来看，第二种方式更好。如果另一个人负责ChildComponent，他/她不需要知道来自父级的onClick处理程序的任何信息，因为它已经组装好了，所以所要做的就是将其传递到按钮上。