React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React函数组件与类组件

React函数组件与类组件使用及优劣对比

作者:皛心

本文主要介绍了React函数组件与类组件使用及优劣对比,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一、类组件的问题

自从React推出Hooks之后,函数组件写法大行其道,而类组件写法日渐式微。为什么会这样呢? 我觉得有以下三个原因:

原因一、因为this带来的问题:

有一个著名的案例展示了类组件this带来的问题,下面我将其本土化复现一下这个案例。

import React from "react"

const ProfileFunction: React.FC<{goods:string}> = (props) => {
    const showMessage = () => {
        alert(`你下单的是“${props.goods}”!` )
    }
    const handleClick = () => {
        setTimeout(showMessage, 3 * 1000)
    }
    return (
        <button onClick={handleClick}>购买</button>
    )
}

class ProfileClass extends React.Component<
    { goods: string },  // props 类型
    {}  // state 类型
> {
    showMessage = () => {
        alert(`你下单的是“${this.props.goods}”!` )
    }
    handleClick = () => {
        setTimeout(this.showMessage, 3 * 1000)
    }
    render() {
        return <button onClick={this.handleClick}>购买</button>
    }
}


export default class App extends React.Component {
    state = {
        goods: '苹果',
    };
    render() {
        return (
            <>
                <label>
                    请选择:
                    <select
                        value={this.state.goods}
                        onChange={e => this.setState({ goods: e.target.value })}
                    >
                        <option value="苹果">苹果</option>
                        <option value="香蕉">香蕉</option>
                        <option value="西瓜">西瓜</option>
                    </select>
                </label>
                <h1>{this.state.goods}</h1>
                <p>
                    <ProfileFunction goods={this.state.goods} />
                    <b> (function)</b>
                </p>
                <p>
                    <ProfileClass goods={this.state.goods} />
                    <b> (class)</b>
                </p>
            </>
        )
    }
}

这里有在线案例,有兴趣的朋友可以在线体验一下这个案例。

问题描述

问题解析

粗看函数组件和类组件的代码,都是返回一个按钮,该按钮3秒(模拟网络延迟)后会弹出一个alert提示用户下单的商品。为什么结果不一致呢? 参数props本身是不可变的,函数组件中的showMessage在3秒延迟后拿到的仍然是原来的props.goods。 但是类组件中实例的this是可变的,类组件中的showMessage在3秒延迟后去拿this.props.goods时,由于this发生了变化,所以造成取到的值不是原来的值。

原因二、类组件代码量比函数组件多:

这个从上面的案例中可见一斑,同样功能的函数组件代码量比类组件少一些。

原因三、类组件过于臃肿不易拆分:

类组件和函数组件最大的不同还在于代码思路方面的不同。类组件是面向对象编程思维方式,函数组件是面向过程编程思维方式。React的设计思路更推崇组合,而不是继承。在类组件中大量使用继承会造成组件过重,功能难以拆分。

二、函数组件的问题

函数组件以前被叫做无状态组件,就是因为函数组件内部不能保存state。自从react官方推出各类hooks后,函数式组件变得越来越流行。react官方宣称将来会推出更多hooks以实现所有类组件的功能,不过这个flag立了挺久的,至今还有很多没有实现。 下面来按生命周期的顺序盘点一下类组件的方法与函数组件对应的hooks。

挂载阶段:getDerviedStateFromProps VS 无

挂载阶段:UNSAFE_componentWillMount VS 无

挂载阶段:componentDidMount VS useEffect

render:

生命周期,更新阶段:UNSAFE_componentWillRerciveProps VS 无

生命周期,更新阶段:getDerviedStateFromProps VS 无

同挂载阶段的同名方法一样。

生命周期,更新阶段:shouldComponentUpdate VS memo、useMemo、useCallback

生命周期,更新阶段:UNSAFE_componentWillUpdate VS 无

render:

同挂载阶段一样。

生命周期,更新阶段:getSnapshotBeforeUpdate VS 无

生命周期,更新阶段:componentDidUpdate VS 无

生命周期,卸载阶段:componentWillUnmount VS useEffect

其他,错误边界:componentDidCatch、static getDerivedStateFromError VS 无

三、总结

函数组件和类组件各有优势。类组件功能最为完备和强大,某些特殊用途(如错误边界)组件只能写成类式组件。函数组件没有this困扰且代码简洁,大部分的普通组件都可以写成函数组件。

到此这篇关于React函数组件与类组件使用及优劣对比的文章就介绍到这了,更多相关React函数组件与类组件 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文