React中函数组件与类组件的区别

一、组件定义

函数组件

import React from 'react'

function Index(props) {
  const [value, setvalue] = useState('React')
  return (
    <div>
      {value} ----- {props.val}
    </div>
  )
}

export default Index

class类组件

import React, { Component } from 'react'

export default class Index extends Component {
  // constructor(props){
  /   ///接收props
  //   super(props)
  //   this.value = 'React'
  // }
  state={
    value:'React'
  }
  render() {
    return (
      <div>
        {this.state.value} ---{this.props.val}
      </div>
    )
  }
}

二、区别

函数组件

• 是一个纯函数，它接收一个props对象返回一个react元素
• 没有生命周期，使用hook增强函数组件
• 组件不能访问this对象
• 没有state、setState， 需要通过React.useState来定义初始值
• 直接通过{value}将变量渲染到页面上

类组件

• 需要去继承React.Component并且创建render函数返回react元素
• 有生命周期
• 有state、setState
• 需要通过{this.state.value}将变量渲染到页面上

共同点

• 组件名称必须以大写字母开头
• 属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改
• props不可修改，如果要修改只能在父组件修改，子组件接收新的props，或者通过调用父组件传递过来的可以改变state的方法，来改变父组件的状态
• props与state改变都会重新触发render ，重新渲染组件

缺点

class 组件存在的问题：

• 大型组件很难拆分和重构，变得难以测试 、
• 相同业务逻辑分散到各个方法中，可能会变得混乱
• 复用逻辑可能变得复杂，如 HOC 、Render.、Props
• 所以 react中更提倡函数式编程，因为函数更灵活，更易拆分，但函数组件太简单，所以出现了hook，hook就是用来增强函数组件功能的。