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

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

一、函数组件

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

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

       函数组件的代码相对来说是简洁的，专注于render，且组件不需要实例化，整体渲染得到了提升，并且视图和数据解耦分离，输出只取决于输入
       因为没有state ，只能通过props获取属性内容并实现组件的更新，无生命周期

import React from 'react'

export default function App(){
  render(){
    return (
      <div>Hello World!<div/>
    )
  }
}
1
2
3
4
5
6
7
8
9

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

• React 元素：
• 数组或者Fragments：
  使render方法可以返回多个元素
• Portals：
  可以渲染子节点到不同的DOM子树上
• 字符串或数值类型：
  在DOM中会被渲染为文本节点
• 布尔类型 或者 null：
  什么都不渲染

二、类组件

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

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

// 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/>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

类组件特点：

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

手动绑定this的方法：

• 可以在构造函数中完成绑定
• 可以在调用的时候使用method.bind(this)完成绑定
• 使用箭头函数绑定

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

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