React学习day4模块和组件

最新推荐文章于 2022-12-01 00:10:24 发布

我在东软打代码

最新推荐文章于 2022-12-01 00:10:24 发布

阅读量73

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_46758732/article/details/116453800

版权

React 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

模块和组件

模块

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

组件：

用来实现局部功能效果的代码和资源的集合（html、css、js、img、video、font…)
作用：复用编码，简化项目编码，提高运行效率

React面向组件编程

1、使用React开发者工具调试

React Developer Tools 插件概述

React Developer Tools插件是什么？React Developer
Tools是一款由facebook开发的有用的Chrome 浏览器扩展，可以通过 Chrome Web存储获取。使用 Chrome
Devtools 进行调试时，可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。添加react
developer tools到chrome，是对chrome开发工具的React调试工具。React的开发工具是开源Chrome
DevTools延伸反应的JavaScript库。它允许你检查React在Chrome开发者工具组件的层次结构（原名WebKit Web Inspector）。你会得到新的标签要求在你的Chrome DevTools反应。这表明你的根反应组件在页面渲染，以及他们最终渲染组件。

到谷歌应用商店下载React Develop Tools，不过这得访问外网才能获取到。
在这里插入图片描述

在这里插入图片描述
2、React中定义组件

函数式组件
1）根据jsx语法规则，函数的组件名首字母要大写
2）且标签要闭合例如
3）函数必须要有返回值

ReactDOM.render(<Demo/>,document.getElementById('test'))

主要代码：

//1、创建函数式组件
    function Demo(){
        return <h1>haha</h1>
    }
    //2、渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数式组件</title>
</head>
<body>
<!--准备好一个容器-->
<div id="test"></div>
<!--引入react核心库-->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!--引入react-dom,用于支持react操作DOM-->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!--引入babel，用于将jsx转为js-->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
   //1、创建函数式组件
    function Demo(){
        return <h1>haha</h1>
    }
    //2、渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

</body>
</html>

运行结果：

在这里插入图片描述
如果你安装了React Develop Tools，按F12，页面右边就会出现Compoents（组件），如上图，左边页面渲染的内容“haha"就是Demo组件里面的内容。

类式组件

1）回顾类的基本知识
新建xxx.html,在<script><script/>里面创建一个类class xx{ }
并且创建该类的实例对象const a = new xx（）
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复习类的基本知识</title>
</head>
<body>
<script type="text/javascript">
    //创建一个Person类
    class Persion{
      //构造器方法
        constructor(name,age){
            //构造器中的this是类的实例对象
            this.name = name;
            this.age =age;
        }
    }
    //创建一个Persion的实例对象
    const p1 = new Person('王一博',24)
    const p2 = new Person('肖战',29)
    console.log(p1);
    console.log(p2);
</script>
</body>
</html>

查看运行结果：
在这里插入图片描述
类的一般方法：xx（）{}

<script type="text/javascript">
    //创建一个Person类
    class Persion{
      //构造器方法
        constructor(name,age){
            //构造器中的this是类的实例对象
            this.name = name;
            this.age =age;
        }
        //一般方法
        speack(){
            console.log('我叫',this.name,'我今年',this.age,'岁');
        }
    }
    //创建一个Persion的实例对象
    const p1 = new Person('王一博',24)
    const p2 = new Person('肖战',29)
    console.log(p1);
    console.log(p2);
    p1.speack();
    p2.speack();
</script>

查看运行结果：
在这里插入图片描述
继承

//创建一个Student类，继承Person类
    class Student extends Person{

    }
    const s = new Student('肖战',29)
   console.log(s);

查看运行结果：
在这里插入图片描述
当子类里面的属性多于父类时


 //创建一个Student类，继承Person类
    class Student extends Person{
         constructor(name,age,grade){
         //super必须写在this前面，否则报错
             super(name, age);
             this.grade = grade
         }
    }
    const s = new Student('肖战',29,'努力的演员')
   console.log(s);

查看运行结果
在这里插入图片描述总结：
1、类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
2、如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
3、类中定义的方法，都是放在了类的原型对象上，提供实例去使用。

2）类式组件
执行ReactDOM.render(<MyComponent/>,document.getElementById('test'))后，React解析组件标签，找到了MyComponent组件，发现组件是使用类定义的，然后new出该类的实例，并通过该实例调用到原型上的render方法，将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
主要代码：

 //1、创建类式组件
    class MyComponent extends React.Component{
        render(){
            //render 是放在MyComponent的原型对象上，供实例使用。
            //render  中的this是MyComponent的实例对象。
            return <h2>类定义组件</h2>
        }
    }
    //2、渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))

查看运行结果：
在这里插入图片描述

我在东软打代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习day4模块和组件

模块和组件模块向外提供特定功能的js程序，一般就是一个js文件随着业务逻辑增加，代码越来越多且复杂，所以要拆分模块作用：复用js，简化js的编写，提高js运行效率组件：用来实现局部功能效果的代码和资源的集合（html、css、js、img、video、font…)作用：复用编码，简化项目编码，提高运行效率React面向组件编程1、使用React开发者工具调试React Developer Tools 插件概述React Developer Tools插件是什么？React D
复制链接

扫一扫