React -- 函数式和类式组件

最新推荐文章于 2024-01-16 17:45:00 发布

Sco_Jing1031

最新推荐文章于 2024-01-16 17:45:00 发布

阅读量791

点赞数 3

分类专栏： React与Vue 文章标签： react.js javascript 组件化前端 1024程序员节

本文链接：https://blog.csdn.net/m0_47109503/article/details/120308958

版权

React与Vue 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

欢迎学习交流！！！
持续更新中…

文章目录

模块与组件

模块与组件

模块：

向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率

组件：

用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

模块化：
当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件化：
当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

组件规则注意事项

组件类的第一个首字母必须大写
组件类必须有 render 方法
组件类必须有且只有一个根节点
组件属性可以在组件的 props 获取
- 函数需要声明参数：props
- 类直接通过 this.props

函数式组件（无状态）

名字不能用小写
- React 在解析的时候，是以标签的首字母来区分的
- 如果首字母是小写则当作 HTML 来解析
- 如果首字母是大小则当作组件来解析
- 结论：组件首字母必须大写

注意：必须要有结束标签，如<MyComponent />或<MyComponent><MyComponent />

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom  用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel  用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script type="text/babel">
        // 1. 创建函数式组件
        function MyComponent() {
            console.log(this)  //undefined babel编译之后会开启严格模式（JS5中禁止this指向window）
            return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
        }
        // 2. 渲染组件到页面
        ReactDOM.render(<MyComponent />,document.getElementById('test'))
        /*
            执行了ReactDOM.render(<MyComponent />....之后发生了什么？
                1. React解析组件标签，找到MyComponent组件
                2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，呈现在页面当中
        */
    </script>
</body>

类方式组件（有状态）

有关类：

类中的构造器不是必须写的，要对实例进行一些初始化的操作，比如添加指定属性时才写。
如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的
类中所定义的方法，都是放在了类的原型对象上，供实例去使用

在React中，定义/创建一个类必须要继承一个内置类Component

    <script type="text/babel">
        // 1. 创建类式组件    -->类名就是组件名
        class MyComponent extends React.Component{
            // 构造器中必须调用super，但构造器可以省略，render必须写且必须有返回值
            render () {
                // render放在哪里？   ---类的原型对象上，供实例使用 
                // render中的this是谁？    ---MyComponent的实例对象即MyComponent组件实例对象
                return <h2>我是用类定义的组件（适用于【复杂组件】的定义）</h2>
            }
        }
        // 2. 渲染组件到页面     (render在此处仅仅是重名了)
        React.render(<MyComponent />,document.getElementById('test'))
    </script>

Sco_Jing1031

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
React -- 函数式和类式组件

欢迎学习交流！！！持续更新中…文章目录模块与组件组件规则注意事项函数式组件（无状态）类方式组件（有状态）组件的三大属性state 属性props 属性refs 属性组件的生命周期模块与组件模块：向外提供特定功能的js程序, 一般就是一个js文件为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。作用：复用js, 简化js的编写, 提高js运行效率组件：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)为什么要用组件：一个界面的功能更复杂作.
复制链接

扫一扫