React全家桶

kl_44850945

已于 2022-05-07 15:05:05 修改

阅读量1.2k

点赞数

文章标签：前端前端框架 react

于 2022-04-25 10:41:30 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44850945/article/details/124398674

版权

这篇博客详细介绍了React的基础知识，包括React是什么、由谁开发、学习React的原因及其特点。文章探讨了虚拟DOM的两种创建方式，重点讲解了JSX语法、JS与JSX的区别，以及模块化和组件化的概念。作者还分享了如何进行面向组件编程，并讨论了组件通信的关键点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React基础：最为核心
库
React-Router
PubSub：消息管理库
Redux：集中式状态管理库
Ant-Design：精美的UI组件库

类外：函数
类内：方法

https://react.docschina.org/

html标签样式和名字

instanceof：判断左边对象是否为是右边类的实例，
            返回的是boolean类型的数据

中文官网：https://react.docschina.org/

React是什么

用于构建用户界面、将数据渲染为html视图的开源JS库——只关注界面、视图
在页面上展示学生信息：发送请求获取数据
                     处理数据(过滤、整理格式)
                     操作dom呈现页面——React只负责最后一步

谁开发

Facebook开发

为什么学

原生js操作dom繁琐、效率低——用dom的API操作UI，.style
    每次操作dom，浏览器都要——重绘、重排
原生js没有组件化编码方案，代码复用率低

React特点

使用虚拟dom+diffing算法，尽量减少与真实dom交互
    生成的虚拟dom和之前的进行比较，如果有就不生成新的真实dom了
采用组件化模式、声明式编码，提高组件复用率——之前是命令式编码
在React Native中可以使用React语法进行移动端开发
    专门让前端人员通过js编写安卓、iOS的应用

在这里插入图片描述

教程+课件 
链接：https://pan.baidu.com/s/1hS746pu37B78glu5u-TaPw 
提取码：1dz2 

免费百度网盘会员（用于加速和扩容）：https://www.tomyres.com/activity/bdwp

旧版本——React16.8版本
babel.min.js、react.development.js(核心库)、react-dom.development.js(扩展库)
必须先引入核心库，再引入扩展库
babel：ES6——>ES5
       JSX——>JS

虚拟dom(对象)的两种创建方式

用jsx(语法糖，简单便捷的方式)、js创建虚拟dom
用jsx写：更加简单地创建虚拟dom——标签嵌套、可以清楚地看到标签结构

虚拟dom：
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
3.最终会被React转化为真实DOM，呈现在页面上

JSX、语法规则

javaScript xml
React定义的一种类似于XML的JS扩展语法：JS+XML

1.定义虚拟DOM时，不要写引号
2.标签中混入JS表达式时要用{}  //注意是表达式，不是语句
3.样式的类名指定不要用class，要用className
4.内联样式，要用style={{key:value}}的形式去写
5.只有一个根标签
6.标签必须闭合
7.标签首字母
	(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素——>报错
	(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义——>报错

XML

1.XML：早期用于存储和传输数据的一种格式

<student>
   <name>Tom</name>
   <age>19</age>
</student>

2.后面用json存储，js有内置的json对象
parse(快速把js字符串解析成js里的对象和数组)
stringfy(快速把js对象和数组——>字符串)

"{"name":"Tom","age":19}"

js和jsx的区别

1.JS：一种直译式脚本语言
  JSX:即JavaScript XML——一种在React组件内部构建标签的类XML语法。(增强React程序组件的可读性)

JS表达式、JS语句(代码)

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
  (1)a
  (2)a+b
  (3)demo(1)
  (4)arr.map() 
  (5)function test () {} //定义一个函数
2.语句(代码)：有代码块，控制代码走向
  (1)if(){}
  (2)for(){}
  (3)switch(){case:xxxx}

模块与组件、模块化与组件化

复用、简化(编码)、提高效率
1.模块——js文件
特定功能

向外提供特定功能的js程序，一般就是一个js文件
作用：复用js，简化js的编写，提高运行效率

2.组件
局部功能

实现局部功能效果的代码和资源的集合(html、css、js、image等)

3.模块化

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

4.组件化

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

React面向组件编程

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

React Developer Tools——谷歌浏览器
提供方为FaceBook

profilter：记录网站的性能：渲染用了多久，哪个组件加载的最慢，慢的原因是什么

谷歌浏览器：打开Chrome网上商店

定义、创建组件
2.两种定义组件的方式

函数式组件：
类式组件：

bind函数

bind函数
在这里插入图片描述

构造器函数和一般函数的区别

构造函数：必须new对象才能调用 并且一定要写this——指向类的实例对象
一般函数：可以直接调用，不用this

类的总结

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

功能界面的组件化编码流程(通用)

public文件夹：favicon.ico：
              index.html：
脚手架只找src：components文件夹
               APP.js/jsx文件：
               index.js：

Ctrl+C：使代码运行中停下来

1.拆分组件
2.实现静态组件：使用组件实现静态页面效果
3.实现动态组件：动态显示初始化数据
                   数据类型、名称、保存在哪个组件
               交互(从绑定事件监听开始)

动态初始化
获取输入框里的值，点击回车就获取输入框里的值
 找到头部header组件，找到input框绑定一个键盘事件

整体逻辑：APP里存储着要做的事情，传给list，也传给了header一个函数，
         函数能接收一个todoObj，header组件在合适的时候调用这个函数，
         然后把todoObj交给APP，APP拿到todoObj之后，放到自己的状态里引起了APP状态的更改，
         APP状态更改，就得重新调APP里的render，APP里的render重新调用，会引发子组件list的重新渲染，
         然后就更新

在这里插入图片描述

组件通信

子组件之间不能进行交互的，放在父组件之中
父——>子：props

杂

生成一个时间戳：Date.now()

生成唯一的id库：UUID
nanoid是一个函数，生成一个随机字符串