2024年前端 React 25道常见面试题汇总_前端面试题2024 react(1)

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

12，React 的 Component 和 Purecomponent 区别

Component 没有直接实现 shouldComponentUpdate 这个方法，但是 PureComponent 通过浅层的 Porps 和 state 的对比，内部实现了这个生命周期函数。

PureComponent 会跳过整个组件子树的 props 更新，要确保全部的子组件也是 pure 的形式。

Component 中需要手动执行的 shouldComponentUpdate 函数，在 PureComponent 中已经自动完成了（自动浅对比）。

PureComponent 不仅会影响本身，而且会影响子组件，所以 PureComponent 最好用在数据展示组件中。

PureCoponent 如果是复杂数据类型，这里会造成错误的显示（setState 浅复制更新，但是界面不会重新渲染）。

13，Hooks 相对于类有哪些优化

首先，我们来看一下类组件的一些缺点：

缺点 1：复杂且不容易理解的 “this”。

Hooks 解决方式：函数组件和普通 JS 函数非常相似，在普通 JS 函数中定义的变量、方法都可以不使用 “this.”，而直接使用该变量或函数，因此你不再需要去关心“this” 了。

缺点 2：组件数据状态逻辑不能重用

Hooks 解决方式：通过自定义 Hook，可以数据状态逻辑从组件中抽离出去，这样同一个 Hook 可以被多个组件使用，解决组件数据状态逻辑并不能重用的问题。

缺点 3：组件之间传值过程复杂

Hooks 解决方式：通过 React 内置的 useState()函数，可以将不同数据分别从 “this.state” 中独立拆分出去。降低数据复杂度和可维护性，同时解决类组件缺点三中 “内部 state 数据只能是整体，无法被拆分更细” 的问题。

通过 React 内置的 useEffect() 函数，将 componentDidMount、componentDidUpdate、componentWillUncount 3 个生命周期函数通过 Hook(钩子) 关联成 1 个处理函数，解决事件订阅分散在多个生命周期函数的问题。

14，Hooks 父组件怎么调用子组件的方法

父组件使用 useRef 创建一个 ref 传入 子组件 子组件需要使用。useImperativeHandle 暴露 ref 自定义的实例值给父组件，并且需要使用 forwardRef 包裹着。

15，React 通过什么方法修改参数？

类组件修改数据的方法, 通过 setState , 注意 setState 的修改方法有两种，而且它是异步的

函数组件修改方式通过自定义的方法。需要通过 useState ， 例如。const [count,setCount] = useState(0)。

16，说说你对 react native 的了解

React native 基于 JavaScript 开发的一个 可以开发原生 app 的这么一个集成框架，它兼容开发 iOS 和 Android 能够实现一套代码，两个系统都能使用，方便维护，相比于 web 前端的 react ，react-native 更好的提供了一些调用手机硬件的 API, 可以更好的开发移动端，现在 react-native 它的生态环境也是越来越好，基本上可以完全实现原生开发，

但是现在好多的应用还是用它来套壳 （原生 + web 前端），用它来做有些路由，和框架的搭建，然后里面内容来使用前端的 react 来实现，这样一来让维护更方便，开发更快捷

17，React 的输入框输入文字就会触发 onchange，怎么拿到他最后输入的结果呢？

方法 1：通过受控组件，可以获取到 state 里面的值，获取修改结果，代码如下。

 class Home extends React.Component { 
    state = { 
        val:"" 
     } 
     //这是一个通用的写法，然后注意 name的值一定要与state定义的一直 
    changeInput = (e) =>{ 
        let {name,value} = e.target 
        this.setState({ 
           [name]:value 
       }) 
    } 
    render(){ 
       return <> 
         <input onChange="this.state.val" /> 
       </> 
    } 
 } 

方法 2：通过 ref 来获取里面的值。

class Home extends React.Component { 
  render(){ 
      //this.val 获取里面的真是dom 
      return <input ref={node=>this.val} /> 
   } 
} 

18，React 的 render 什么时候渲染

React 生命周期有三个阶段。 两个阶段都会执行 render 主要从更新和挂载两个阶段来讲，挂载阶段会执行一次，更新阶段主要会涉及 shouldComponentUpdate。

首先，我们看一下挂载阶段：

constructor(){} 
static getDerivedStateFromProps(){ 
   return {} 
 } 

render(){}  //挂载阶段会执行一次 
componentDidMount(){} 

接下来，我们看一下更新阶段：

