面试-react生命周期

1,698 阅读3分钟

react生命周期其实没啥只不过其拗口的api长度令人难受,英文口语不好的我着实难受的紧,但是可以通过首字母的缩写来讲述,可以方便很多,例如:scu(shouldComponentUpdate)。当然你满嘴的简写肯定是没办法让面试官满足的😌,这就需要需要一定的技巧和记忆力了。

-->进入正题

使用class组件的时候肯定要使用生命周期,那么请看下面的图片来回顾下react16新生命周期

流程贴图:


那怎么讲:

react16前是递归的,react16后改成循环来代替之前的递归,也就是fiber架构,在react在16版本中将原先的componentWillMount、componentWillReceiveProps、componentWillUpdate标记为unsafe,也就是相当于废弃了,增加了两个get生命周期,分别触发在render前后,getDerivedStateFromProps触发在render前,getSnapshotBeforeUpdate触发在render后。

scu:因为父组件渲染子组件也会渲染,但是子组件没有变化也要跟着渲染,这就造成了子组件组件的重复渲染了。通过scu来浅对比props和state的差异,如果相同返回false,不会渲染子组件,相反就会渲染。

异步操作放在:componentDidMount中,当然如有特殊需求可以放在constructor中请求

为什么不放在要废弃的will里面:因为会异步请求两次,在客户端一次;服务器端;16.0之后采用了fiber进行协调,render之前的生命周期方法可能会被多次执行。

特殊需求:

  1. 假设某个页面有10个组件,但是这10个组件不是每次都显示全部,而是根据后端的数据来配置当前显示哪几个组件,这就需要先返回数据,再进行组件的渲染。
  2. 组件过大,render时间过长,需要提高用户体验,那就需要一个前置的loading页面

-->面试官会怎么问

写在开始:传统的肯定是先抛出问题来解题,但是面试嘛,肯定是先看答案才畅快,这点我深有体会~~

  1. react16生命周期和之前的版本的差异?(PS:最喜欢唠的点了,我也是醉了)
  2. 为什么react组件会重复渲染?
  3. react的请求应该放在哪个生命周期中?
  4. 为什么不在componentWillMount中?
  5. 为什么会废弃三个will
  6. react16之前的那些不好的生命周期怎么度过到react16的新生命周期(主要是componentWillReceiveProps,另外两个其实都很少用)

-->谈一谈

那么为什么面试官会问react生命周期呢?

react生命周期是react生态中的基本,而16版本的项目迭代是很多项目急需的,新旧的碰撞是难以避免的,这里面可以考察的点也很多,二者的差异->从旧版本重构到新新版的项目迭代->fiber架构->js的渲染机制

写在最后:

另外文中多数都是cv,别介意,都是为了学习🐶~~