React中函数组件和类式组件

最新推荐文章于 2024-10-06 16:40:10 发布

RH_任何

最新推荐文章于 2024-10-06 16:40:10 发布

阅读量372

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/r_dong_dong_/article/details/131770591

版权

React中函数组件和类式组件

定义组件有两个要求：
组件名称必须以大写字母开头
组件的返回值只能有一个根元素

1. 函数组件

函数组件也称无状态组件，顾名思义就是通过函数编写的形式去实现一个React组件，是React中定义组件最简单的方式。
在 hooks 出现之前，react 中的函数组件通常只考虑负责UI的渲染，没有自身的状态和生命周期方法，没有业务逻辑代码，是一个纯函数。
它接收一个props对象作为参数用于接收父组件传递过来的参数，并返回一个React元素。
函数式组件通常比类组件更轻量级，因为它们没有状态和生命周期方法的开销。在大多数情况下，它们也比类组件更容易优化和测试，因为它们遵循纯函数的设计原则，输入相同则输出相同，不会产生副作用。

<script type="text/babel">/* 此处一定要写 babel */
    // 1.创建函数式组件
        function Demo(props){
            console.log(this) //此处的this是undefined，因为babel编译后开启了严格模式
            return <h2>函数组件，简单组件：{props.title}</h2>
        }
    // 渲染组件到页面
        // ReactDOM.render(Demo(),document.getElementById('app'))
        ReactDOM.render(<Demo/>,document.getElementById('app'))
        /*
            执行了ReactDOM.render(<Demo/>.......之后，发生了什么?
            1.React解析组件标签，找到了Demo组件。
            2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
        */
    </script>

2. 类式组件

类组件是通过使用ES6类的编写形式去编写组件，是一个JavaScript类，它继承自React.Component，并实现一个render方法来返回一个React元素。它通常用类声明的方式来定义。

<script type="text/babel">/* 此处一定要写 babel */
    // 1.创建类式组件
        class Demo extends React.Component{
            //render是放在哪里的? - Demo的原型对象上，供实例使用。
            //render中的this是谁? - Demo的实例对象(Demo组件实例对象)。
            render(){
                console.log(this)
                return <h2>类组件，复杂组件</h2>
            }
        }
    // 2.渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('app'))
    /*
        执行了ReactDOM.render(<Demo/>.......之后，发生了什么?
        1.React解析组标签，找到了Demo组件。
        2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
        3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
    */
    </script>