React
React生命周期
React组件类型有哪些
React新增的钩子和即将移除的钩子
React组件嵌套,钩子函数的执行顺序
如何注册事件,以及如何处理this指向的问题
如何阻止事件默认行文
什么叫做状态提升
React封装组件的流程
怎么实现跨组件传参
如何设置状态,以及如何正确的获取更新之后的状态
性能优化使用哪个钩子,怎么用
你知道哪些hook
useRef和createRef的区别 useMemo和useCallback的区别
什么是回流 什么是重绘?
# 回流
1. 位置的改变 translate 定位的left top
2. 元素位置的显示和隐藏也会引起回流
3. 宽高的变化
# 重绘
1. 颜色的变化
2. 字体风格的变化
3. 背景的变化
- 单页应用优化访问速度
- 触发回流的条件 触发重绘的条件?
- 如何获取路由动态参数
1. hash有#号,#号后面的url不会向后端发起请求
2. hash路由使用onhashchange监听 history使用onpopstate监听
3. history使用的是H5的api pushState replaceState
4. 当hash值相同时,不会触发hashchange,history当输入相同的路径的时候,会将浏览器中的地址当成是请求地址向后台发送请求,会造成页面404
5. abstract模式是在没有浏览器api的情况下自动启用,abstract模式在切换页面的时候,路径是不会发生变化的
6. 关键字 onhashchange pushstate replacestate popstate
7.
- 什么是单页应用? 一个项目只有一个html页面 所有的页面跳转依据于路由进行
- 单页应用的有点和缺点? 用户体验好,切换速度快,不需要刷新整个页面
- 怎么解决单页应用缺点的问题? 使用服务端渲染 nuxt
- History hash abstract模式的区别?
说说React中onClick绑定后的工作原理
- 首先react有自己的事件系统,也是遵循w3c的,这个事件系统的名称叫做合成事件(SyntheticEvent),而其自定义事件系统的动机主要包含以下几个方面
- 抹平不同浏览器之间的兼容性差异。最主要的动机。
- 件合成既可以处理兼容性问题
- 提供一个抽象的跨平台事件机制
- 可以做更多优化
- 可以干预事件的分发
- 当给组件(元素)绑定
onClick
事件之后- react会对事件先进行注册,将事件统一注册到
document
上 - 根据组件
唯一的标识key
来对事件函数进行存储 - 统一的指定
dispatchEvent
回调函数 - 储存事件回调:
react会将click
这个事件统一存到一个对象中,回调函数的存储采用键值对(key/value)的方式存储在对象中,key 是组件的唯一标识 id,value 对应的就是事件的回调函数,通过组件的key就能回调到相应的函数了
- react会对事件先进行注册,将事件统一注册到
说说react里面bind与箭头函数
- bind 由于在类中,采用的是
严格模式
,所以事件回调的时候会丢失this指向,指向undefined
,需要使用bind来给函数绑定上当前实例的this指向 箭头函数
的this指向上下文,所以永久能拿到当前组件实例的this
指向,我们可以完美的使用箭头函数来替代传统事件处理函数的回调
说说react中的性能优化
性能优化分为2个方面
- 使用shouldComponentUpdate来对state和props进行对比,如果两次的结果一直,那么就return false
- 使用纯净组件,pureComponent
高阶组件和高阶函数是什么
- 高阶函数:函数接收一个函数作为参数,或者将函数作为返回值的函数就是高阶函数 map some every filter reduce find forEach等等都属于高阶函数
- 高阶组价:接受一个组件,返回一个新组建的组件就是高阶组件,本质上和高阶函数的意思一样
- 高阶组件是用来复用react代码的一种方式
React与vue的不同之处(重要)
1. 组件化方面,react用的是jsx,一个js文件就是一个组件,而vue使用的是单文件组件
2. 数据流方面,react完全遵循单向数据流的原则,vue里面,理论上也是单向数据流,没有react严格,vue是可以双向数据绑定的
3. vue是响应式编程,react是函数式编程
4. 两者的diff算法不同 react用的算法是fiber (vue3.0)算法比react快
5. 在react中,有纯函数的概念
6. vue是一个渐进式的架构
7. react的元素(对象)创建出来是不允许改变的,只能通过新的值来覆盖