React 基础面试题, React 的 constructor 和 getInitialState 有什么区别?

Step 1

Q:: React 的 constructor 和 getInitialState 有什么区别？

A:: 在 React 中，constructor 和 getInitialState 都用于初始化组件状态（state），但它们在使用上有一些关键区别。

1. constructor（构造函数）： - constructor 是 ES6 class 组件中的构造函数。它在组件实例化时调用，并且是设置组件初始状态的主要方法之一。 - 通过 super(props) 可以调用父类的构造函数，继而可以在构造函数中直接使用 this.state 初始化状态。 - 适用于所有 React 版本。 - 语法示例：

 
     class MyComponent extends React.Component {
       constructor(props) {
         super(props);
         this.state = { value: 0 };
       }
     }
     

2. getInitialState（已弃用）： - getInitialState 是在 React 早期版本中使用的初始化组件状态的方式，主要用于 React.createClass() 创建的组件。 - 该方法在函数式组件中已经不再使用，因为 React 现在主要推荐使用 ES6 class 组件或者 React hooks。 - getInitialState 不能与 class 组件一起使用。 - 语法示例：

 
     var MyComponent = React.createClass({
       getInitialState: function() {
         return { value: 0 };
       }
     });
     

总结：在现代 React 开发中，推荐使用 constructor 来初始化状态，而 getInitialState 已被弃用。

Step 2

Q:: React 中的生命周期方法有哪些？简述每个方法的用途。

A:: React 中的生命周期方法分为三个阶段：挂载阶段、更新阶段和卸载阶段。

1. 挂载阶段： - constructor(props)``: 构造函数，用于初始化组件的状态。 - componentDidMount()``: 组件挂载后调用，通常用于数据获取、DOM 操作或订阅事件。

2. 更新阶段： - shouldComponentUpdate(nextProps, nextState)``: 决定组件是否应该重新渲染，返回布尔值，优化性能。 - componentDidUpdate(prevProps, prevState)``: 组件更新后调用，可以在此处处理 DOM 操作或发起新的网络请求。

3. 卸载阶段： - componentWillUnmount()``: 组件即将卸载时调用，通常用于清理定时器、取消网络请求或取消订阅事件。

总结：React 生命周期方法帮助开发者在不同阶段控制组件的行为，尤其是在组件挂载、更新和卸载时进行必要的操作。

Step 3

Q:: React 中的 state 和 props 有什么区别？

A:: 在 React 中，state 和 props 都是用于组件的数据管理，但它们有不同的用途和特性。

1. props（属性）： - props 是只读的，用于从父组件向子组件传递数据。 - 子组件无法直接修改 props，它只能通过 props 渲染数据。 - props 用于外部控制子组件的行为。

2. state（状态）： - state 是组件内部管理的数据，用于记录组件的动态数据。 - 组件可以通过 this.setState 方法更新 state，从而触发组件重新渲染。 - state 用于管理组件内部的变化。

总结：props 是父组件传递给子组件的数据，子组件不能修改；而 state 是组件内部的数据，组件可以自行管理和更新。