React 函数式组件和类式组件区别

React 中组件主要分为函数式组件和类式组件两种类型。

一、函数式组件

函数式组件 (也称无状态组件，没有内部状态state，16.8版本推出hooks后可使用useState来管理) 就是通过函数编写形式去实现一个React组件，是React中定义组件最简单的方式。

javascript">// 定义函数式组件
import React from 'react'

function MyComponent() {
    return <div>我是函数式组件...</div>
}    

export default MyComponent

二、类式组件

类式组件就是通过ES6类的编写形式去编写组件，该类必须继承React.Component 如果想要访问父组件传递过来的参数，可通过 this.props方式去访问。

javascript">// 类式组件
import React, { Component } from 'react'

class MyComponent extends Component {
    constructor(props) {
        super(props)
    }

    render(){
        return <div>我是类式组件...</div>
    }
}

export default MyComponent

说明：类式组件中必须实现render方法，在return中返回React对象。

三、函数式组件和类式组件的区别

特性	函数式组件	类式组件
语法	函数	类
内部状态 (state)	不支持	支持
生命周期方法	不支持 (需借助 hooks)	支持 (componentDidMount, componentDidUpdate 等)
引入外部状态 (props)	支持	支持
副作用处理 (如 useEffect)	支持	支持
代码复用	可以使用 Hooks 实现	可以使用继承、高阶组件等方式实现
状态管理工具	支持	支持
性能	通常更轻量，React 16.8+ 中引入的 Hooks 使其更强大	在某些情况下可能更快，但具体取决于实现方式

说明：React Hooks 是对 React 函数式组件的一种扩展，通过一些特殊的函数，让函数式组件拥有类式组件才拥有的能力。常用的官方 hooks 有 useRef、useState、useEffect等。

函数式组件和类式组件管理状态方式如下：

javascript">// 类式组件 - 使用 setState 管理状态
import React, { Component } from 'react'

class MyComponent extends Component {
    state = {
        name: '张三丰'
    }

    changeName = () => {
        this.setState({
            name: '王新焱'
        })
    }

    render() {
        return (
            <div>我是{this.state.name}</div>
            <button onClick={this.changeName}>修改姓名</button>
        )
    }
}

export default MyComponent


// 函数式组件 - 使用 hooks 管理状态
import React, { useState, useEffect } from 'react'

function MyComponent() {
    
    // hooks
    let [name, setName] = useState('张三丰')
    
    // hooks -对象形式
    let [name2, setName2] = useState({name: '张三丰',age: 180,address: '武当山'})
    
    // 修改姓名
    function changeName() {
        setName(() => '王新焱')
        setName2(() => ({name: 'wxy', age: 30, address: '黄冈'}))
    }

    // hooks
    useEffect(()=> {
        console.log('函数式组件生命周期...')
    },[])

    return (
        <div>
            <p>我是函数式组件</p>
            <button onClick={changeName}>修改姓名</button>

            <div>我的名字是：{name}</div>
            <div>我的名字是：{name2.name},我的年龄：{name2.age} 我的地址： {name2.address}</div>
        </div>
    )
}

export default MyComponent

四、未来趋势

”类组件“的模式并不能很好的适应未来的趋势，主要是以下几点

①.this的模糊性

②.业务逻辑散落在生命周期中

③.React 的组件代码缺乏标准的拆分方式。而使用 Hooks 的函数组件可以提供比原先更细粒度的逻辑组织复用，且能更好地适应时间切片与并发模式。

React 16.8 + 版本推出了Hooks 使函数式组件拥有类组件的功能，比如生命周期阶段

componentDidMount VS useEffect

componentDidUpdate VS useEffect

shouldComponentUpdate VS useMemo

函数式组件即可使用替代方案来实现类式组件中的生命周期钩子函数。

从未来趋势看，由于官方React Hooks的推出，生命周期概念的淡出，函数组件可以完全取代类组件。其次继承并不是组件最佳的设计模式，官方更推崇”组由于继承“的设计概念，所以类组件在这方面的优势也在淡出，函数组件成了社区未来主推的方案，函数组件本身轻量简单，在hooks的基数上提供了比原先更细粒度的逻辑组织与复用，更能适应React的未来发展。