React 基础面试题, 在 React 构造函数中调用 superprops 的目的是什么?
React 基础面试题, 在 React 构造函数中调用 superprops 的目的是什么?
QA
Step 1
Q:: React 构造函数中调用 super(props) 的目的是什么？
A:: 在 React 中，当你在类组件的构造函数中扩展了一个父类 (通常是 React.Component 或 React.PureComponent) 时，必须首先调用 super() 函数。这是因为子类的构造函数必须首先调用父类的构造函数来继承其属性和方法。super(props) 的作用是将 props 参数传递给父类的构造函数，使得 this.props 在构造函数中是可用的。否则，你在构造函数中尝试访问 this.props 时会返回 undefined。
Step 2
Q:: React 中的类组件和函数组件有什么区别？
A:: 类组件 (class component) 是使用 ES6 的 class 语法定义的组件，它可以使用状态 (state) 和生命周期方法。而函数组件 (function component) 则是使用函数语法定义的组件，早期的函数组件是无状态的，随着 React 16.8 引入了 Hooks，函数组件也能够使用状态和其他 React 特性。类组件需要通过继承 React.Component 或 React.PureComponent 来创建，而函数组件则是一个简单的函数，它接受 props 并返回 React 元素。
Step 3
Q:: React 生命周期方法有哪些？
A:: React 的生命周期方法分为三类：挂载 (mounting)、更新 (updating) 和卸载 (unmounting)。挂载阶段包括 constructor(), componentDidMount(), render(), 和 getDerivedStateFromProps()。更新阶段包括 shouldComponentUpdate(), componentDidUpdate(), render(), getDerivedStateFromProps() 和 getSnapshotBeforeUpdate()。卸载阶段包括 componentWillUnmount()。这些生命周期方法允许开发者在组件的不同阶段执行特定的操作。
Step 4
Q:: 什么是 React 中的 'state' 和 'props'？
A:: state 和 props 是 React 中的两个核心概念。state 是组件自身管理的数据，可以通过 setState() 方法来更新，更新后的状态会触发组件的重新渲染。state 通常用于管理组件的内部数据。props 则是组件外部传递给组件的数据，由父组件传递给子组件，子组件不能修改 props。props 通常用于父组件向子组件传递数据。
Step 5
Q:: 在 React 中，如何优化性能？
A:: React 性能优化的方法包括：1) 使用 shouldComponentUpdate 或 React.PureComponent 来避免不必要的渲染；2) 使用 React.memo 对函数组件进行优化；3) 使用 React.lazy 和 Suspense 进行代码拆分和懒加载；4) 合理使用键值 (key) 属性，以帮助 React 更有效地进行 DOM 的差异化计算；5) 使用 useCallback 和 useMemo 来缓存函数和计算结果，减少不必要的重新计算和渲染。