了解React中的类组件和函数组件

前言

React 的核心思想就是组件化，相对于 Vue 来说，React 组件更加灵活和多样，可以分为两大类：函数组件和类组件。

类组件

在 React 中类组件 就是使用class语法创建的组件

类组件的定义主要有两点，要继承于 react 导出的 Component 和 render 函数的使用。

例子

首先使用 class 开头定义类名，类名开头使用大写
然后必须继承 React.Component 父类
在类里面必须使用 render 函数，函数内返回 UI 结构

js 复制代码

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

在类组件中可以定义自己的状态和事件，也拥有组件生命周期，可以进行交互，它是有状态的组件。

js 复制代码

import React,{Component} from 'react' 
export default class App extends Component {
  name = '小明'
  clickButton = ()=> {
   console.log(this.name)
  }
  componentDidMount() {
    console.log('componentDidMount')  
  }
  render(){
    return(
      <div>Hello {this.name}<div/>
      <button onClick={this.clickButton}>点击</button>
    )
  }
}

生命周期

组件的生命周期可以被分为3个阶段：挂载阶段、更新阶段、卸载阶段

挂载阶段 在这个阶段，组件被创建，执行初始化，并被挂载到 DOM 中，完成组件的第一次渲染
更新阶段 组件被挂载到 DOM 之后，props 和state 都可以引起组件的更新。props 引起的组件更新，本质上是由渲染该组件的父组件引起的，无论 props 是否改变，当父组件的 render() 方法每一次被调用时，都会导致组件的更新。State 引起的组件更新，则是通过调用 this.setState() 修改组件的 state 来触发的。因此，父组件调用 render 方法或者调用 this.setState 都会引起组件的更新
卸载阶段 统一卸载组件以及 DOM 元素

componentDidMount

在组件被挂载在DOM之后调用，而且只会被调用一次。这个时候已经获取到了DOM结构，因此依赖DOM节点的操作就可以放在这个方法里面去实现。

componentDidUpdate

在组件更新之后被调用，可以作为操作更新后的DOM的地方。该方法的两个参数prevProps、prevState代表组件更新前的props和state。

componentWillUnmount

会在组件被卸载前调用，可以在这里执行一些清理工作。

setState

React 类组件提供一个函数 setState({需修改数据})，可以更新数据和视图。

js 复制代码

import React,{Component} from 'react' 
export default class App extends Component {
  state = {
      num: 0
  }
  name = '小明'
  clickButton = ()=> {
   this.setState({
       num: this.state.num + 1
   })
  }
  render(){
    return(
      <div>Hello {this.name}<div/>
      <button onClick={this.clickButton}>点击</button>
    )
  }
}

函数组件

函数组件就是使用 JS 函数（普通，箭头）创建的组件，在 React16.8之前的函数组件都是无状态组件，在 React16.8后，Hooks 出现可以给函数提供状态，现在的函数组件也可以有状态了。

有状态和无状态组件区别

无状态组件由于不用进行状态维护，只需要做好渲染工作，性能较好
有状态组件可以使用数据和生命周期，功能较强

例子

函数里使用 return 返回 UI结构，表示该组件，和类组件中 render 函数返回的内容一样。

js 复制代码

import React from 'react'

export default const Header = ()=> {
    return (
      <div>Hello Header!<div/>
    )
}

useState()

当我们想要在函数组件中添加状态管理，可以使用 useState()

首先要从 react 中导入 useState
使用 useState 声明一个状态变量和一个用于更新该状态的函数

js 复制代码

import React, { useState } from 'react'; 
function FunComponent() { 
    const [count, setCount] = useState(0); 
    
    const updata = ()=> {
        setCount(count + 1);
    }
    return ( 
        <div> 
            <p>Count: {count}</p> 
        </div> 
    ); 
}

总结

利用组件将页面按照界面功能进行拆分，每一块界面都拥有自己的独立逻辑，这样可以提高项目代码的可维护性
React 组件可以分为类组件和函数组件
从 React16.8之后，Hooks 的出现给函数提供状态，函数组件也可以成为有状态的组件，去进行数据的交互操作