js框架----react.js 2 模块、组件

最新推荐文章于 2024-04-22 14:26:56 发布

laufing

最新推荐文章于 2024-04-22 14:26:56 发布

阅读量160

点赞数

分类专栏：前端js 文章标签： react.js javascript component

本文链接：https://blog.csdn.net/weixin_45228198/article/details/120387970

版权

前端js 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

模块、组件

概念
组件化编程
复杂组件、简单组件

概念

模块：一个大的js文件，拆分成多个小的js文件，每个小文件完成一个功能。
作用：简化js编写、复用js，提高js的运行效率
应用的js以模块化的方式来编写，即模块化
组件：完成局部功能的代码和资源的集合（html/css/js/images…）
作用：复用组件、提高开发效率
一个应用以多个组件来实现，就是组件化

组件化编程

安装react开发者工具

点击右上角—更多工具----扩展程序-----点击左上角：
在这里插入图片描述

在这里插入图片描述
以上为在线安装。

离线安装需下载React Developer Tools，然后打开开发者模式，离线安装。
极简插件下载

安装完成后，固定到浏览器顶端：点击右上角扩展图标，找到React Developer Tools，固定
此时图标没有颜色，只需打开一个正常编译发布的react网站即可，如美团
在这里插入图片描述

按住shift+点击刷新----->强制刷新(忽略缓存)
在这里插入图片描述
只需在项目的根目录下，放入一个favicon.icon图标
在线制作icon
参考博客

在这里插入图片描述

函数式组件

使用函数方式定义组件，适用简单组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first component</title>
</head>
<body>
    <!-- import kernel lib  -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- create container -->
    <ul id="list"></ul>

    <script type="text/babel">
        // 创建函数式组件
        //首字母大写
        function MyComponent(){
            return <div>这是我的第一个函数式 组件，适用简单的组件定义</div>
        }
    
        // 渲染组件，大写首字母的闭合标签
        ReactDOM.render(<MyComponent/>,document.getElementById("list"))
        //React 解析组件标签，找到Mycomponent组件
        //调用函数，将返回的虚拟DOM，转为真实DOM，呈现页面
    </script>
</body>
</html>

React Deve tools无法进入这个页面：
在这里插入图片描述
this的指向：

//定义一个普通的函数
//this is window
function func(){
	console.log(this)//window
}
组件里指向undefined,babel转换开启严格模式，禁止this指向window

babel试一试
在这里插入图片描述

类组件

使用类方式定义组件

类知识的回顾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复习类的知识</title>
</head>
<body>
    <script type="text/javascript">
        // 定义一个Person类
        class Person{
            // 构造器、构造函数，非必须，需要传入参数时，创建
            constructor(name,age){
                // this is current instance
                this.name = name;
                this.age = age
            }
            // 定义方法，注意没有function关键字
            speak(){//speak方法在哪？--》Prototype原型对象中，给实例对象使用
                // 反撇号
                //实例对象调用speak，this指向为current instance
                //Aobj.speak.call(Bobj),this 指向为Bobj
                console.log(`my name is ${this.name}, i am ${this.age} years old`)
            }
        }

        //定义一个Student类，继承Person类
        class Student extends Person{
            //构造器方法
            constructor(name,age,sex){
                //super继承父类的代码，必须写在第一位
                super(name,age)
                
                //写自己的代码
                this.sex = sex
            }

            //重写继承的父类的方法,直接继承时，在原型链中查找，自己重写则出现在原型对象中Prototype/__proto__
            speak(){
                console.log(`my name is ${this.name},i'am ${this.age} years old, ${this.sex}`)
                console.log("I am from China")
            }
            //定义的方法在原型对象中，供实例调用
            eat(){
                console.log(`${this.name}正在吃饭`)
            }
        }

        // instantiate
        const p1 = new Person("jack",19)
        const p2 = new Person("tom",20)

        console.log(p1)
        console.log(p2)
        p1.speak() //
        p2.speak()

        const s1 = new Student("小张",23,"Male")
        s1.speak()
        s1.eat()

    </script>
</body>
</html>

在这里插入图片描述
实例在调用方法时，先找原型对象，没有再找原型链

类组件的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类组件</title>
</head>
<body>
    <!-- import kernel lib  -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- create container -->
    <ul id="list"></ul>

    <script type="text/babel">
        //1.创建 类组件
        //首字母大写
        class MyClassComponent extends React.Component{
            //必须有render方法
            render(){//放在类的原型对象上，供实例调用；this即MyClassComponent组件的实例对象
            	console.log(this)//查看属性props/refs、state
                //必须有返回值 VDOM节点
                return <div>这是类式组件，用于复杂组件的定义</div>
            }
        }
        //2.渲染类组件，大写首字母的闭合标签
        ReactDOM.render(<MyClassComponent/>,document.getElementById("list"))
        /*
        找到该组件标签，实例化类对象，对象.render，将返回的VDOM转为真实DOM，呈现页面
        */
    </script>
</body>
</html>

复杂组件、简单组件

具有状态state的组件，即为复杂组件，否则为简单组件
类组件实例的三大属性：props/refs/state

上一篇：js框架----react.js 1 下一篇：js框架----react.js 3 类组件的实例属性state

laufing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js框架----react.js 2 模块、组件

模块、组件概念组件化编程安装react开发者工具函数式组件类组件类知识的回顾类组件的定义复杂组件、简单组件概念模块：一个大的js文件，拆分成多个小的js文件，每个小文件完成一个功能。作用：简化js编写、复用js，提高js的运行效率应用的js以模块化的方式来编写，即模块化组件：完成局部功能的代码和资源的集合（html/css/js/images…）作用：复用组件、提高开发效率一个应用以多个组件来实现，就是组件化组件化编程安装react开发者工具点击右上角—更多工具----扩展程序-
复制链接

扫一扫