React

React生命周期

React组件类型有哪些

React新增的钩子和即将移除的钩子

React组件嵌套,钩子函数的执行顺序

如何注册事件,以及如何处理this指向的问题

如何阻止事件默认行文

什么叫做状态提升

React封装组件的流程

怎么实现跨组件传参

如何设置状态,以及如何正确的获取更新之后的状态

性能优化使用哪个钩子,怎么用

你知道哪些hook

useRef和createRef的区别 useMemo和useCallback的区别

什么是回流 什么是重绘?

  1. # 回流
  2. 1. 位置的改变 translate 定位的left top
  3. 2. 元素位置的显示和隐藏也会引起回流
  4. 3. 宽高的变化
  5. # 重绘
  6. 1. 颜色的变化
  7. 2. 字体风格的变化
  8. 3. 背景的变化
  1. 单页应用优化访问速度
  2. 触发回流的条件 触发重绘的条件?
  3. 如何获取路由动态参数
  1. 1. hash有#号,#号后面的url不会向后端发起请求
  2. 2. hash路由使用onhashchange监听 history使用onpopstate监听
  3. 3. history使用的是H5api pushState replaceState
  4. 4. hash值相同时,不会触发hashchange,history当输入相同的路径的时候,会将浏览器中的地址当成是请求地址向后台发送请求,会造成页面404
  5. 5. abstract模式是在没有浏览器api的情况下自动启用,abstract模式在切换页面的时候,路径是不会发生变化的
  6. 6. 关键字 onhashchange pushstate replacestate popstate
  7. 7.
  1. 什么是单页应用? 一个项目只有一个html页面 所有的页面跳转依据于路由进行
  2. 单页应用的有点和缺点? 用户体验好,切换速度快,不需要刷新整个页面
  3. 怎么解决单页应用缺点的问题? 使用服务端渲染 nuxt
  4. History hash abstract模式的区别?

说说React中onClick绑定后的工作原理

  1. 首先react有自己的事件系统,也是遵循w3c的,这个事件系统的名称叫做合成事件(SyntheticEvent),而其自定义事件系统的动机主要包含以下几个方面
    • 抹平不同浏览器之间的兼容性差异。最主要的动机。
    • 件合成既可以处理兼容性问题
    • 提供一个抽象的跨平台事件机制
    • 可以做更多优化
    • 可以干预事件的分发
  2. 当给组件(元素)绑定onClick事件之后
    1. react会对事件先进行注册,将事件统一注册到document
    2. 根据组件唯一的标识key来对事件函数进行存储
    3. 统一的指定dispatchEvent回调函数
    4. 储存事件回调:react会将click这个事件统一存到一个对象中,回调函数的存储采用键值对(key/value)的方式存储在对象中,key 是组件的唯一标识 id,value 对应的就是事件的回调函数,通过组件的key就能回调到相应的函数了

说说react里面bind与箭头函数

  1. bind 由于在类中,采用的是严格模式,所以事件回调的时候会丢失this指向,指向undefined,需要使用bind来给函数绑定上当前实例的this指向
  2. 箭头函数的this指向上下文,所以永久能拿到当前组件实例的this指向,我们可以完美的使用箭头函数来替代传统事件处理函数的回调

说说react中的性能优化

性能优化分为2个方面

  1. 使用shouldComponentUpdate来对state和props进行对比,如果两次的结果一直,那么就return false
  2. 使用纯净组件,pureComponent

高阶组件和高阶函数是什么

  1. 高阶函数:函数接收一个函数作为参数,或者将函数作为返回值的函数就是高阶函数 map some every filter reduce find forEach等等都属于高阶函数
  2. 高阶组价:接受一个组件,返回一个新组建的组件就是高阶组件,本质上和高阶函数的意思一样
  3. 高阶组件是用来复用react代码的一种方式

React与vue的不同之处(重要)

  1. 1. 组件化方面,react用的是jsx,一个js文件就是一个组件,而vue使用的是单文件组件
  2. 2. 数据流方面,react完全遵循单向数据流的原则,vue里面,理论上也是单向数据流,没有react严格,vue是可以双向数据绑定的
  3. 3. vue是响应式编程,react是函数式编程
  4. 4. 两者的diff算法不同 react用的算法是fiber (vue3.0)算法比react
  5. 5. react中,有纯函数的概念
  6. 6. vue是一个渐进式的架构
  7. 7. react的元素(对象)创建出来是不允许改变的,只能通过新的值来覆盖

一般如何封装hook

你用过哪些hook

你用过哪些异步的中间件,saga你是如何使用的