跳到主要内容

React

2024年03月04日
柏拉文
越努力，越幸运

一、API​

1.1 什么是 Portal ? ​

1.2 什么场景需要用 Portal ?​

1.3 React 中 <> 与 <Fragment> 有什么区别呢？​

1.4 子组件是一个 Portal, 发生点击事件能冒泡到父组件吗？​

1.5 dangerousSetInnerHTMl 知道不？和 innerHTML 的区别？​

二、原理​

2.1 JSX 本质是什么?​

2.2 useMemo 实现原理?​

2.3 useState 实现原理？​

2.4 useEffect 实现原理？​

2.5 useCallback 实现原理？​

2.6 React 组件渲染更新流程?​

2.7 React 并发模式实现原理？​

2.8 React Fiber 架构的理解? 解决了什么问题?​

2.9 Fiber 解决了什么问题? 为什么 Fiber 能够解决卡顿的问题?​

2.10 useTransition 实现原理？​

2.11 React 中为什么不能直接用 requestIdleCallback ?​

2.12 说说 React render 方法的原理 ? 在什么时候会被触发 ？​

2.13 说说 React JSX 转换成真实 DOM 过程？​

2.14 React Fiber 是如何实现更新过程可控？​

2.15 Fiber 为什么是 React 性能的一个飞跃?​

三、通信​

3.1 React 组件通讯的方式​

3.2 React 单向数据流的优缺点?​

四、Hooks​

4.1 useState 为什么返回的是数组,而不是一个对象​

4.2 useState 更新状态时,如果对象嵌套过深,会发生更新异常的情况,如何解决呢?​

4.3 useCallback 与 useMemo 的区别?​

4.4 useEffect(callback,deps) 中的 deps 是如何进行比较的?​

4.5 useState 中的 state 是如何进行比较的? ​

4.6 为什么不可以在函数组件外部使用 Hooks ？​

4.7 为什么不可以在条件语句、循环条件里面使用 Hooks ？​

4.8 useEffect 与 componentDidMount 的区别? ​

4.9 useCallback()、useMemo() 有什么缺陷? 可以滥用吗?​

4.10 函数组件怎么实现 shouldComponentUpdate ？​

4.11 类组件中的 setState 和函数组件中的 useState 有什么异同？​

4.12 React useEffect 对应类组件的哪些生命周期？​

4.13 有遇到过 React Hooks 中的闭包问题吗? 如何解决? ​

4.14 如何在 React 函数组件区分 mounted 和 updated（比如需要在 updated 时候做一个操作，但是 mounted 时候不需要）​

4.15 useState 的传参方式，有什么区别？​

4.16 为什么每次更新的时候都要运行 useEffect ?​

4.17 多次执行 useState()，会触发多次更新吗？​

4.18 useState()的 state 是否可以直接修改？是否可以引起组件渲染？​

4.19 useTransition 解决了什么问题? 可以用 setTimeout 替代吗？​

4.20 useTransition vs useDeferredValue ? ​

4.21 useLayoutEffect 与 useEffect 的区别? 什么时候用 useLayoutEffect, 什么时候用 useEffect？​

4.22 useTransition 解决了什么问题? 可以用节流代替吗？​

4.23 使用 useState 需要注意什么?​

4.24 useState() 的 state 是否可以直接修改？是否可以引起组件渲染？​

4.25 getDerivedStateFromProps 有什么作用?​

4.26 getSnapshotBeforeUpdate 有什么作用?​

4.27 如何让 useEffect 支持 async/await？​

4.28 说说你对 React Hooks 的闭包陷阱的理解, 有哪些解决方案？​

4.29 如何基于 useMemo 实现 useCallback​

五、类组件​

5.1 React 类组件生命周期对 setState 调用特点?​

5.2 类组件 shouldComponentUpdate 生命周期如何使用？​

5.3 React 类组件修改 this 指向的方式有哪些?​

5.4 调用 setState 之后发生了什么?​

5.5 说说对受控组件和非受控组件的理解, 以及应用场景?​

5.6 调用 super(props) 的目的是什么?​

5.7 应该在 React 组件的何处发起 Ajax 请求？​

5.8 setState是同步还是异步，可以实现同步吗，怎么实现，异步的原理是什么？​

5.9 为什么建议传递给 setState 的参数是一个 callback 而不是一个对象？​

5.10 shouldComponentUpdate 的作用? 如何正确使用?​

