【精品问答】前端开发必会之React

很高兴看到您对React及其生态系统有如此深入的了解和兴趣！针对您的问题，我将一一提供简要答案，以帮助您更好地掌握React及其相关概念。

1. 当你调用 setState 的时候，发生了什么事？

   • 调用 setState 会触发组件的状态更新。React会将新的状态与当前状态合并，并计划在未来的某个时刻重新渲染组件。这个过程可能被批量处理以提高性能，且在某些情况下（如在事件处理中）会异步执行。

2. React 项目用过什么脚手架（本题是开放性题目）

   • 常见的React脚手架有Create React App、Next.js、Gatsby、React Boilerplate等。

3. 什么时候在功能组件( Class Component )上使用类组件( Functional Component )？

   • 这个表述似乎有误，应为“何时使用功能性组件而非类组件”。通常，在不需要生命周期方法或复杂状态管理时，推荐使用函数式组件。随着React Hooks的引入，功能性组件也能处理状态和副作用，使得它们更受欢迎。

4. React 中 keys 的作用是什么？

   • Keys 是给列表中的元素提供的唯一标识，帮助React识别哪些元素改变了、被添加了或移除了，从而优化DOM操作，避免不必要的重渲染。

5. React 优势有哪些

   • 组件化开发、虚拟DOM提高性能、单向数据流易于理解、丰富的生态系统、React Native实现跨平台开发等。

6. react diff 原理（常考，大厂必考）

   • React Diff算法是一种高效的树比较算法，用于确定最小变更集，仅更新实际变化的部分，而不是整个UI。它通过分层比较、节点复用、关键属性对比等方式减少DOM操作，提升性能。

7. react 生命周期

   • 主要有挂载阶段（constructor, componentDidMount）、更新阶段（shouldComponentUpdate, componentDidUpdate）、卸载阶段（componentWillUnmount）等。

8. shouldComponentUpdate 是做什么的？

   • 该方法用于决定组件是否需要更新。返回 true 表示需要更新，false 则跳过，有助于性能优化。

9. 为什么虚拟 dom 会提高性能?

   • 虚拟DOM通过内存中轻量级的对象结构来表示真实DOM，比直接操作DOM快得多。React通过计算虚拟DOM差异，只对必要的部分进行实际DOM操作，减少了浏览器重排和重绘，提高了性能。

10. React 中 refs 的作用是什么？

    • Refs 提供了一种方式来访问DOM元素或在React组件中创建实例的引用，便于直接操作或读取其状态。

11. setState 和 replaceState 的区别

    • setState 用于更新组件状态并触发重渲染，可以接受一个对象或回调函数作为参数。而 replaceState 已经被废弃，原本用于替换当前状态而不合并，现在应使用 setState 并传递全新的状态对象。

12. redux 有什么缺点

    • 过度中心化可能导致大型应用难以维护；学习曲线陡峭；对于小型应用可能过于繁琐；过多的state更新可能导致性能问题。

13. 简述 flux 思想

    • Flux是一种架构思想，强调单向数据流：Actions触发Dispatcher分发事件，Stores监听这些事件并更新数据，最后Views根据Store的变化重新渲染。它旨在解决MVC模式中数据流向复杂的问题。

14. React 中有三种构建组件的方式：

    • 函数式组件、类组件、以及使用Hooks的函数式组件。

15. react 组件的划分业务组件技术组件？

    • 业务组件关注具体业务逻辑和展示，技术组件则抽象通用功能，如布局、样式、交互逻辑等。

16. 描述事件在 React 中的处理方式

    • React使用合成事件系统，对原生DOM事件进行了封装，提供了跨浏览器兼容性，事件绑定通过props完成，自动处理事件委托，支持事件池以优化内存使用。

17. 应该在 React 组件的何处发起 Ajax 请求

    • 通常在组件的生命周期方法（如 componentDidMount 或 useEffect 钩子）中发起Ajax请求，确保DOM已加载且组件已挂载。

18. (在构造函数中)调用 super(props) 的目的是什么

    • 在ES6类继承React.Component时，必须在构造函数中通过super(props)调用基类构造函数，以便正确初始化this.props。

19. 除了在构造函数中绑定 this，还有其它方式吗

    • 可以使用箭头函数定义类的方法，自动绑定this；或者在构造函数中手动绑定；使用React Hooks中的useCallback也可以达到类似效果。

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

    • 当setState依赖于前一个状态时，传入函数形式的setState能保证获取到最新的状态值，避免并发更新导致的不一致。

21. 何为高阶组件(higher order component)

    • HOC是一种函数，接收一个组件并返回一个新的组件，用于重用代码、修改行为或增加新功能，不改变原有组件结构。

22. 何为受控组件(controlled component)

    • 受控组件是指表单元素（如input）的值由React控制，即通过state和onChange事件处理程序同步输入值，而非由DOM直接管理。

23. 在 React 当中 Element 和 Component 有何区别？

    • Elements是React的基本单位，代表UI的一个静态描述，类似于DOM元素。Components则是创建Elements的函数或类，负责描述UI的结构和行为。

24. (组件的)状态(state)和属性(props)之间有何区别

    • State是组件内部可变的数据，由组件自身管理，影响组件的渲染结果。Props是父组件传递给子组件的数据，是不可变的，用来配置子组件。

25. 展示组件(Presentational component)和容器组件(Container component)之间有何区别？

    • 展示组件关注UI外观和布局，不涉及数据管理和业务逻辑。容器组件则负责管理数据和业务逻辑，通过props向展示组件传递数据。

26. 类组件(Class component)和 函数式组件(Functional component)之间有何区别？

    • 类组件支持更多特性，如生命周期方法、状态(state)和refs。函数式组件更简洁，自React Hooks推出后，也支持状态和副作用处理，适合大多数场景。

27. createElement 和 cloneElement 有什么区别？

    • React.createElement用于创建React元素，它是React组件的工厂函数。React.cloneElement则用于克隆并扩展一个React元素，可以在克隆过程中添加额外的props或子元素。您也可以通过ECS一键诊断全面排查并修复ECS问题。