react学习笔记_react 前端学习笔记-CSDN博客

本文链接：https://blog.csdn.net/zhaoyin1994/article/details/140834938

day:5

5.1、样式的模块化

如果项目中使用的不是less和sass，使用css则需要做样式的模块化，样式命名采用import hello='./xx/xx.modules.css的方式,对样式进行模块化处理，防止不同模块之间样式覆盖问题。

5.2 功能界面的组件化编码流程

1.拆分组件：拆分界面，抽取组件

2.实现静态组件：使用租金按实现静态页面效果

3.实现动态组件

3.1动态显示初始化数据（数据类型、数据名称、保存在哪个组件？）

3.2交互（从绑定事件监听开始）

day:6

6.1、react开发者调试工具

安装：因为谷歌浏览器不能打开应用商店，我这里通过本地文件导入的方式安装。

tips:react代码在网页跑起来显示的图标是这种颜色的，一般是没有经过打包的，打包部署后应该是正常的react图标icon颜色。

效果：安装之后会多出两个小功能

component：观察网页有多少个组件

profiler:记录网站性能，渲染用了多久，那个组件加载时间长

6.2 react中的函数式组件

组件包含：html结构、css样式、js交互等。这里定义一个简单组件，至少包含了html(通过函数返回，react调用函数做了渲染）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 根节点 -->
     <div id="root"></div>
    <!-- 导入 -->
    <script src="./lib/react.js"></script>
    <script src="./lib/react-dom.js"></script>
    <script src="./lib/babel.js"></script>
    <!-- script代码 -->
     <script type="text/babel">
      // 创建函数式组件
       function Demo(){
        console.log(this)//此处的this是unsefined
        return <h2>我是函数定义的组件</h2>
       }
      // 渲染组件到页面
       ReactDOM.render (<Demo/>, document.getElementById('root'))

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

注意事项：

1、首先这里的render第一个参数应该是一个首字母大写的标签；

2、通过babel转化之后的js代码开启了严格模式.经过转化后函数内的this指向undefined；

3、这里的函数必须有return返回值

6.3 react中的类组件

一、复习类的基本知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // 创建一个类
        class Person{
            // 构造器方法
            constructor(name,age){
                // 构造器中的this是谁？-类的实例对象
                this.name=name
                this.age=age
            }
            // 一般方法
            speak(){
                console.log(`我叫${this.name},我的年龄是${this.age}`)
            }
        }
        const p1=new Person('tom',18)
        const p2=new Person('jerry',19)
        console.log(p1)
        console.log(p2)
        p1.speak()

        // 常见一个student类，继承person类
        class Student extends Person{
            constructor(name,age,grade){
                super(name,age)
                this.grade=grade
            }
            // 重写从父类继承过来的方法
            speak(){
                console.log(`我叫${this.name},我的年龄是${this.age},我读的是${this.grade}年级`)
            }
        }
        const p3=new Student('小张',16,'高一')
        console.log(p3)
        p3.speak()

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

总结：

1.类通过class 关键字创建。类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写

2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的

3.类中所定义的方法，都是放在了类的原型对象上，供实例去使用

二、类组件

1.react解析组件标签，找到了MyComponent组件

2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法

3.将render返回的虚拟dom转为真实dom，随后呈现在页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 根节点 -->
     <div id="root"></div>
    <!-- 导入 -->
    <script src="./lib/react.js"></script>
    <script src="./lib/react-dom.js"></script>
    <script src="./lib/babel.js"></script>
    <!-- script代码 -->
     <script type="text/babel">
        // 获取渲染节点
        const root=ReactDOM.createRoot(document.querySelector('#root'))
       
        // 定义类式组件
        class MyComponent extends React.Component{
            // 渲染内容
            render(){//render是放在MyComponent的原型对象上，供实例使用
               console.log(this)//render中的this指向谁？--MyComponent的实例对象
                return(
                    <div>
                       <h2>我是用类定义的组件（适用于【复杂组件】的定义</h2>
                    </div>
                )
            }
        }
        // render函数渲染组件
        root.render(<MyComponent/>)

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

注意事项：render中的this指向MyComponent组件的实例对象

组件实例对象上的props/refs/state是react中要的三个东西。后面应该会经常用到。