在 React 中,getInitialState 方法承担什么职责?请说明其定义、使用场景以及与传统 ES6 class 写法中 state 初始化的区别。
考察说明
考查对 React 组件状态初始化机制(尤其是 ES5 createClass 与 ES6 class 差异)的理解。
回答思路
- 【回答框架 1】getInitialState 是 React 使用 React.createClass 定义组件时的一个生命周期方法,用于返回组件初始的 state 对象。它在组件挂载前被调用,返回值会作为 this.state 的初始值。
- 【回答框架 2】在 ES6 class 组件中,没有 getInitialState 方法,取而代之的是在 constructor 中通过 this.state = ... 来初始化状态。两者功能等价,但语法和适用场景不同。
- 【回答框架 3】getInitialState 还用于 Mixin 场景:当多个 Mixin 混合进组件时,React 会合并所有 getInitialState 的返回值,然后与组件自身的返回结果进行合并,从而实现 Mixin 向组件注入初始状态的能力。
- 【回答框架 4】在函数组件(Hooks)中,已经不存在 getInitialState,状态初始化通过 useState 或 useReducer 来完成。
- 【关键点 1】getInitialState 用于 React.createClass 组件,返回初始 state 对象。
- 【关键点 2】ES6 class 组件使用 constructor 中的 this.state 初始化状态。
- 【关键点 3】Mixin 可通过 getInitialState 合并注入初始状态。
- 【关键点 4】函数组件使用 useState 等 Hooks 初始化状态。
- 【易错点 1】不要混淆 getInitialState 与 getDefaultProps:getDefaultProps 用于默认 props,getInitialState 用于初始 state。
- 【易错点 2】在 ES6 class 组件中直接定义 getInitialState 方法不会自动调用,必须使用 constructor。
- 【易错点 3】不应在 getInitialState 中访问 this.props,因为组件实例尚未完全初始化。