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