编写（干净的）React 代码

构建简单的软件

我们通常认为构建复杂的软件很难。但最难的是用尽可能简单的方式构建复杂的软件。

如果我们不刻意保持其简单性，即使是简单的软件也会变得复杂混乱。

软件简单性的主要指标之一是外部开发人员能够多么轻松地理解代码库并在其基础上进行扩展和改进。

在这篇文章中，我将解释过去几个月我学到的一些关于编写简单、干净的 React 代码的知识。

1. 让你的 React 组件尽可能简短

与编写代码的时间相比，开发人员阅读和理解代码的时间几乎是代码本身的 10 倍。我们的目标应该是让这个过程尽可能轻松。随着代码规模的增加，代码的可读性会急剧下降。

如果不控制 React 组件的大小，它很快就会变得超出你的控制范围。如果组件非常大，编写它的人可能熟悉它的所有部分并理解它的工作原理，但其他开发人员很难理解它。对于外部开发人员来说，拥有 500 或 1000 行代码的组件将是一场噩梦。

始终检查是否可以将代码重构到单独的文件中。将组件分解为合适的子组件。将组件中使用的辅助函数放在单独的 JS 文件中并导入。这样做的一个好处是，它有助于提高可重用性。

2. 同一抽象级别的组件应该放在一起

如果你熟悉臭名昭著的鲍勃大叔的《代码整洁之道》，那么你可能对函数的概念很熟悉。同一抽象级别的函数应该放在一起。这使得代码易于阅读。这同样适用于组件。同一抽象级别的组件应该放在一起。

案例 1

<TopMenu/>
<TextEditor/>
<RightMenu/>

案例 2

<div>
  <button onClick={handleFilePress}>File</button>
  <button onClick={handleSavePress}>Save</button>
</div>
<Editor/>
<RightMenu/>

第一段代码立刻让读者对这个文本编辑器应用有了大致的了解。但第二段代码就没那么明显了。

3. 尽量减少道具数量

在《代码整洁之道》一书中，建议函数的参数数量应尽可能少。为什么？因为随着参数数量的增加，函数的功能将变得越来越不明显（React 组件的 Props 可以被视为其参数）。

例如，考虑代码

案例 1

<Table 
  height={100}
  width={20}
  scrollable
  resizable
  cellColor='grey'
  headerColor='black'
  font='Roboto'
  data={data}
/>

案例 2

const config={
  height:100,
  width:20,
  scrollable:true,
  resizable:true,
}
const styles = {
  cellColor: 'grey',
  headerColor: 'black',
  font: 'Roboto'
}
return (
  <Table
    config={config}
    data={data}
    styles={styles}
  />
)

与第一个代码片段相比，第二个代码片段看起来更加简洁易懂，因为当开发人员查看该组件时，脑海中会立即浮现出一幅画面：Table 组件包含三个高级 props，分别是数据、样式和配置。之后，开发人员可以根据需要深入研究其中任何一个。

在第一个代码片段中，开发人员立即被大量信息轰炸，他很容易迷失方向。

如果需要，你应该像创建配置对象那样抽象 props。每次需要添加 props 时，向组件添加新 props 确实很容易。但需要一些细心和专注，停下来思考并重构，才能让代码看起来更好。

让我再举一个例子

<Circle
 x={x}
 y={y}
 radius={radius} 
/>

// center = {x,y}
<Circle
 center={center}
 radius={radius}
/>

我将 x 和 y 抽象为中心对象，这使得代码更加整洁。

4. 使用 Promises 抽象应用程序特定的 API 调用

不要直接在组件中编写 API 调用。将获取调用抽象为函数。

以下是呈现评论列表的代码。

案例 1

const CommentList = ({ postId }) => {

  const {commentList, setCommentList} = useState([])

  useEffect(()=>{
    fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      body: { postId }
    })
    .then(response => response.json())
    .then(commentList => setCommentList(commentList))  
  }, [])

  return (
    <>
      {comments.map(comment=>(
        <Comment
           author={comment.author}
           text={comment.text}
        />
      ))}
    </>
  )
}

案例 2

const CommentList = ({ postId }) => {

  const {commentList, setCommentList} = useState([])

  useEffect(()=>{
    getCommentList(postId).then((commentList)=>{
      setCommentList(commentList)
    })  
  }, [])

  return (
    <>
      {comments.map(comment=>(
        <Comment
           author={comment.author}
           text={comment.text}
        />
      ))}
    </>
  )
}

const getCommentList = (postId) => {
  return new Promise((resolve) => {
    fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
      body: { postId } 
    })
    .then(response => response.json())
    .then(commentList => resolve(commentList))
    .catch(err=>console.log(err))
  })
}

在情况 2 中，当提取调用的细节被提取出来并抽象为一个新函数时，用于在帖子中呈现评论的 React 组件看起来更加简洁。

为了使您的代码更加有条理，您可以将所有这些特定于应用程序的 API 调用放入单独的文件中，以减少反应组件中的混乱。

结论

不要不假思索地开始编写代码，而要花足够的时间来设计组件、它们的职责、它们之间的层次结构、道具、状态等。这将为您以及团队中的其他开发人员节省大量的时间和精力。

所以保持简短、甜蜜和简单，你应该没问题:)

PS：如有任何未尽事宜，欢迎在评论区补充。

文章来源：https://dev.to/jithinks/writing-clean-react-code-2mcm