类组件和函数组件

最新推荐文章于 2024-08-03 09:04:08 发布

梦境半小时

最新推荐文章于 2024-08-03 09:04:08 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/Sitaigu/article/details/119619839

版权

本文探讨了React中的函数组件和类组件的使用。函数组件因其简洁性和易于理解的特点，成为React社区的首选，尤其是结合React Hooks后，它们能够实现类组件的大部分功能。然而，类组件仍然在特定场景下，如需要使用state、生命周期方法或ref时，发挥重要作用。随着React的发展，函数组件配合Hooks日益普及，为开发者提供了更高效和简单的开发体验。

摘要由CSDN通过智能技术生成

类组件

可以使用ES6 的Class语法来定义组件

Component类组件

import React,{Component,PureComponent} from 'react';

interface Props{};
interface State{};

export default class App extends Component<Props,State>{
    render(){
        renturn(<div>我是类组件App</div>)
    }
}

PureComponent类组件

PureComponent会自动比较新旧 state/props ，如果相同则不进行render渲染

import React,{Component,PureComponent} from 'react';

interface Props{};
interface State{};

export default class App extends PureComponent<Props,State>{
    render(){
        renturn(<div>我是类组件App</div>)
    }
}

函数组件

为什么react要选择函数组件来代替类组件呢？

优点
- 1. 原生js特点：函数式编程
- 1. 函数组件理解度，入门门槛较低，带来更多的开发者参与到react的开发中
- 1. 函数组件的出现不会影响类组件的使用
  - 老项目更新可以直接使用函数组件
- 1. 函数组件结构简单
缺点
- 类组件的特性功能函数组件无法使用
  - state的定义和修改【setState】
  - 生命周期无法使用
  - ref不能用
  - 跨组件通信不能使用
- 两种使用方式 - 对于函数组件
  - 早期 — react 16.8版本前
    - 渲染界面 - 简单
  - 现在 — react 16.8版本后
    - 函数组件 + react Hook react特性可以在函数组件使用了