关于react的一些知识点总结

最新推荐文章于 2024-10-07 08:30:00 发布
最新推荐文章于 2024-10-07 08:30:00 发布
阅读量597 收藏 1
点赞数
分类专栏： 前端 react 文章标签： javascript reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39897978/article/details/105595456
版权

1、为什么选择框架？

  • 组件化：使我们的工程易于维护，容易拓展

  • 分层的设计：mvvm框架等等使我们的代码解耦易于读写，视图数据分离

  • 开发效率:底层封装好了具体的方法来更新DOM,而非我们手动操作,解放了开发者的手动DOM成本,提高开发效率。

  • 状态管理的优化：例如vuex readux的使用

  • 现在的框架基本都有生命周期，方便我们在各个周期进行操作，比js的混杂模式更加的方便，清晰
    2、虚拟dom的优劣

  • 优点

  • 保证性能下限: 虚拟DOM可以经过diff找出最小差异,然后批量进行patch,这种操作虽然比不上手动优化,但是比起粗暴的DOM操作性能要好很多,因此虚拟DOM可以保证性能下限

  • 无需手动操作DOM: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率

  • 跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作,例如服务器渲染、移动端开发等等

3、react的生命周期

React 16之后有三个生命周期被废弃(但并未删除)
componentWillMount
componentWillReceiveProps
componentWillUpdate
官方计划在17版本完全删除这三个函数，只保留UNSAVE_前缀的三个函数，目的是为了向下兼容，但是对于开发者而言应该尽量避免使用他们，而是使用新增的生命周期函数替代它们
目前React 16.8 +的生命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段
挂载阶段:
constructor: 构造函数，最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定this
getDerivedStateFromProps: static getDerivedStateFromProps(nextProps, prevState),这是个静态方法,当我们接收到新的属性想去修改我们state，可以使用getDerivedStateFromProps
render: render函数是纯函数，只返回需要渲染的东西，不应该包含其它的业务逻辑,可以返回原生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容
componentDidMount: 组件装载之后调用，此时我们可以获取到DOM节点并操作，比如对canvas，svg的操作，服务器请求，订阅都可以写在这个里面，但是记得在componentWillUnmount中取消订阅
更新阶段:
getDerivedStateFromProps: 此方法在更新个挂载阶段都可能会调用
shouldComponentUpdate: shouldComponentUpdate(nextProps, nextState),有两个参数nextProps和nextState，表示新的属性和变化之后的state，返回一个布尔值，true表示会触发重新渲染，false表示不会触发重新渲染，默认返回true,我们通常利用此生命周期来优化React程序性能
render: 更新阶段也会触发此生命周期
getSnapshotBeforeUpdate: getSnapshotBeforeUpdate(prevProps, prevState),这个方法在render之后，componentDidUpdate之前调用，有两个参数prevProps和prevState，表示之前的属性和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate，如果你不想要返回值，可以返回null，此生命周期必须与componentDidUpdate搭配使用
componentDidUpdate: componentDidUpdate(prevProps, prevState, snapshot),该方法在getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或计算的过程迁移至 getSnapshotBeforeUpdate，然后在 componentDidUpdate 中统一触发回调或更新状态。
卸载阶段:
componentWillUnmount: 当我们的组件被卸载或者销毁了就会调用，我们可以在这个函数里去清除一些定时器，取消网络请求，清理无效的DOM元素等垃圾清理工作

在这里插入图片描述
你可以参考这个网站（关于新的生命周期）

4、React的请求应该放在哪个生命周期中?

React的异步请求到底应该放在哪个生命周期里,有人认为在componentWillMount中可以提前进行异步请求,避免白屏,其实这个观点是有问题的.
由于JavaScript中异步事件的性质，当您启动API调用时，浏览器会在此期间返回执行其他工作。当React渲染一个组件时，它不会等待componentWillMount它完成任何事情 - React继续前进并继续render,没有办法“暂停”渲染以等待数据到达。
而且在componentWillMount请求会有一系列潜在的问题,首先,在服务器渲染时,如果在 componentWillMount 里获取数据，fetch data会执行两次，一次在服务端一次在客户端，这造成了多余的请求,其次,在React 16进行React Fiber重写后,componentWillMount可能在一次渲染中多次调用.
目前官方推荐的异步请求是在componentDidmount中进行.
如果有特殊需求需要提前请求,也可以在特殊情况下在constructor中请求:

