React中的类组件和函数组件（详解）

React的核心思想就是组件化，相对于Vue来说，React的组件化更加灵活和多样。主要可以分为两大类：函数组件 ，类组件，这两大类组件的名称必须是大写字母开头

一、函数组件

函数组件通常是function进行定义的函数，这个函数会返回和类组件中render函数返回一样的内容
函数组件的特点：

没有生命周期，会被更新并挂载，但是没有生命周期函数
没有this（组件实例）
没有内部状态（state）

函数组件的代码相对来说是简洁的，专注于render，且组件不需要实例化，整体渲染得到了提升，并且视图和数据解耦分离，输出只取决于输入

因为没有state ，只能通过props获取属性内容并实现组件的更新，无生命周期

js 复制代码

import React from 'react'

export default function App(){
  render(){
    return (
      <div>Hello World!<div/>
    )
  }
}

注意：

当render被调用的时候，会返回以下类型之一（同时还会检查this.props,this.state ）

React 元素：

数组或者Fragments：
使render方法可以返回多个元素

Portals：
可以渲染子节点到不同的DOM子树上

字符串或数值类型：
在DOM中会被渲染为文本节点

布尔类型或者 null：
什么都不渲染

二、类组件

类组件的定义有两点要求，第一是需要继承自React.Component，第二是必须实现render函数
定义类组件的步骤：

constructor是可以选择的，通常需要在这里初始化一些数据
this.state中维护的就是我们组件内部的数据
render方法是class组件中唯一必须实现的方法

js 复制代码

// index.js
import React from 'react'
import ReactDom from 'react-dom'

import App from 'App.js'

ReactDOM.render(<App />,document.getElementById('root'))


// App.js
import React,{Component} from 'react' 
export default class App extends Component {
  render(){
    return(
      <div>Hello World<div/>
    )
  }
}

类组件特点：

状态state是在constructor中初始化的
成员函数不会自动绑定this，需要手动绑定才能获得当前组件实例对象

手动绑定this的方法：

可以在构造函数中完成绑定

可以在调用的时候使用method.bind(this)完成绑定

使用箭头函数绑定

state的变化会影响组件的渲染，因此不能把所有的变量都放到state中，不然会造成一定的性能损失，下面情况都不应该作为一个状态放到state中：

通过props获取
该变量不在render中使用
整个过程不会发生改变
变量可以通过props和 state两者计算得出