react组件定义和分类

最新推荐文章于 2024-09-19 10:51:14 发布

带脑子的CV工程师

最新推荐文章于 2024-09-19 10:51:14 发布

阅读量245

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.csdn.net/qq_36262295/article/details/113897770

react 专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了React中组件的三种形式：函数式组件、类组件和Hooks。函数组件作为无状态组件，性能高效，适用于静态内容。类组件则支持状态和生命周期方法，适合动态变化的场景。Hooks的引入让函数组件也能处理状态和副作用，简化了代码。通过对比，阐述了不同组件类型的适用场合和优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件的3种写法

函数式组件返回jsx

函数组件时静态组件 性能消耗小
(第一次渲染完成后就不会变了)
function App(props) {
  return <div>{props.title}</div>
}
export default App;

类组件动态组件性能消耗大

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0
    }
  }
  handle = () => {
    this.setState({
      n: this.state.n++
    })
  }
  render() {this组件类里的实例对象
    return <div>
      {this.props.title}
      <br />
      <span>{this.state.n}</span>
      <button onClick={this.handle}></button>
    </div>
  }
}
export default App

HOOKS

import React, { useState, useEffect } from 'react'
在函数组件种具备属性和状态啊管理
function App(props) {
  let [n, changeN] = useState(0);
  return <div>
    {props.title}
    <br />
    <span></span>
    <button onClick={() => {
      changeN(++n);
    }}>点我爱</button>
  </div>
}

组件类型

1.无状态组件(函数组件)
无状态组件是最基础的组件形式，由于没有状态的影响
所以就是纯静态展示的作用，属性(props)加上一个渲染函数(render)
2.有状态组件(函数组件)
组件内部包含状态(state)且状态随着事件或者外部的消息
而发生改变，有状态组件通常会带有生命周期(lifecycle)
3.UI组件
负责数据的渲染,通过属性props接受外部数据加上render函数
4.容器组件
axios数据的获取以及处理逻辑上的事件,不负责数据渲染
(容器组件掉接口，ui组件渲染接口的数据)
5.高阶组件
复用组件逻辑时，他们是js函数，将组件作为参数并返回一个新组件
6.回调渲染
使组件逻辑可重复用的另一个好方法是将组件子选项转换为函数