react 17之后componentWillMount会被废弃,仅仅保留UNSAFE_componentWillMount

5、setstate是同步还是异步的？（合成事件和钩子函数中是“异步”）

  1. setState只在合成事件和钩子函数中是“异步”的，在原生事件和setTimeout 中都是同步的。
  2. setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
  3. setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次setState，setState的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时setState多个不同的值，在更新时会对其进行合并批量更新。

6、react组件间的通信策略

  • 父组件向子组件通讯: 父组件可以向子组件通过传 props 的方式，向子组件进行通讯
  • 子组件向父组件通讯: props+回调的方式,父组件向子组件传递props进行通讯，此props为作用域为父组件自身的函数，子组件调用该函数，将子组件想要传递的信息，作为参数，传递到父组件的作用域中
  • 兄弟组件通信: 找到这两个兄弟节点共同的父节点,结合上面两种方式由父节点转发信息进行通信
  • 跨层级通信: Context设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言,对于跨越多层的全局数据通过Context通信再适合不过
  • 发布订阅模式: 发布者发布事件，订阅者监听事件并做出反应,我们可以通过引入event模块进行通信
  • 全局状态管理工具: 借助Redux或者Mobx等全局状态管理工具进行通信,这种工具会维护一个全局状态中心Store,并根据不同的事件产生新的状态

在这里插入图片描述
7、关于组件复用点击https://github.com/Advanced-Interview-Question/front-end-interview/blob/master/docs/guide/abstract.md
8、对于时间分片的理解

React 在渲染（render）的时候，不会阻塞现在的线程
如果你的设备足够快，你会感觉渲染是同步的
如果你设备非常慢，你会感觉还算是灵敏的
虽然是异步渲染，但是你将会看到完整的渲染，而不是一个组件一行行的渲染出来
同样书写组件的方式

时间分片正是基于可随时打断、重启的Fiber架构,可打断当前任务,优先处理紧急且重要的任务,保证页面的流畅运行.

9、关于redux
这个是redux的过程（数据单向流动），处理异步的时候引入中间件，redux-thunk，redux-saga等等

首先，用户（通过View）发出Action，发出方式就用到了dispatch方法。
然后，Store自动调用Reducer，并且传入两个参数：当前State和收到的Action，Reducer会返回新的State
State一旦有变化，Store就会调用监听函数，来更新View。
在这里插入图片描述
关于react-redux

Provider: Provider的作用是从最外部封装了整个应用，并向connect模块传递store
connect: 负责连接React和Redux
（1）获取state: connect通过context获取Provider中的store，通过store.getState()获取整个store tree 上所有state
（2）包装原组件: 将state和action通过props的方式传入到原组件内部wrapWithConnect返回一个ReactComponent对象Connect，Connect重新render外部传入的原组件WrappedComponent，并把connect中传入的mapStateToProps, mapDispatchToProps与组件上原有的props合并后，通过属性的方式传给WrappedComponent
（3）监听store tree变化: connect缓存了store tree中state的状态,通过当前state状态和变更前state状态进行比较,从而确定是否调用this.setState()方法触发Connect及其子组件的重新渲染

在这里插入图片描述
10、关于它的中间件的优劣
（1）redux-chunk

redux-thunk优点:
体积小: redux-thunk的实现方式很简单,只有不到20行代码
使用简单: redux-thunk没有引入像redux-saga或者redux-observable额外的范式,上手简单

redux-thunk缺陷:
样板代码过多: 与redux本身一样,通常一个请求需要大量的代码,而且很多都是重复性质的
耦合严重: 异步操作与redux的action偶合在一起,不方便管理
功能孱弱: 有一些实际开发中常用的功能需要自己进行封装

（2）redux-saga

redux-saga优点:
异步解耦: 异步操作被被转移到单独 saga.js 中，不再是掺杂在 action.js 或 component.js 中
action摆脱thunk function: dispatch 的参数依然是一个纯粹的 action (FSA)，而不是充满 “黑魔法” thunk function
异常处理: 受益于 generator function 的 saga 实现，代码异常/请求失败 都可以直接通过 try/catch 语法直接捕获处理
功能强大: redux-saga提供了大量的Saga 辅助函数和Effect 创建器供开发者使用,开发者无须封装或者简单封装即可使用
灵活: redux-saga可以将多个Saga可以串行/并行组合起来,形成一个非常实用的异步flow
易测试，提供了各种case的测试方案，包括mock task，分支覆盖等等

