React List 项逻辑处理答案

【问题标题】：React List item logic handlingReact List 项逻辑处理
【发布时间】：2022-01-24 13:39:53
【问题描述】：

我很好奇什么是处理列表逻辑的更高效的方式。比如……

项目组件

export default function Item({data}) => {
  return <div>
    <h1>{data.name}
    <button> Do Something </button>
  </div>
}

列表组件

export default function List({list}) => {
   return <div>
    {list.map(item) => <Item data={item} />}
   </div>
}

主要组件

export default function Main() {
  return <div>
    <List list={someList} />
  </div>
}

如果我想用 Item 组件中的按钮做某事，最好将逻辑放在 Item 组件中，如下所示：

export default function Item({data}) => {
  const handleDoSomething = () => {
    logic goes here
  }

  return <div>
    <h1>{data.name}
    <button onClick={() => handleDoSomething()}> Do Something </button>
  </div>
}

或者我应该将事件传播回 List 组件并像这样在那里处理它：

export default function Item({data, handleButtonClick}) => {

  return <div>
    <h1>{data.name}
    <button onClick={() => handleButtonClick()}> Do Something </button>
  </div>
}

export default function Main() {
  const handleDoSomething = () => {
    logic goes here
  }

  return <div>
    <List list={someList} handleButtonClick={() => handleDoSomething()} />
  </div>
}

这样做有什么好处？我想要更好的表现。

【问题讨论】：

标签： javascript reactjs performance rendering

【解决方案1】：

我想将事件传播回 List 组件会更好，因为处理函数只会被声明一次，而不是为您呈现的每个按钮声明一次。

顺便说一句，如果您不向处理函数传递任何自定义参数，则不需要创建箭头函数，您可以这样做：

<button onClick={handleButtonClick}> Do Something </button>

【讨论】：

我也是这么想的，谢谢回复。