淘先锋技术网

首页 1 2 3 4 5 6 7

概念

  1. 模块:一个大的js文件,拆分成多个小的js文件,每个小文件完成一个功能。
    作用:简化js编写、复用js,提高js的运行效率
    应用的js以模块化的方式来编写,即模块化
  2. 组件:完成局部功能的代码和资源的集合(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