React中类组件和函数组件

React中类组件和函数组件

1.组件的产生

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。我们可以将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。以便提高组件的复用性，优化代码。

2.类组件

2.1 声明方式

通过ES6中类的语法来编写组件，该类必须要 extends React.Component，由此完成类组件的创建；

class MyComponents extends React.Component {
  render() {
    return <h1>Hello Word！</h1>;
  }
}

2.2 类组件的特点

• 在类组件中必须要有constructor()函数，用于定义组件内部变量，默认创建一个空的构造函数，该函数接收参数(props)。想要访问父组件传递过来的参数，可通过this.props的方式去访问；
• 类组件中有生命周期钩子函数，可以在特定的钩子函数中执行特殊操作；例如接口请求、事件监听和绑定定时器等通常放到componentDidMount()钩子函数中，此时组件已经挂载，DOM树也构建完毕。而移除事件监听和清除定时器要放到componentWillUnmount()钩子函数中，避免发生内存泄露。
• 在类组件中有state状态存储，当要改变变量值时通过setState()更改；
• 类组件的性能消耗比较大，需要创建类组件的实例，且不能销毁；

3.函数组件

3.1声明方式

通过编写函数的形式来创建组件，将编写完成的组件通过return出去；定义函数组件时定义props形参，使用时props就可以接收到自定义的属性值；

// 普通函数组件
function myComponents(props) {
  return <h1>Hello Word！</h1>;
}

// ts中编写函数组件
// 要使用React中定义的FC类型
const MyComponents: React.FC = ()=> {
   return <h1>Hello Word！</h1>;
}

3.2函数组件特点

• 函数组件中是没有this的，通过props传递过来的数据是不变的，同时也不没有生命周期钩子函数；
• 函数组件在Hook没出来之前是无状态的，在React16后增加了Hook来保存数据状态；
• 函数式组件性能消耗小，不需要创建实例，渲染的时候就执行一下，得到返回的 react 元素后就直接把中间量全部都销毁。

4.类组件和函数组件的区别

通过上面对于两种生命组件的方式和特点，可以看出他们主要区别是：

• 类组件有生命周期，函数组件没有；
• 类组件依赖class创建，函数组件通过return返回创建；
• 类组件有状态存储，函数组件需要依赖Hook完成状态存储；
• 类组件中有this指向问题需要特别注意，函数组件则没有this；
• 类组件消耗大，需要创建实例，且不能销毁；函数组件消耗少，得到结果就销毁；

5.总结

1. 函数组件语法更短、更简单，这使得它更容易开发、理解和测试。
2. 类组件也会因大量使用 this 而让人感到困惑。使用功能组件可以很容易地避免这种缺点，保持代码整洁。
3. 当业务逻辑复杂，用类组件更易于我们维护，也相应降低了开发成本。
4. 函数组件多用于简单功能模块封装，便于复用；