2024年最新2023年前端 React 25道常见面试题汇总_前端面试题2023 react，面试经验 知乎

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• action：action 理解为动作，action 的值一般为一个对象，格式如 {type: “”, data:“”}，type 是必须要的，因为 reducer 处理数据的时候要根据不同的 type 来进行不同的操作。
• reducer：reducer 是初始化以及处理派发的 action 的纯函数。
• store：store 是一个仓库，用来存储数据，它可以获取数据，也可以派发数据，还能监听到数据的变化。
  而 reducer 的作用就是接收旧的 state 和 action，返回新的 state。

6，什么是受控组件

受控组件就是可以被 react 状态控制的组件。在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和 React 无关）。但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。

7，hooks+context 和 redux 你是怎么选择的，都在什么场景下使用

如果项目体量较小，只是需要一个公共的 store 存储 state，而不讲究使用 action 来管理 state，那 context 完全可以胜任。反之，则是 redux 的使用场景。

在进行状态管理时，通常遵循以下的原则：

• 如果你在组件间传递的数据逻辑比较复杂，可以使用 redux；
• 如果组件层级不多，可以使用 props；
• 如果层级较深，数据逻辑简单，可以使用 context。

8，使用 useffect 模拟生命周期

• 模拟 componentDidMount。第二个参数为一个空数组，可以模拟 componentDidMount，示例如下。

componentDidMount：useEffect(()=>{console.log('第一次渲染时调用')},[]) 

• 模拟 componentDidUpdate。没有第二个参数代表监听所有的属性更新，示例如下。

useEffect(()=>{console.log('任意状态改变')})  

如果需要监听多个属性的变化则需要将属性作为数组传入第二个参数。

useEffect(()=>{console.log('指定状态改变')},[状态1,状态2...])  

• 模拟 componentWillUnmount

useEffect(()=>{   ...  return()=>{ //组件卸载前}   }) 

9，setsate 和 usestate 的区别

• setState(updater [,callback] )：构造函数是唯一建议给 this.state 赋值的地方，不建议直接修改 state 的值，因为这样不会重新渲染组件，自动进行浅合并（只会合并第 1 层），由于 setState() 异步更新的缘故，依赖 state 旧值更新 state 的时候建议采用传入函数的方式。
• useState(initState)：setState(updater) 用于修改状态的方法，updater：object/function 用于更新数据，initState 用于状态的初始值。

10，如何监听 react 父组件 props 变化。

当 props 发生变化时执行，初始化 render 时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，旧的属性还是可以通过 this.props 来获取, 这里调用更新状态是安全的，并不会触发额外的 render 调用。

componentWillReceiveProps(props) { 
        console.log(props) 
    this.setState({show: props.checked}) 
} 

11，usememo 的作用，以及怎么使用

返回一个 memoized 值。

把 “创建” 函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。

你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证。将来，React 可能会选择 “遗忘” 以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目的。

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 的依赖为引用类型如何处理

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】