react

最新推荐文章于 2024-06-18 11:15:52 发布

无人与我粥可温

最新推荐文章于 2024-06-18 11:15:52 发布

阅读量717

点赞数 1

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

本文链接：https://blog.csdn.net/yjnain3066/article/details/128071983

版权

react.js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

react介绍：

react是一个声明式，高校且灵活的用于构建用户界面的javaScript库，前端三大框架之一，React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了

前端三大框架：

Angular、React、Vue

Vue：适于小型项目。

Angular：适于大型超大型web项目的开发。

React：适于中型项目或个性化需求，

react的特点：

声明式编码，通过一些行为替代，例如语法糖
组件化编码，提高开发效率及组件复用率，js是命令式编码，通过获取->操作等步骤
React Native 编写原生应用
高效（优秀的Diffing算法），通过虚拟DOM和优秀的diff算法，尽量减少与真实DOM的交互

虚拟dom:

什么是dom：

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的(API)应用程序接口,它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。

什么是虚拟dom：

虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点，实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。相当于在js与DOM之间做了一个缓存，利用diff算法对比新旧虚拟DOM记录到一个对象中按需更新，最后创建真实的DOM

为什么要使用虚拟dom：

1. 1. 提供更好的性能

- - - 对比一下修改DOM时真实DOM操作和虚拟DOM的操作：
    - 对于真实DOM：生成HTML字符串，重建所有DOM元素
    - 对于虚拟DOM：生成虚拟DOM节点，采用diff算法，更新出现变化的真实DOM节点

1. 1. 跨平台

- - - 使用虚拟DOM可以很方便的进行跨平台操作。

diff算法：

什么是diff算法：

虚拟DOM就是一个JS对象，通过对象的方式来表示DOM结构，通过事务处理机制，将多次 DOM修改的结果一次性更新到页面上，从而有效的减少页面渲染次数，减少修改DOM重绘重排的时间，提高渲染性能。React在内存中维护一个跟真实DOM一样的虚拟DOM树，再改动完组件后，会再生成一个新的虚拟DOM，React会将新的虚拟DOM和原来的虚拟DOM进行对比，找出两个DOM树的不同的地方（diff），然后在真实DOM上更新diff，提高渲染速度。、

原理：

Diff算法通过循环递归对节点进行比较，然后判断每个节点的状态以及要做的操作（add，remove，change），最后根据Virtual DOM进行DOM的渲染。

jsx：

什么是jsx：

JSX是一种JavaScript的语法扩展，全称JavaScript XML，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面，能让我们可以在JS中写html标记语言。

jsx语法规则：

- 创建虚拟DOM时，不要写引号；
- 标签中要混入js表达式，要是用{}
- 标签中样式的类名要用className指定
- 标签中的内联样式要用style={{color:'white'}}，注意属性名转为小驼峰
- 只能有一个根标签
- 标签必须闭合
- 关于标签首字母
- 一定注意区分：【js语句(代码)】与【js表达式】

生命周期：

类式组件生命周期：

componentDidMount()：页面挂载时

shouldComponentUpdate()：页面更新时

componentWillUnmount()：页面销毁时

函数式组件生命周期：

函数式组件在官方上面是没有声明周期的但是effect hook的三种模式是类似于生命周期

useEffect( () => { console.log('初始化阶段构造') }, []);页面挂载时

useEffect( () => { console.log('监听所有状态变化，有状态变化的就执行') }, [要监听的数据]);页面更新时

useEffect(() => { return 返回的是函数; // 卸载时，想要进行的操作},[]);在页面销毁时

创建方法：

首先安装手脚架

- 在项目文件夹下打开cmd命令行工具输入

  npm install -g create-react-app

创建项目：

- 在项目文件件下再次打开cmd命令行输入

create-react-app 项目名字

创建完成后在项目文件下输入以下代码就启动项目了

npm start

路由：

使用步骤：

安装：

在项目文件下打开cmd命令行输入以下代码

npm react-router-dom

安装完成后进行配置（在一般情况下我是会进行路由的一个编写，也就是类似于vue的路由）

配置：
在安装完成后在src目录下新建router目录并在其下面新建index.js文件
2. 在index.js文件里写（这个类似于vue的路由）
3. 然后在app.js里面导入这个文件，使用useRoutes来注册一下就可以了
4. 在后面需要添加页面时，就跟vue一样是在router里面去先导入再按照这样的方式去添加即可

在history模式下的push和replace有什么区别：

push：push时添加一个新的记录到历史堆栈, history.length+1；

replace('')：替换掉当前堆栈上的记录， history.length不变。

redux介绍：

什么是redux：

redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库) 2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用 3.作用: 集中式管理 react 应用中多个组件共享的状态

redux三个原则：

唯一数据源：只把状态存在store中
数据改变要通过函数：action 更新到 state中，需要在 reducers 中
保持只读：state 中的内容只读，唯一改变 state 的方法就是触发action

hook：

什么是hook：

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

hook特点：

- 完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
- 100% 向后兼容的。 Hook 不包含任何破坏性改动。

为什么使用hook：

- 提取逻辑出来非常容易
- 非常易于组合
- 可读性非常强
- 没有名字冲突问题

hook优势：

1. Hook 使你在无需修改组件结构的情况下复用状态逻辑(自定义hook)
2. Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。
3. 类组件难以理解,影响组件预编译,Hook 使你在非 class 的情况下可以使用更多的 React 特性
4. 更容易复用代码：这点应该是react hooks最大的优点，它解决了类组件有些时候难以复用逻辑的问题。通过自定义hooks，便可以轻松复用逻辑。
5. 清爽的代码风格：函数式编程风格，函数式组件、状态保存在运行环境、每个功能都包裹在函数中，整体风格更清爽，更优雅

注：hook只能在最顶层进行使用：if else里面不能用hooks，hooks是有顺序的。不能用在if else 或者循环里面还有非顶层的函数内部。hooks在初始化时候是以链表形式存储的，后续更新都是按照这个链表顺序执行的