7、React 组件开发：可复用组件与生命周期管理

React 组件开发：可复用组件与生命周期管理

可复用组件的构建

在 React 开发中，避免使用庞大的单体组件是非常重要的。虽然单体组件在开发初期可能是必要的起点，但随着项目的发展，将其拆分为多个小而专注的组件会带来诸多好处。

让组件函数化

在实现新组件时，如果发现组件仅使用属性值来渲染 JSX，那么将其转换为纯函数组件是个不错的选择。这样做有两个主要优点：一是明确表明组件不依赖任何状态或生命周期方法；二是提高效率，因为 React 在检测到组件是函数时，执行的工作会减少。

以下是文章中涉及的几个组件的函数化版本代码：
- 文章列表组件 ：

import React from 'react';
import ArticleItem from './ArticleItem';
export default ({
  articles,
  onClickToggle,
  onClickRemove,
}) => (
  <ul>
    {articles.map(i => (
      <ArticleItem
        key={i.id}
        article={i}
        onClickToggle={onClickToggle}
        onClickRemove={onClickRemove}
      />
    ))}
  </ul>
);

• 文章项