static getDerivedStateFromProps(props, state){rerturn {}} 
shouldComponentUpdate(nextProps, nextState).{ 
     return Boolean  //注意如果 false 则 不向下执行 ，true的时候会执行render
} 

render() ..       

19，useEffect 的依赖为引用类型如何处理

useEffect 的依赖为引用类型的时候，可能会导致监听不出发，原因就是监听的统一个地址的时候，对象本身地址没变，所以监听的结果就是认为数据并没有改变从而不直接调用。

解决的方法有以下几点：

• 如果数据是对象的话，可以监听对象的里面的值，值是基本类型，如果值改变了，那么可以监听执行；
• 在去修改对象和数据的时候，使用参拷贝或者浅拷贝，这样地址发生改变可以监听执行；
• 可以转成字符串，通过 JSON.stringify() , 监听字符串这样的，这样改变也会执行；

20，说一下 key 发生哪些变化会触发什么生命周期

React 的 key 值给组件作为唯一标识，类似身份证，当数组发生增删改查的时候可以通过这个 标识来去对比虚拟 dom 的更改前后，如果相同标识的数据或者属性没有改变的话，讲直接略过，对比有改变的然后直接改变此项。

如果给组件添加 key，如果 key 值改变的时候，组件将会触发如下的生命周期：

• constructor
• getDerivedStateFromProps()
• render(){}
• componentDidUpdate

21，说说 React 里面的 createPortal。

react.createPortal() 这个方法是来使用做弹窗 Modal 组件的, 在没有这个组件之前我们可以自己定义组件，然后去实现 Modal 效果。

const styles = { 
  modal: { 
    position: 'fixed', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    backgroundColor: 'rgba(0,0,0,0.3)', 
    display: 'flex', 
    justifyContent: 'center', 
    alignItems: 'center' 
  } 
} 

class Modal extends Component { 
  constructor(props) { 
    super(props); 
  } 
  render() { 
    return ( 
      <div style={styles.modal}> 
        {this.props.children} 
      </div> 
    ); 
  } 
} 

react.createPortal 这个来制作弹窗组件，它 在 Modal 组件位置进行 fixed 定位，可以任意的挂载到某个 dom 元素上，使用后的管理更方便，但是注意需要预留 html 的挂载元素。

22，说一下 React 全家桶

真正意义上的 react 全家桶，其实指的是 react，react-dom，react-native。因为 react 核心库只是 vDom 的操作，无关 dom(dom 操作在 react-dom 中)——这意味着它天生就可以做到跨平台。

注意这里有误区，react-router，react-router-dom，react-dux 只是社区的一些使用较多的解决方案，事实上它们各有缺陷。

23，简单介绍下 fiber

React Fiber 是 React 框架的一种底层架构，为了改进 React 的渲染引擎，使其更加高效、灵活和可扩展而提供的。

传统上，React 使用一种称为堆栈调和递归算法来处理虚拟 DOM 的更新，这种方法在大型应用或者频繁更新的情况下可能会产生性能问题。React Fiber 则是基于一种增量渲染的思想，它将更新任务分解成小的、可中断的单元，使得 React 在更新时可以更灵活地控制和切换任务，提高应用的响应性。

React Fiber 的核心功能包括：

• 增量渲染： React Fiber 将更新任务拆分成多个小任务单元（称为 “fiber”），并使用优先级调度器来处理这些任务，以提高响应性和用户体验。
• 优先级调度： Fiber 引入了优先级概念，使 React 能够根据任务的优先级来决定任务的执行顺序，确保高优先级任务得到及时处理。
• 中断与恢复： React Fiber 允许在渲染过程中中断任务，然后在适当的时机恢复执行，从而避免了阻塞的情况。
• 任务取消： Fiber 具备任务取消的能力，可以取消不必要的更新，提高性能。

24，谈谈你对 Hooks 的理解

react-hooks 提供给了函数式组件以业务逻辑抽离封装的能力，从单一组件单位进行 UI 与业务逻辑的分离，以此来保证函数式组件的 UI 纯净。

Hooks 的出现解决了两个问题：

• 组件的状态逻辑复用
• class 组件自身的问题
  组件的逻辑复用：在 hooks 出现之前，react 先后尝试了 mixins 混入，HOC 高阶组件，render-props 等模式但是都有各自的问题，比如 mixin 的数据来源不清晰，高阶组件的嵌套问题等等

Class 组件自身的问题：class 组件本身提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this 指向问题等等。

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-kmKuYXbp-1713022363240)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！