5.11 React Fiber 架构的出现影响了哪些生命周期?​

5.12 super() 和 super(props) 有什么区别?​

5.13 说说 React 中的 setState 执行机制​

5.14 React 中 refs 干嘛用的？​

5.15 setState 何时会合并 state?​

5.16 React18 中 setState的变化 ?​

5.17 基于 React.Component 类实现 React.PureComponent 的功能, 并实现 Object.is ?​

5.18 如果 React.Component 没有显示声明 constructor, 会发生什么？​

5.19 React 为什么要废弃 componentWillMount、componentWillReceiveProps、componentWillUpdate 这三个生命周期钩子？ 它们有哪些问题呢？React 又是如何解决的呢？​

六、函数组件​

6.1 函数组件和类组件有什么区别?​

6.2 函数组件中如何实现像 PureComponent 类似的功能?​

6.3 什么是高阶组件，它解决了什么问题？​

七、状态管理​

7.1 Reducer 的作用? ​

7.2 Redux 设计思想、原理?​

7.3 Zustand 设计思想、原理？​

7.4 React-Redux 设计思想、原理?​

7.5 Redux 为什么要把 Reducer 设计成纯函数?​

7.6 为什么使用 Zustand 呢? Zustand 有什么优势?​

7.7 Context 是什么? 如何使用 Context? 它有哪些问题?​

八、事件系统​

8.1 什么是合成事件?​

8.2 事件是如何绑定的?​

8.3 事件是如何触发的?​

8.4 点击按钮, 发生的过程？​

8.5 React事件绑定的方式有哪些？区别？​

8.6 React 事件和 DOM 事件的区别？​

8.7 说一下 React 的 batchUpdate 机制?​

8.8 React 的事件和普通的 HTML 事件有什么不同？​

8.9 说说 React 事件和原生事件的执行顺序?​

九、性能优化​

9.1 React 中不可变数据 immer 优势 ​

9.2 immer 相对于 cloneDeep 有什么优势? ​

9.3 React 做过哪些性能优化?​

9.4 如何加载一个大型文件资源?​

9.5 React 中怎么阻止组件的渲染？​

9.6 如果有一个非常大的 React 页面,优先渲染某一部分,这该怎么做？​

9.7 说说你是如何提高组件的渲染效率的？在 React 中如何避免不必要的 render？​

9.8 什么是 prop drilling，如何避免？​

十、异常处理​

10.1 React 中怎么捕获异常? ​

10.2 React 中怎么处理异常?​

10.3 React 异常捕获机制?​

十一、框架对比​

11.1 React 与 Vue 有什么区别?​

11.2 Vue 组合函数与 React Hooks 的区别?​

11.3 Vue 3.0 Hooks 与 React Hooks 区别?​

11.4 为什么 React 有 Fiber 架构, 但是 Vue 不需要 Fiber 架构?​

十二、Diff 算法​

12.1 什么是虚拟 DOM? ​

12.2 虚拟DOM 有什么优势?​

12.3 虚拟DOM 原理是什么? React 如何生成虚拟 DOM?​

12.4 React Diff 算法机制、思想、有什么优化?​

12.5 React 中 key 的作用是什么? 如果不加 Key 会怎么样？​

12.6 React 中为什么不可以用 Index 作为 key ?​

12.7 React Diff 与 Vue2.0 Diff、Vue3.0 Diff 有什么区别？​

12.8 Vue、React 在虚拟 DOM 的 Diff 上，做了哪些改进使得速度很快？​

12.9 说说 Real DOM 和 Virtual DOM 的区别？优缺点？​

12.10 为什么 React 不采用 Vue 的双端对比算法？​

12.11 虚拟 DOM 真的很快吗 ？​

十三、React 版本​

13.1 React17 有哪些新变化?​

13.2 React18 有哪些新变化？​

13.3 React19 有哪些新变化? ​

十四、React 路由​

14.1 实现前端路由​

14.2 说说 React Router 有几种模式？实现原理？​

十五、React 场景​

15.1 React 实现树组件？​

15.2 React 实现表格组件？​

15.3 React 中, 怎么实现父组件调用子组件的方法?​

十六、React 服务端渲染​

16.1 Next.js 是什么？ Next.js 原理？​

16.2 React 服务端渲染怎么做? 原理是什么? ​

参考资料​

web前端面试 - 面试官系列

金九银十，带你复盘大厂常问的项目难点