react面试

react16学习笔记

拉勾公开课

• https://www.bilibili.com/video/BV1Np4y1x7sc/?spm_id_from=333.788.videocard.14 (opens new window)

拉勾

• 前端面试宝典之 React 篇 (opens new window) 【质量高】
• 视频在自己的阿里云盘上 (opens new window)

前端面试宝典：react核心知识篇

• https://segmentfault.com/a/1190000039343974 (opens new window)

前端面试宝典：react-redux核心知识篇

• https://segmentfault.com/a/1190000039337341 (opens new window)
• 里面还有一个电子版的：https://xz-fe-interview.gitbook.io/fe-interview/~/settings/customization%E3%80%82 (opens new window)

函数组件和类组件不同，就因为这个不同导致了hook的使用必须遵循规则

• https://zhuanlan.zhihu.com/p/69153191 (opens new window)

高频前端面试题汇总之React篇（上）

• https://juejin.cn/post/6941546135827775525 (opens new window)

组件通讯方法归纳

• https://juejin.cn/post/6844903520500449288#heading-6 (opens new window)
  • 里面讲了过时的context的使用【过时的 API 将会继续在所有 16.x 版本中工作】，可以参考react官网 (opens new window)；官网同时也提供了react在16.3后新的context的使用。
  • 在这里的笔记 (opens new window)里【跨组件通讯=》第二种方式：context】，讲了新context的使用方法。

深入源码剖析componentWillXXX为什么UNSAFE开头的生命周期

• https://juejin.cn/post/6847902224287285255 (opens new window)

• https://juejin.cn/post/6844903679598805006 (opens new window)

珠峰2021react面试题

• 在自己的在gitee上 (opens new window) 【质量高】

setState和useState区别：经过测试他们表现一样

• https://juejin.cn/post/6959885030063603743#heading-6

• 相同点：

  • 我们发现无论是setState还是useState，当inBinchingUpdate不受react控制时，对于某个数据的操作不会合并，在setState之后紧接着拿这个数据拿到的是最新值。数据被操作一次组件立马重新渲染一次，然后接着下一次操作数据再渲染。
  • 我们发现无论是setState还是useState，只要inBinchingUpdate受react控制，那么组件就只会渲染一次；操作数据之后立马拿数据，数据还是上一次的值。

• 相同点：当inBinchingUpdate受react控制时：

  • setState：
    • 操作能被合并时————使用setState({xxx:xxxx})操作数据
      • 对于某个数据的操作被合并只执行最后一次操作，组件只更新一次。在setState之后紧随拿这个数据拿到的是上一次的值。
    • 操作不能被合并时————使用setState( ()=>{ return {} } )操作数据时
      • 对于某个数据的操作不会被合并，操作几次数据，setState( ()=>{ return {} } )里的函数（()=>{ return {} }）就执行几次，组件只更新一次。在setState之后紧随拿这个数据拿到的是上一次的值。
  • useState：
    • 操作能被合并时————使用useState产生的函数(xxx)操作数据
      • 对于某个数据的操作被合并只执行最后一次操作，组件只更新一次。在setState之后紧随拿这个数据拿到的是上一次的值。
    • 操作不能被合并时————使用useState产生的函数(()=>{})操作数据
      • 对于某个数据的操作不会被合并，每次操作会依次执行一次，组件只更新一次。在setState之后紧随拿这个数据拿到的是上一次的值。

如何理解react-router官网写的“history is mutable”？this.props.location与this.props.history.location有什么区别？

• 参考这里 (opens new window)

别人收集的react面试题：

• https://github.com/mpw0311/reactjs-interview-questions (opens new window)

react的父子组件执行顺序

• https://segmentfault.com/a/1190000040199436

如何理解Raect的副作用？

• 参考：https://juejin.cn/post/6873367188309622798

  • 例如：
    • useEffect中处理的是**「副作用」**。比如：在useEffect中修改了document.title。document.title不属于React中的状态，React无法感知他的变化，所以被归类到effect中。
    • 同样，**「使DOM聚焦」**需要调用element.focus()，直接执行DOM API也是不受React控制的。