React 之道 - 软件设计、架构和最佳实践

来源：Tao of React - Software Design, Architecture & Best Practices | Alex Kondov - Software Engineer

几个之前一直写的不好的点：

1. 管理道具数量

一个组件应该接收多少个 props 的问题是一个主观问题。组件拥有的 props 数量与其正在执行的操作相关。你传递给它的 props 越多，它承担的责任就越多。

大量的 props 是一个信号，表明组件做得太多了。

如果我超过 5 个 props，我会考虑是否应该拆分该组件。在某些情况下，可能只需要大量数据。例如，输入字段可能有很多道具。在其他情况下，这表明需要提取某些内容。

注意：组件使用的 props 越多，重新渲染的原因就越多。

避免嵌套三元运算符

// 👎 Nested ternaries are hard to read in JSX
isSubscribed ? (
  <ArticleRecommendations />
) : isRegistered ? (
  <SubscribeCallToAction />
) : (
  <RegisterCallToAction />
)
 
// 👍 Place them inside a component on their own
function CallToActionWidget({ subscribed, registered }) {
  if (subscribed) {
    return <ArticleRecommendations />
  }
 
  if (registered) {
    return <SubscribeCallToAction />
  }
 
  return <RegisterCallToAction />
}
 
function Component() {
  return (
    <CallToActionWidget
      subscribed={subscribed}
      registered={registered}
    />
  )
}

避免嵌套渲染函数

当您需要从组件或逻辑中提取标记时，不要将其放入同一组件中的函数中。组件只是一个函数。以这种方式定义它就是嵌套在其父级内部。

这意味着它将有权访问其父级的所有状态和数据。它使代码更加难以阅读 - 这个函数在所有组件之间做什么？

将其移动到自己的组件中，为其命名并依赖 props 而不是闭包。

// 👎 Don't write nested render functions
function Component() {
  function renderHeader() {
    return <header>...</header>
  }
  return <div>{renderHeader()}</div>
}
 
// 👍 Extract it in its own component
import Header from '@modules/common/components/Header'
 
function Component() {
  return (
    <div>
      <Header />
    </div>
  )
}