redux-saga缺陷:
额外的学习成本: redux-saga不仅在使用难以理解的 generator function,而且有数十个API,学习成本远超redux-thunk,最重要的是你的额外学习成本是只服务于这个库的,与redux-observable不同,redux-observable虽然也有额外学习成本但是背后是rxjs和一整套思想
体积庞大: 体积略大,代码近2000行，min版25KB左右
功能过剩: 实际上并发控制等功能很难用到,但是我们依然需要引入这些代码
ts支持不友好: yield无法返回TS类型

11、关于虚拟dom和diff算法
https://juejin.im/post/5cb66fdaf265da0384128445

洳娅
关注
专栏目录
React知识体系
achang07的博客
12-09 1318
https://react.docschina.org/docs/hello-world.html React是一个用于构建用户界面的Javascript库。 特点：声明式，组件化，移植性。 关键字：组件Component，状态组件props，应用state，第三方库。 JSX JSX是JavaScript的语法扩展。 JSX用来声明React中的元素。 JSX中可疑使用JavaScript表...
react框架知识点总结
serendipitymm的博客
11-30 1021
react recat基本概念 react是由facebook开发的 recat是一个专门用于构建用户界面的javascript库 为了解决页面更新dom加载慢的问题 所以推出的react这个js库 来高效的解决大型项目中的dom加载国漫页面渲染过慢的问题 recat特点 声明式设计:我们只需要告诉程序干什么 程序会自己帮我们完成 高效 灵活 组件化 单项数据流 发展史 2013年推出的 在13年9月份 就受到了市场的追捧 15年3月 推出了一个reactNative的技术(使用re
React知识库内容精选：10篇文章让你迅速了解该框架
小秋博客
06-14 439
React作为前端框架的后起之秀，凭借其在构建SPA上的出色表现，正吸引着大量前端开发者深入研究。目前包括Strikingly、杭州大搜车在内的越来越多企业已在实际开发中探索、应用React。目前有关React的学习资源满天飞，零散且良莠不齐。面对它们，初次接触React的开发者往往迷茫且无从下手。如何快速入门，逐步展开系统化学习，是他们最大的需求，也是领域开发高手被问到的最多的一个问题。为此，R...
react 知识点汇总（非常全面）
最新发布
小程xy的博客
10-07 2308
React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它的核心理念是“组件化”，即将用户界面拆分为可重用的组件。 React 的组件通常使用 JSX（JavaScript XML）。JSX 是一种 JavaScript 语法扩展，允许开发者在 JavaScript 代码中编写类似 HTML 的结构。 ## 1、初识react ### 1.1 常用命令 首先安装 [Nodejs](https://nodejs.org/en/)，然后执行下面命令安装 `rea
react的知识结构梳理
白天心的博客
12-05 515
刚开始的react文章，一直在看，今天整理一点数据作为记录。 1.* 在表单上的处理表单上标签上的处理 * 状态提升，refs的使用方法，传组件信息时用Ref 转发是一种选择性加入的功能， * 可让某些组件接收他们收到的 ref，并将其向下传递（换句话说，“转发”）给孩子。 * 设置插槽的内容对比vue中的slot 例子： constructor(props) { super(pro...
构建React基础知识体系
ngd-b的博客
07-06 310
react 基础知识表述： JSX语法注意点； 核心概念重点关注； 高级知识； API； 生命周期；
React 5分钟知识体系
weixin_44240581的博客
01-28 167
ECMAScript 6 变量声明 const 用于声明常量，let 用于声明变量，他们都是块级作用域。 const a = 1; let b = 1; 模板字符串 用于拼接字符串。 let a = 'hello'; let b = 'hello'; console.log('print:' + a + b); let c = `print:${a}${b}` // 注意这个不是引号，键盘 esc 下面那个按键 默认参数 function test(a = 'world') { console.l
React 基础知识点总结
02-21
React 基础知识点总结
react及react生态知识总结
10-18
对react，react全家桶，react native等的知识点进行汇总
React基础知识点总结--1️⃣
Slamande的博客
08-16 375
一、React基础 目标 能够说出React是什么 能够说出React的特点 能够掌握React的基本使用 能够使用React脚手架 目录 React概述 React的基本使用 React脚手架的使用 1. React概述 1.1 什么是React React是一-个用于构建用户界面的JavaScript库。 用户界面: HTML页面(前端) React主要用来写HTML页面,或构建Web应用 如果从MVC的角度来看, React仅仅是视图层(V) ,也就是只负责视图的渲染,而并非提供了 完整的M和C的功能
liujie2019#Blog#React知识点总结1
07-25
2. 使用 PropTypes 进行类型检查 4. dangerouslySetInnerHTML函数 6. 事件处理
React实践系列笔记-Components
某熊的技术之路
09-05 1059
ComponentsReact提供了和以往不一样的方式来看待视图，它以组件开发为基础。组件是React的核心概念，React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类。对React应用而言，你需要分割你的页面，使其成为一个个的组件。也就是说，你的应用是由这些组件组合而成的。你可以
前端之React篇
weixin_60404020的博客
09-04 4868
（1）受控组件在使用表单来收集用户输入时，例如等元素都要绑定一个change事件，当表单的状态发生变化，就会触发onChange事件，更新组件的state。这种组件在React中被称为受控组件，在受控组件中，组件渲染出的状态与它的value或checked属性相对应，react通过这种方式消除了组件的局部状态，使整个状态可控。react官方推荐使用受控表单组件。可以通过初始state中设置表单的默认值每当表单的值发生变化时，调用onChange事件处理器。
React简单知识点梳理(超级详细,超级全)
weixin_49074984的博客
08-12 1579
react梳理 一、创建一个react包 安装脚手架 npm i create-react-app -g 创建一个react项目 create-react-app XXXX (项目名称) cd进入项目进行释放(可以不进行) npm run eject 原理 基于虚拟DOM 1.通过js 创建虚拟dom 虚拟dom转换真实dom，并挂载到页面 2.react 创建虚拟dom react.createElement 遇到<> 遇到{} 解析成虚拟dom
React基础知识（必看）
qq_50613817的博客
05-30 1647
文章目录React1. 是什么？2. 谁开发的?3. 为什么要学？4. React的特点安装安装命令执行命令JSX语法JSX产生的原因JSX的概述使用步骤嵌入JS表达式条件渲染列表渲染样式处理**行内样式 -style**类名 -classNameReact组件介绍函数创建组件类创建组件抽离成单独的JS文件React事件处理事件绑定事件对象有状态组件和无状态组件State和SetStatestate基本使用setState() 修改状态事件绑定this指向箭头函数利用bind方法class的实例方法表单处理
前端-React(基础知识)
yushenshili的博客
06-16 2492
React 是一个用于构建用户界面的 JAVASCRIPT 库。 用 DOM 的方式将需要的组件秒加，用不着的秒删。React 扮演着 MVC 结构中 V 的角色 React 是一个用于构建用户界面的 JAVASCRIPT 库。 JSX 是 JavaScript 语法的扩展。 在开始学习 React 之前，您需要具备以下基础知识： HTML5 CSS JavaScript jsx特点 花括号{} 别名：className 代替class ，htmlFor代替html。 例子 html被编译成什么呢.
React知识点总结
elricboa的专栏
12-03 735
1，修改 Props 是不好的Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。 2，State 工作原理：常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的 callbac
web前端——React
weixin_42784068的博客
01-25 316
React特点 1、声明式设计-React采用声明范式，可以轻松描述应用 2、高效-React通过对DOM的模拟，最大限度地减少与DOM的交互 3、灵活-React可以与已知的库或框架很好地配合 4、JSX-JSX是JavaScript语法的扩展。React开发不一定使用JSX，但我们建议使用它。 5、组件-通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。 6、单...
react全家桶知识体系xmind图
南风的博客
02-18 708
新项目用的react 梳理了一下react的知识体系~
"Web前端知识点总结：HTML标签功能、常用属性及使用场合
除了基础知识外，Web前端知识点总结还包括了一些常用的框架和库，如jQuery、Bootstrap、React、Vue等，这些框架和库能够帮助开发者快速、高效地构建复杂的网页和应用，提高开发效率和用户体验。同时，也涵盖了一些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值