React 函数式组件中的函数应该被包装吗？

Question

我有一个功能组件，其中包含一个功能，renderMessages。

const MessageContainer = (props) => {
     const renderMessages = () => {
        return props.messages.map((message, index) => {
            return(
                <Message
                    key={index}
                    username={message.username}
                    message={message.message}
                    fromCurrentUser={message.fromCurrentUser}
            />);
        })
    }

     return(
          <div className='messages'>
               {renderMessages()}
          </div>
     )

}

但是，我意识到，与其在地图上包装 renderMessages 函数，我可以：

const renderMessages = props.messages.map((message, index) => {
     return(
          <Message
               key={index}
               username={message.username}
               message={message.message}
               fromCurrentUser={message.fromCurrentUser}
            />);
      })
}

因此，我的最终回报将只包含

return(
     <div className='messages'>
          {renderMessages}
     </div>
)

在基于类的组件和渲染函数中，我会使用两者中的最后一个。使用功能组件时，这两者中的哪一个被认为是最佳实践，为什么？

Answer 1

编辑：

在使用功能组件时，两者中哪一个被认为是最佳实践，为什么？

最佳实践随上下文而变化 - 例如您正在工作的团队 - 所以这是一个基于意见的问题。

话虽如此，在我看来，我也不会这样做。我会（而且我会）这样做：

const MessageContainer = (props) => {


     return (
          <div className='messages'>
            {props.messages.map((message, index) => (
                  <Message
                      key={index}
                      username={message.username}
                      message={message.message}
                      fromCurrentUser={message.fromCurrentUser}
                  />
             ))}
          </div>
     )

}

额外变量的目的是什么？

当您使用它时，don't use indexes for keys

关于你在类组件上封装渲染逻辑的所有额外方法的肮脏秘密是它们是一种反模式——这些方法实际上是组件。

编辑#2

正如另一个答案中所指出的，对于这个特定用例，最高效的解决方案是在功能组件之外指定 map 函数：

const renderMessage = (message,index) => (
  <Message
   key={index}
   {...message}
  />
)

const MessageContainer = (props) => {
  return (
   <div classname='messages'>
     {props.messages.map(renderMessage)}
   </div>
  );
}

但是，您不应该过早地进行优化，我会提倡我发布的原始解决方案纯粹是为了简单/可读性（但是，对于他们自己而言）。

Answer 2

很好地将映射分离到组件的返回之外，因为这样你只会一遍又一遍地调用相同的函数，直到 .map 完成迭代，但是如果你将它写在组件的返回中，每次.map 遍历下一个项目，您将创建一个新函数。 关于这个问题，我推荐第二种方式，干净/可读的代码总是更可取的。

附：尝试使用唯一的消息 ID 而不是索引。