react中的无状态函数式组件

喜欢ヅ旅行 2022-05-24 01:37 200阅读 0赞

无状态函数式组件，顾名思义，无状态，也就是你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件，接收Props，渲染DOM，而不关注其他逻辑。

其实无状态函数式组件也是官方比较推荐的一种方式，尽量让底层的组件变成无状态函数式组件，也即组件尽量只用来显示数据，把数据操作的逻辑都放在顶层，然后从顶层把数据传到底层

嗯，看个例子，使用类组件和无状态函数式组件两种方法进行对比

顶层关键代码：

import React,{Component} from 'react';
    import ReactDOM from 'react-dom';
    import Bottom from './component/props'
    
    ReactDOM.render(
        <div>
            <Bottom name="donna"/>
        </div>
        ,
    document.getElementById('root')
    )

底层代码，使用无状态函数式组件实现

import React,{Component} from 'react';
    export default  function Bottom(props){
        let{name} = props
        const sayHi = () => {
            console.log(`Hi ${name}`);
        }
        return (
            <div>
                <h1>Hello, {name}</h1>
                <button onClick ={sayHi}>Say Hi</button>
            </div>
        )
    }

然后看类式组件的实现方法

import React,{Component} from 'react';
    
    export default  class Bottom extends Component{
        constructor(props){
            super(props);
            this.sayHi = this.sayHi.bind(this)//记得绑定this，否则this指向可能会出错
        }
    
        sayHi(){
            let {name} = this.props
        console.log(`Hi ${name}`);
        }
        render(){
            let {name} = this.props
            let{sayHi} =this;
            return(
                <div>
                    <h1>{`Hello, ${name}`}</h1>
                    <button onClick ={sayHi}>Say Hi</button>
                </div>
            )
        }
    
    }

对比下来，确实无状态函数组件代码量少（轻量），最重要的是，函数式组件简单啊，类式组件一不小心就出错了。

函数式组件更容易理解。当你看到一个函数组件时，你就知道它的功能只是接收属性，渲染页面，它不执行与UI无关的逻辑处理，它只是一个纯函数。而不用在意它返回的DOM结构有多复杂。

不需要声明类，可以避免大量的譬如extends或者constructor这样的代码

不需要显示声明this关键字，在ES6的类声明中往往需要将函数的this关键字绑定到当前作用域，而因为函数式声明的特性，我们不需要再强制绑定

无状态组件不支持 "ref"  
有一点遗憾的是无状态组件不支持 "ref"。原理很简单，因为在 React 调用到无状态组件的方法之前，是没有一个实例化的过程的，因此也就没有所谓的 "ref"。