react高级面试题

以下是一些React高级面试题:

一、组件相关

  1. React组件的生命周期有哪些(类组件)?在函数组件中如何实现类似功能?

    • 答案

      • 类组件生命周期:
        • componentDidMount:组件挂载后调用,常用于数据获取(如fetch请求)、添加事件监听等操作。
        • componentDidUpdate:组件更新后调用,可用于根据新的propsstate进行操作,但要注意避免无限循环更新(例如在componentDidUpdate中直接修改state且没有合适的条件判断时会导致无限循环)。
        • componentWillUnmount:组件卸载前调用,用于清理工作,如清除定时器、取消网络请求、移除事件监听等。
      • 函数组件中可以使用useEffect钩子来模拟类组件生命周期。useEffect的依赖数组为空([])时,相当于componentDidMountcomponentWillUnmount的组合;有依赖项时,每次依赖项变化时执行类似componentDidUpdate的操作。
      javascript 复制代码
      function MyComponent() {
          useEffect(() => {
              // 类似componentDidMount操作,如数据获取
              return () => {
                  // 类似componentWillUnmount操作,如清除定时器
              };
          }, []);// 空数组表示只在挂载和卸载时执行
      }
  2. 如何实现React组件的高阶组件(HOC)?有什么应用场景?

    • 答案

      • 高阶组件是一个函数,它接受一个组件并返回一个新的组件。
      javascript 复制代码
      function withLogger(WrappedComponent) {
          return class extends React.Component {
              componentDidMount() {
                  console.log('Component has mounted:', WrappedComponent.name);
              }
              render() {
                  return <WrappedComponent {...this.props} />;
              }
          };
      }
      • 应用场景包括代码复用(如权限验证、数据获取逻辑复用等)、对组件进行包装以添加额外的功能(如日志记录、性能统计等)。

二、状态管理相关

  1. 对比Redux和React Context API在状态管理方面的优缺点?
    • 答案
      • Redux
        • 优点:
          • 具有单一数据源,方便管理全局状态。
          • 提供了丰富的中间件(如redux - thunkredux - saga等)来处理异步操作。
          • 有成熟的生态系统,社区支持强大,有很多工具(如redux - devtools)可用于调试。
        • 缺点:
          • 配置相对复杂,对于小型应用可能会引入过多不必要的代码。
          • 学习成本较高,需要理解actionsreducersstore等概念。
      • React Context API
        • 优点:
          • 简单易用,不需要额外安装库,在React内部就可以使用。
          • 适用于简单的全局状态共享场景,不需要像Redux那样复杂的结构。
        • 缺点:
          • 当应用规模增大时,性能可能会受到影响,因为Context的更新会导致所有消费该Context的组件重新渲染。
          • 缺乏像Redux那样成熟的中间件来处理复杂的异步操作等情况。

三、性能优化相关

  1. React的性能优化有哪些常见方法?
    • 答案
      • 使用React.memo对函数组件进行浅比较优化,避免不必要的重新渲染。
      • 在类组件中使用shouldComponentUpdate生命周期方法(在React 16.3+中推荐使用React.PureComponent来简化这个过程)来手动控制组件是否更新。
      • 合理使用key属性,在列表渲染时确保key的唯一性且稳定,这有助于React识别哪些元素发生了变化,从而提高渲染效率。
      • 对于大型组件树,可以采用懒加载(React.lazy结合Suspense)来按需加载组件,减少初始加载时间。

四、React Hooks相关(针对React 16.8+)

  1. 如何使用useReducer替代useState?有什么场景更适合?

    • 答案

      • useReducer接受一个reducer函数和一个初始状态值,返回当前的state和一个dispatch函数。
      • 当状态逻辑比较复杂,涉及到多个子值或者下一个状态依赖于前一个状态的计算时,useReducer更适合。例如,一个计数器组件,如果除了增加和减少计数,还有其他复杂的操作(如根据计数值进行不同状态的切换等),使用useReducer可以使代码结构更清晰。
      javascript 复制代码
      const initialState = { count: 0 };
      function reducer(state, action) {
          switch (action.type) {
              case 'increment':
                  return { count: state.count + 1 };
              case 'decrement':
                  return { count: state.count - 1 };
              default:
                  throw new Error();
          }
      }
      function Counter() {
          const [state, dispatch] = useReducer(reducer, initialState);
          return (
              <div>
                  Count: {state.count}
                  <button onClick={() => dispatch({ type: 'increment' })}>+</button>
                  <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
              </div>
          );
      }
  2. useCallbackuseMemo的区别和使用场景是什么?

    • 答案

      • useCallback返回一个记忆化的回调函数,主要用于避免在每次渲染时创建新的函数实例,从而提高性能,特别是当函数作为props传递给子组件时,防止子组件不必要的重新渲染。
      • useMemo返回一个记忆化的值,用于缓存计算结果,当依赖项数组中的值发生变化时才重新计算。适用于计算开销较大的值的缓存,如复杂的数学计算、对象创建等。
      javascript 复制代码
      const memoizedCallback = useCallback(() => {
          doSomething(a, b);
      }, [a, b]);
      const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
相关推荐
爱的叹息14 分钟前
【前端】基于 Promise 的 HTTP 客户端工具Axios 详解
前端·网络·网络协议·http
遗憾随她而去.20 分钟前
从 0 开始认识 WebSocket:前端实时通信的利器!
前端·websocket·网络协议
老兵发新帖1 小时前
pnpm常见报错解决办法
前端
Sonetto19991 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin1 小时前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
好_快1 小时前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛1 小时前
前端技术Ajax入门
java·开发语言·前端
牧羊狼的狼1 小时前
React.memo 和 useMemo
前端·javascript·react.js
xixixin_2 小时前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮
还是鼠鼠2 小时前
Android移动应用开发入门示例:Activity跳转界面
android·前端·gitee·android studio·android-studio