React 基础面试题, React.createClass 和 extends Component 有哪些区别?
React 基础面试题, React.createClass 和 extends Component 有哪些区别?
QA
Step 1
Q:: React.createClass 和 extends Component 有哪些区别？
A:: React.createClass 是 React 早期用来创建组件的一种方法，它允许你使用一种类式语法来创建组件。这个方法已经在 React 15.5 版本后被弃用。相比之下，extends Component 是基于 ES6 class 的语法，它是目前创建 React 组件的推荐方式。使用 extends Component 创建的组件有更好的性能，并且支持更灵活的 JavaScript 特性，如类继承、箭头函数、模块化等。
Step 2
Q:: 为什么 React.createClass 被弃用？
A:: React.createClass 存在一些缺陷，如自动绑定(this)会导致性能问题，并且无法很好地与 ES6 和未来的 JavaScript 特性兼容。使用 ES6 class 创建组件更加直观、性能更好，并且可以利用现代 JavaScript 的功能如继承和更灵活的构造函数。
Step 3
Q:: 在什么情况下使用 extends Component 而不是函数式组件？
A:: extends Component 主要用于需要使用生命周期方法或者需要管理内部状态的组件。而函数式组件则更适合无状态、无生命周期方法的简单展示型组件。随着 React Hooks 的引入，现在函数式组件也能处理状态和副作用，所以在很多情况下，两者都可以使用，但复杂逻辑通常还是放在类组件中。
Step 4
Q:: React 组件生命周期中的各个方法在什么时候触发？
A:: 组件生命周期方法主要分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。在挂载阶段，constructor, static getDerivedStateFromProps, render, componentDidMount 依次执行。在更新阶段，static getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate 依次执行。在卸载阶段，componentWillUnmount 执行。