没有合适的资源?快使用搜索试试~ 我知道了~
Java面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docxJava面试题和答案共47道.docx
资源推荐
资源详情
资源评论
为什么选择使用框架而不是原生?
框架的好处:
1、组件化:其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可
以是我们的工程易于维护、易于组合拓展。
2、天然分层:JQuery 时代的代码大部分情况下是面条代码,耦合严重,现代框架不管是 MVC、
MVP 还是 MVVM 模式都能帮助我们进行分层,代码解耦更易于读写。
3、生态:现在主流前端框架都自带生态,不管是数据流管理架构还是 UI 库都有成熟的解决方案。
4、开发效率:现代前端框架都默认自动更新 DOM,而非我们手动操作,解放了开发者的手动
DOM 成本,提高开发效率,从根本上解决了 UI 与状态同步问题.
虚拟 DOM 的优劣如何?
优点:
1、保证性能下限:虚拟 DOM 可以经过 diff 找出最小差异,然后批量进行 patch,这种操作虽然比
不上手动优化,但是比起粗暴的 DOM 操作性能要好很多,因此虚拟 DOM 可以保证性能下限
2、无需手动操作 DOM:虚拟 DOM 的 diff 和 patch 都是在一次更新中自动进行的,我们无需手动
操作 DOM,极大提高开发效率
3、跨平台:虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关,相比之下虚拟 DOM 可以进行
更方便地跨平台操作,例如服务器渲染、移动端开发等等缺点:
无法进行极致优化:在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的
极致优化,比如 VScode 采用直接手动操作 DOM 的方式进行极端的性能优化
虚拟 DOM 实现原理?
1、虚拟 DOM 本质上是 JavaScript 对象,是对真实 DOM 的抽象
2、状态变更时,记录新树和旧树的差异
3、_最后把差异更新到真正的 dom 中
React 最新的生命周期是怎样的?
React 16 之后有三个生命周期被废弃(但并未删除)
1、componentWillMount
2、componentWillReceiveProps
3、componentWillUpdate
官方计划在 17 版本完全删除这三个函数,只保留 UNSAVE 前缀的三个函数,目的是为了向下兼
容,但是对于开发者而言应该尽量避免使用他们,而是使用新增的生命周期函数替代它们
目前 React 16.8 +的生命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段
挂载阶段:
1. constructor:构造函数,最先被执行,我们通常在构造函数里初始化 state 对象或者给自定义方法
绑定 this
2、getDerivedStateFromProps:static
getDerivedStateFromProps(nextProps,prevState),这是个静态方法,当我们接收到新的属性想去修改我
们 state,可以使用 getDerivedStateFromProps
3、render:render 函数是纯函数,只返回需要渲染的东西,不应该包含其它的业务逻辑,可以返回
原生的 DOM、React 组件、Fragment、Portals、字符串和数字、Boolean 和 null 等内容
4、componentDidMount:组件装载之后调用,此时我们可以获取到 DOM 节点并操作,比如对 canvas,
svg 的操作,服务器请求,订阅都可以写在这个里面,但是记得在 componentWillUnmount中取消订
阅
更新阶段:
1、getDerivedStateFromProps:此方法在更新个挂载阶段都可能会调用
2 、shouldComponentUpdate:shouldComponentUpdate(nextProps,nextState),有 两个 参数 nextProps 和
nextState,表示新的属性和变化之后的
state,返回一个布尔值,true 表示会触发重新渲染,false 表示不会触发重新渲染,默认返回 true,
我们通常利用此生命周期来优化 React 程序性能
3、render:更新阶段也会触发此生命周期
4 、 getSnapshotBeforeUpdate:getSnapshotBeforeUpdate(prevProps,prevState), 这 个 方 法 在 render 之
后,componentDidUpdate 之前调用,有两个参数 prevProps 和 prevState,表示之前的属性和之前的 state,
这个函数有一个返回值,会作为第三个参数传给 componentDidUpdate,如果你不想要返回值,可
以返回 null,此生命周期必须与 componentDidUpdate 搭配使用
5 、 componentDidUpdate:componentDidUpdate(prevProps,prevState,snapshot), 该 方 法 在
getSnapshotBeforeUpdate 方法之后被调用,有三个参数 prevProps,prevState,snapshot,表示之前的 props,
之前的 state,和 snapshot。第三个参数是 getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需
要 用 到 DOM 元 素 的 状 态 , 则 将 对 比 或 计 算 的 过 程 迁 移 至 getSnapshotBeforeUpdate, 然 后 在
componentDidUpdate 中统一触发回调或更新状态。
卸载阶段:
componentWillUnmount:当我们的组件被卸载或者销毁了就会调用,我们可以在这个函数里去清除一
些定时器,取消网络请求,清理无效的 DOM 元素等垃圾清理工作
一个查看 react 生命周期的网站
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
setState 到底是异步还是同步?
先给出答案:有时表现出异步,有时表现出同步
1、setState 只在合成事件和钩子函数中是“异步”的,在原生事件和 setTimeout 中都是同步的
2、setState 的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,只是
合成事件和钩子函数的调用顺序在更新之前,导致在合成事件和钩子函数中没法立马拿到更新后
的值,形成了所谓的“异步”,当然可以通过第二个参数 setState(partialState,callback)中的 callback 拿
到更新后的结果
3、setState 的批量更新优化也是建立在“异步” (合成事件、钩子函数)之上的,在原生事件和
setTimeout 中不会批量更新,在“异步”中如果对同一个值进行多次 setState,setState 的批量更新策
略会对其进行覆盖,取最后一次的执行,如果是同时 setState 多个不同的值,在更新时会对其进行
合并批量更新
React 组件通信如何实现?
React 组件间通信方式:
1、父组件向子组件通讯:父组件可以向子组件通过传 props 的方式,向子组件进行通讯
2、子组件向父组件通讯:props+回调的方式,父组件向子组件传递 props 进行通讯,此 props 为作
用域为父组件自身的函数,子组件调用该函数,将子组件想要传递的信息,作为参数,传递到父
组件的作用域中
剩余13页未读,继续阅读
资源评论
小码叔
- 粉丝: 4145
- 资源: 1181
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功