高级前端面试-React

Tomarsh
395 阅读4分钟

react概念

  1. 类组件和函数组件,什么时候用类组件 获取组件实例

  2. 类组件如何实现逻辑复用？ 高阶组件、render props

  3. 选择hooks的优点 状态逻辑复用；状态逻辑集中，易于理解；类组件不利于优化，比如不能很好的压缩

  4. 为什么要用hooks,解决了什么问题 同上

  5. react的context的使用场景 共享对一个组件树全局的信息， 不需要一层层传参

  6. 受控组件和非受控组件 非受控组件：数据只保存在内部state中； 受控组件：用props传入数据 派生状态建议：完全的受控组件；带key的非受控组件

react更新

  1. 为什么不要在循环、条件语句或者嵌套方法中调用Hooks 因为react依赖hook的顺序，将内部state和hook关联起来

  2. react15和react16更新机制的差异 react15架构由协调器（reconciler）、渲染器（renderer)组成，采用的是基于栈的递归的更新方式，不可中断。 React16有协调器（reconciler）、渲染器（renderer）、调度器（scheduler)组成，采用基于fiber树的更新方式，可中断。

  3. 为什么react16架构升级后就能中断更新,根据什么决定是否中断 react16采用的是fiber树，fiber树中父节点指向第一个子节点，子节点构成一条链表，每个子节点的return指向父节点。fiber树是一层一层的构建而成的，

4.. react的fiber节点树是什么数据结构，为什么要用这种数据结构 fiber树中父节点指向第一个子节点，子节点构成一条链表，每个子节点的return指向父节点。fiber树是一层一层的构建而成的。 为了中断

  1. react中调和的部分是在哪个包?有看过实现吗

  2. react diff 算法复杂度是多少 o（n）

  3. 说下react的key react在比对时分为两种情况：有key和没key。没key就按照索引依次比较，不同就重新创建dom；使用key，会复用已有的具有相同key的元素。

  4. react生命周期 常见的： 挂载：constructor--》render--》componentDidMount 更新：render => componentDidUpdate 卸载：componentWillUnmount

不常见： 挂载：constructor--》static getDerivedStateFromProps--》 render--》componentDidMount

更新：static getDerivedStateFromProps =》 shoudComponentUpdate => render => getSnapshotBeforeUpdate => componentDidUpdate

更新阶段废弃：componentWillUpdate， componentWillReceiveProps

  1. react新增了什么生命周期，删除了什么生命周期，为什么要删除 删除了componentWillMount; componentWillReceiveProps，componentWillUpdate

新增 getDerivedStateFromProps

  1. setState更新是同步还是异步 异步，要获取改变后的状态可以通过callback或生命周期函数

  2. react的强制更新有了解吗 一般，当组件props或者state发生变化时，组件将重新渲染，如果render方法依赖其他数据，可以调用forceUpdate强制刷新。调用forceUpdate会跳过组件shouldComponentUpdate方法

  3. react函数组件和类组件触发更新的方式有哪些 setState, forceUpdate

  4. react在一秒内点击按钮多次(+1),如何获取最后一次的新状态

  5. React虚拟dom和diff的描述 虚拟dom记录了组件类型、props的普通对象， diff是比较虚拟dom，更新dom树的过程

  6. react异步渲染原理，优先级如何划分 react16采用双缓存fiber树，当前屏幕显示内容对应的fiber树称为current fiber树，正在内存中构建的称为workInProgress fiber树。 fiberroot是应用的根，rootfiber是当前页面对应的fiber根节点 当workInProgress fiber构建完成后一次性commit 优先级：同步执行 （生命周期方法、输入） 高优先级（交互事件、动画） 低优先级（数据请求）

  7. react如何实现函数式调用组件 获取类组件的引用可以得到组件实例 juejin.cn/post/684490…

react事件系统

  1. react合成事件了解吗？ react通过SyntheticEvent封装了原生事件，它拥有和原生事件一样的接口。事件没有绑定到单独的元素中，而是绑定在document上，通过事件冒泡的方式委托执行。 ReactEventListener维持了一个映射所有组件内部事件监听和处理函数，负责事件组成和分发。 如果要使用原生事件，可以在生命周期中通过addEventListener添加

  2. 这些事件处理函数最终挂载到了哪？ document

  3. react中如何阻止冒泡 stopPropagation

  4. react如何阻止原生默认事件 preventDefault()

router

  1. 如何实现路由监听 hooks APi

  2. 说下react-router源码你看完后印象深刻的部分

  3. react-router权限路由写一下 通过全局组件；模仿vue添加meta到路由中，render是获取判断

  4. 前端路由实现原理 hash模式： hashChange事件，window.location对象

history模式： popState事件(监听前进后退)、pushState、replaceState, window.history对象

更多其它面试题： mp.weixin.qq.com/s?__biz=MzU…

mp.weixin.qq.com/s?__biz=MzU…

mp.weixin.qq.com/s?__biz=MzU…

avatar
文章
阅读
粉丝