react函数组件和类组件

定义组件有两个要求：

1. 组件名称必须以大写字母开头
2. 组件的返回值只能有一个根元素

函数组件

function Welcome (props) {
  return <h1>Welcome {props.name}</h1>
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

函数组件接收一个props对象，并返回一个React元素

类组件

class Welcome extends React.Component {
  render() {
    return (
      <h1>Welcome { this.props.name }</h1>
    );
  }
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

• 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。
• 所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
• React是单项数据流，父组件改变了属性，那么子组件视图会更新。
• 属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改
• 组件的属性和状态改变都会更新视图。

区别

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。若不考虑React16.8后增加的Hooks属性，为了提高性能，尽量使用函数组件。

区别	函数组件	类组件
是否有 this	没有	有
是否有生命周期	没有	有
是否有状态 state	没有	有

React 在 16.8 版本后对 Function Component 增加 Hook 的特性，使得函数组件拥有了终于自己的一套私有状态的管控方案。

在开发方式就有很大的不同，主要分为以下几点：

区别	类组件	函数组件
开发模式	FP 函数式编程	OOP 面向对象编程
生命周期	useEffect	useLayoutEffect(Hook 特性)
this	不存在	存在
性能优化处理	利用 React.memo 缓存渲染结果（多次触发 Render 情况下只取最后的渲染结果）	采用 ShouldComponentUpdate 进行状态浅比较，控制是否更新
设计模式	组合	继承

虽然最终组件的显示结果基本没有什么差异（非极端情况下），但是函数组件相比类组件而言更为容易管控，测试，复用性更强。

利用 Hook 特性，函数可以将有关联的业务逻辑集中开发，而类组件需要根据对应的构造函数进行业务开发，业务逻辑有时会比较离散，通过生命周期包含的业务逻辑不好管控。

函数组件更具有未来趋势，类组件缺乏未来发展趋势的原因主要有：

• this 具有模糊性，有的时候对 this 的指向认知可能不是那么的友好；
• 业务逻辑散落在生命周期中，失去了集中性，对后期的迭代维护需要一定的精力；
• 组件复用性性低，缺乏标准的拆分方式；