12、React 组件：从类组件到函数组件的转换

React 组件：从类组件到函数组件的转换

1. 函数组件基础

函数组件是返回 JSX 的简单函数。若需接收属性，可在函数定义中解构它们；访问属性时，可直接使用解构后的变量。例如：

function Image({ index, title }) {
  return (
    <figure>
      <img src={`//lorempixel.com/200/100/animals/${index}/`} alt={title} />
      <figcaption>
        Species: {title}
      </figcaption>
    </figure>
  );
}

这里的 Image 函数组件接收 index 和 title 属性，并返回包含图片和标题的 figure 元素。

2. 版本 2：将类方法作为工具函数

在这个版本中，我们考虑图片类有一个辅助渲染的工具方法的情况。原始的 <img /> 元素的 src 属性较长，使用工具方法可使 JSX 更简洁。

原始代码

class Image extends Component {
  get