前端面试题刷（11-20）11. Vue中，created和mounted两个钩子之间调用时间差值受什么影响？题目来源：

11. Vue中，created和mounted两个钩子之间调用时间差值受什么影响？

答：DOM 渲染时间（mounted 是指完成dom渲染）异步操作（created中的异步操作）浏览器性能（渲染，计算都是与浏览器性能相关的）组件复杂度服务器响应时间

在Vue.js中，created 和 mounted 是组件生命周期中的两个钩子函数，它们之间的调用时间差主要受到以下因素的影响：

DOM 渲染时间：created 钩子在Vue实例创建完成之后立即调用，在这个阶段，实例的属性已经被绑定，但是DOM还没有生成，任何依赖DOM的操作都需要等到mounted钩子中执行。因此，从created到mounted的时间差主要取决于DOM的渲染时间，包括计算样式、布局以及绘制等过程。
异步操作：如果在created钩子中进行了某些异步操作（如Ajax请求），这些操作通常会在mounted之前完成，但这并不会直接影响到created到mounted的时间差，因为即使异步操作完成，只要DOM没有渲染完毕，mounted就不会被调用。
浏览器性能：不同的浏览器渲染速度不同，因此在不同的浏览器环境下，从created到mounted的时间也会有所不同。
组件复杂度：组件内部的数据计算复杂度也会影响DOM的生成时间，比如复杂的计算属性或侦听器可能会增加DOM生成所需的时间。
服务器响应时间：如果组件依赖于服务器端的数据加载，那么服务器响应时间也会影响到DOM最终渲染完成的时间，尽管这并不是直接因素。

总之，created 到 mounted 之间的时间差主要是由DOM的渲染时间决定的，这个时间会根据上述因素有所不同。在开发过程中，应当尽量优化这些因素以提高应用的性能。

12. 为什么Node在使用es module时必须加上文件扩展名?

在Node.js中使用ES模块（ES Modules，简称ESM）时必须加上文件扩展名，主要是为了明确地标识出文件类型，以便Node.js能够正确地解析和处理模块。

以下是具体原因：

模块类型的识别：
- 在Node.js中，默认情况下，不带文件扩展名的模块会被视为CommonJS（CJS）模块。CommonJS是Node.js中传统的模块系统，它使用require方法来引入其他模块，并使用module.exports来导出模块接口。
- ES Modules则使用import和export语法来导入和导出模块接口。为了与CommonJS区分，Node.js需要一种机制来识别哪些文件应该按照ESM的方式进行处理。
约定和配置：
- 为了支持ES Modules，Node.js引入了.mjs作为ES模块的标准文件扩展名。虽然.js也可以用于ES模块，但为了兼容性考虑，当使用.js扩展名时，需要在package.json中指定"type": "module"来告知Node.js应该使用ESM模式加载所有.js文件。
- 如果没有指定文件扩展名或者没有正确的配置，Node.js可能会错误地将ES模块当作CommonJS模块来处理，导致解析错误或运行时错误。
预加载优化：
- 使用文件扩展名还可以帮助Node.js提前进行模块预加载优化，即modulepreload，这有助于提升模块加载的性能。

总结来说，加上文件扩展名是为了让Node.js能够正确地区分模块类型，并且按照正确的规范来解析和加载模块。这样做有助于避免由于模块类型混淆而引起的错误，并且有助于未来的模块系统发展。

13. package.json 文件中的 devDependencies 和 dependencies 对象有什么区别？

package.json 文件中的 devDependencies 和 dependencies 对象是用来声明项目的依赖项，但它们有不同的用途：

dependencies:
- 这部分列出的是应用程序运行时所需的依赖项。也就是说，任何对应用程序的功能性至关重要的包都应该列在这里。
- 生产环境中部署的应用程序也需要这些依赖项，因此在将应用程序部署到生产环境时，这些依赖项会被安装。
- 当用户安装你的应用程序或库时，他们需要这些依赖项来确保一切可以正常工作。
devDependencies:
- 这部分列出的是仅在开发过程中需要用到的依赖项，例如构建工具、测试框架、linters等。
- 这些依赖项不是应用程序运行所必需的，因此在生产环境中不应该安装这些依赖项，以减少攻击面并降低资源消耗。
- 当你发布一个库或框架时，这些依赖项不会被那些安装你库的人所需要，因为他们只是用来开发和测试你的库，而不是库的一部分。

当你使用 npm install 命令时，默认会同时安装 dependencies 和 devDependencies 中列出的所有依赖项。然而，如果你使用 npm install --production 或者 npm ci --production 命令，则只会安装 dependencies 中列出的依赖项。

在安装依赖项时，使用 npm install <package> --save 会把包添加到 dependencies，而使用 npm install <package> --save-dev 会把包添加到 devDependencies。这样可以帮助维护清晰的依赖关系，并确保生产环境和开发环境之间的依赖关系分离。

14. 下面代码中，点击 “+3” 按钮后，age 的值是什么？

import { useState } from 'react'; 
export default function Counter() { const [age, setAge] = useState(42); 
function increment() { setAge(age + 1); } 
return ( <> <h1>Your age: {age}</h1> <button onClick={() => { increment(); increment(); increment(); }}>+3</button> </> ); }

点击 +3 时，可能只更新为 43。

这是因为 setAge(age + 1) 即使多次调用，也不会立即更新组件状态，而是会进行合并，最终只触发一次重新渲染。

如果要实现调用三次就增加 3 ，可以将 increment 改为函数式更新：


function increment() {
    setAge(a => a + 1); // 函数式更新
}

15. 不会冒泡的事件有哪些？

不会冒泡的事件（焦点相关，表单相关，拖拽相关，页面相关，滚动，音视频）

focus
- 当元素获得焦点时触发。
- 特点：不会冒泡到父元素。
blur
- 当元素失去焦点时触发。
- 特点：不会冒泡到父元素。
change
- 当表单控件（如输入框、选择框等）的值发生改变并且失去焦点时触发。
- 特点：不会冒泡到父元素。
input
- 当表单控件（如输入框）的值发生变化时触发。
- 特点：不会冒泡到父元素。
beforeunload
- 当页面即将卸载时触发。
- 特点：不会冒泡到父元素。
error
- 当页面或资源加载失败时触发。
- 特点：不会冒泡到父元素。
submit
- 当表单提交时触发。
- 特点：不会冒泡到父元素。
reset
- 当表单重置时触发。
- 特点：不会冒泡到父元素。
dragstart 和 dragend
- dragstart：拖拽开始时触发。
- dragend：拖拽结束时触发。
- 特点：不会冒泡到父元素。
dragenter 和 dragleave
- dragenter：拖拽进入目标元素时触发。
- dragleave：拖拽离开目标元素时触发。
- 特点：不会冒泡到父元素。
load
- 当图像、音频、视频或其他资源加载完成时触发。
- 特点：不会冒泡到父元素。
unload
- 当页面即将被导航离开时触发。
- 特点：不会冒泡到父元素。
stop
- 通常与 media 元素（如 audio 或 video）相关，当媒体播放停止时触发。
- 特点：不会冒泡到父元素。
readystatechange
- 当 document 的 readyState 改变时触发。
- 特点：不会冒泡到父元素。

可能冒泡的事件

focusin
- 与 focus 类似，但会在元素或其父元素上触发（冒泡）。
- 特点：会冒泡到父元素。
focusout
- 与 blur 类似，但会在元素或其父元素上触发（冒泡）。
- 特点：会冒泡到父元素。
scroll
- 当元素滚动时触发。
- 特点：在某些浏览器中可能会冒泡到父元素。

总结表格

事件	描述	是否冒泡
`focus`	当元素获得焦点时触发。	不会
`blur`	当元素失去焦点时触发。	不会
`change`	当表单控件的值发生改变并且失去焦点时触发。	不会
`input`	当表单控件的值发生变化时触发。	不会
`beforeunload`	当页面即将卸载时触发。	不会
`error`	当页面或资源加载失败时触发。	不会
`submit`	当表单提交时触发。	不会
`reset`	当表单重置时触发。	不会
`dragstart`	拖拽开始时触发。	不会
`dragend`	拖拽结束时触发。	不会
`dragenter`	拖拽进入目标元素时触发。	不会
`dragleave`	拖拽离开目标元素时触发。	不会
`load`	当图像、音频、视频或其他资源加载完成时触发。	不会
`unload`	当页面即将被导航离开时触发。	不会
`stop`	通常与 `media` 元素（如 `audio` 或 `video`）相关，当媒体播放停止时触发。	不会
`readystatechange`	当 `document` 的 `readyState` 改变时触发。	不会
`focusin`	与 `focus` 类似，但会在元素或其父元素上触发（冒泡）。	会
`focusout`	与 `blur` 类似，但会在元素或其父元素上触发（冒泡）。	会
`scroll`	当元素滚动时触发。	可能

16. 子组件是一个 Portal，发生点击事件能冒泡到父组件吗

React 的 Portal 通过 React 的 context 和事件冒泡的机制工作。

在理解这个问题之前，首先要了解一些基本知识：

React Context：React 使用 context 来存储组件树的一些信息，比如事件处理程序。当组件使用 Portal 时，Portal 在 React 内部仍然保持在父组件树中，即使在 DOM 上渲染到其他地方。也就是说，Portal 的 context 依然从其父组件继承而来。
DOM 事件冒泡：DOM 中的事件（例如点击事件）通常会从触发事件的元素开始，然后逐步向上冒泡到父元素，直到 document 元素。在这个过程中，事件会按照 DOM 树的层级一层层地向上传递。
React 的事件代理：React 使用事件代理模式将所有事件都代理到顶层（document 或者 root DOM 节点）进行处理。这意味着当在子组件中触发一个事件时，无论子组件是否使用了 Portal，React 都会将事件传递到其父组件，然后逐级往上冒泡，直到到达代理事件的顶层。

在 React 中，当一个子组件使用 Portal 将其内容渲染到其他 DOM 节点时，尽管在 DOM 结构上子组件不再是父组件的直接子节点，但在 React 的组件树中，子组件仍然是父组件的子节点。这意味着 React 在监听和处理事件时，会沿着组件树的路径（而不是 DOM 树的路径）冒泡事件。因此，子组件中触发的事件仍然会冒泡到父组件。

总结：Portal 在 DOM 结构上将子组件渲染到其他位置，但在 React 的组件树中，它仍然是父组件的子组件。这使得事件可以从子组件沿着组件树冒泡到父组件。

17. 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？

要让 var [a, b] = {a: 1, b: 2} 的解构赋值成功，你需要使用对象解构赋值而不是数组解构赋值。这是因为 {a: 1, b: 2} 是一个对象，而不是一个数组。

正确的解构赋值方法

对象解构赋值：
```
javascript
var { a, b } = { a: 1, b: 2 };
```
这样可以正确地将 a 和 b 分别赋值为 1 和 2。

示例代码

javascript
// 对象解构赋值
var { a, b } = { a: 1, b: 2 };

console.log(a); // 输出 1
console.log(b); // 输出 2

数组解构赋值

如果你确实需要使用数组解构赋值，可以将对象转换为数组：

javascript
// 将对象转换为数组后解构赋值
var obj = { a: 1, b: 2 };
var [a, b] = [obj.a, obj.b];

console.log(a); // 输出 1
console.log(b); // 输出 2

使用 Object.values

还可以使用 Object.values 方法将对象的值提取为数组：

javascript
// 使用 Object.values 提取对象的值并解构赋值
var obj = { a: 1, b: 2 };
var [a, b] = Object.values(obj);

console.log(a); // 输出 1
console.log(b); // 输出 2

使用 Object.entries

如果你还需要键名和键值，可以使用 Object.entries 方法：

javascript
// 使用 Object.entries 提取对象的键值对并解构赋值
var obj = { a: 1, b: 2 };
var [[key1, value1], [key2, value2]] = Object.entries(obj);

console.log(key1); // 输出 "a"
console.log(value1); // 输出 1
console.log(key2); // 输出 "b"
console.log(value2); // 输出 2

总结

对象解构赋值：直接使用 { a, b } 解构赋值。
数组解构赋值：将对象转换为数组后解构赋值。
使用 Object.values：提取对象的值并解构赋值。
使用 Object.entries：提取对象的键值对并解构赋值。

选择合适的方法根据具体需求来决定。最简单的方式是直接使用对象解构赋值。为了让 const [a, b] = obj 的解构赋值成功，我们需要确保 obj 实现了一个正确的迭代器接口。具体来说，我们需要确保 obj 的 [Symbol.iterator] 方法返回一个符合迭代协议的对象。

实现迭代器接口

定义迭代器：
- 使用 Symbol.iterator 来定义迭代器方法。
- 迭代器应该返回一个具有 next 方法的对象。
解构赋值：
- 使用解构赋值来获取迭代器中的值。

示例代码

javascript
const obj = {
  a: '1',
  b: '2',
  [Symbol.iterator]() {
    let index = 0;
    const keys = Object.keys(this);
    return {
      next() {
        if (index < keys.length) {
          const key = keys[index++];
          return {
            done: false,
            value: this[key]
          };
        }
        return { done: true, value: undefined };
      }
    };
  }
};

// 使用解构赋值
const [firstValue, secondValue] = obj;

console.log(firstValue); // 输出 '1'
console.log(secondValue); // 输出 '2'

详细解释

定义迭代器：
- obj 对象实现了 [Symbol.iterator] 方法。
- 迭代器返回一个对象，该对象具有 next 方法。
迭代器内部逻辑：
- 使用 let index = 0 记录当前迭代的位置。
- 使用 const keys = Object.keys(this) 获取对象的所有键。
- next 方法返回当前键对应的值，并更新 index。
解构赋值：
- 使用解构赋值 const [firstValue, secondValue] = obj 来获取迭代器中的值。

完整示例

javascript
const obj = {
  a: '1',
  b: '2',
  [Symbol.iterator]() {
    let index = 0;
    const keys = Object.keys(this);
    return {
      next() {
        if (index < keys.length) {
          const key = keys[index++];
          return {
            done: false,
            value: this[key]
          };
        }
        return { done: true, value: undefined };
      }
    };
  }
};

// 使用解构赋值
const [firstValue, secondValue] = obj;

console.log(firstValue); // 输出 '1'
console.log(secondValue); // 输出 '2'

进一步说明

迭代器的实现：
- 迭代器返回的 next 方法在每次调用时都会返回当前迭代的值和 done 标志。
- 当 index 达到 keys.length 时，返回 { done: true, value: undefined } 表示迭代结束。
解构赋值的过程：
- 解构赋值会依次从迭代器中取出值，直到迭代结束。
- 在本例中，[firstValue, secondValue] 会分别接收 '1' 和 '2'。

通过这种方式，我们可以确保 const [a, b] = obj 的解构赋值能够正确地获取对象中的值。

18. React 为什么要废弃 componentWillMount、componentWillReceiveProps、componentWillUpdate 这三个生命周期钩子？它们有哪些问题呢？React 又是如何解决的呢？

React 废弃 componentWillMount、componentWillReceiveProps 和 componentWillUpdate 这三个生命周期方法的原因主要是为了改善组件生命周期的一致性和可预测性，以及更好地适应 React 16 引入的 Fiber 架构。

问题所在

不可预测的行为：
- 在 Fiber 架构下，渲染阶段可能被中断和恢复，这就意味着 componentWillMount、componentWillReceiveProps 和 componentWillUpdate 可能会被多次调用。
- 这些方法中的副作用（如网络请求、DOM 操作）会在每次调用时被执行，可能导致不一致的状态或重复的操作。
难以调试：
- 当这些方法多次执行时，会使调试变得困难，因为开发者无法确定某个副作用是在何时发生的。
不一致性：
- componentWillReceiveProps 中的 this.props 和 nextProps 可能在某些情况下不一致，导致逻辑复杂化。

React 的解决方案

为了应对这些问题，React 引入了新的生命周期方法，并且鼓励使用更现代的 Hook API。

1. 替代 `componentWillMount`

constructor：初始化状态和其他属性。
asyncComponentDidMount：对于异步操作，可以在 componentDidMount 中发起请求，并在回调中更新状态。
useEffect Hook：在函数组件中，可以使用 useEffect 并传入一个空数组作为依赖项，以模拟 componentWillMount 的行为。

2. 替代 `componentWillReceiveProps`

getDerivedStateFromProps：静态方法，可以在其中计算新的 state，基于新的 props 和当前的 state。
useEffect Hook：在函数组件中，可以使用 useEffect 并监听 props 的变化。

3. 替代 `componentWillUpdate`

getSnapshotBeforeUpdate：在更新前捕获一些信息，这个信息会被传递给 componentDidUpdate。
useEffect Hook：在函数组件中，可以使用 useEffect 并监听 props 或 state 的变化。

例子

类组件

jsx
class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    this.fetchData();
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.id !== prevState.id) {
      return { id: nextProps.id, data: null };
    }
    return null;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevState.data !== this.state.data) {
      return this.state.data;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      console.log('Updated with:', snapshot);
    }
  }

  fetchData = () => {
    fetch('/api/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  };

  render() {
    return (
      <div>
        <h1>Data: {this.state.data}</h1>
      </div>
    );
  }
}

函数组件

jsx
import React, { useState, useEffect } from 'react';

const ExampleComponent = ({ id }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 模拟 componentDidMount 和 componentWillReceiveProps
    const fetchData = async () => {
      const response = await fetch(`/api/data?id=${id}`);
      const result = await response.json();
      setData(result);
    };
    fetchData();

    // 清除副作用
    return () => {
      // 可以在这里清理定时器、取消网络请求等
    };
  }, [id]); // 监听 id 的变化

  useEffect(() => {
    // 模拟 componentDidUpdate
    console.log('Component updated with new data:', data);
  }, [data]); // 监听 data 的变化

  return (
    <div>
      <h1>Data: {data}</h1>
    </div>
  );
};

export default ExampleComponent;

总结

通过引入新的生命周期方法和 Hooks，React 使得组件的生命周期更加清晰和一致。这些改变有助于避免由于多次执行 will 生命周期方法所带来的副作用问题，并且使组件更容易理解和维护。

19. css 中的 animation、transition、transform 有什么区别？

animation:动画关键帧、transition:改变的过程、transform:对元素进行改变，怎么变。

在 CSS 中，animation、transition 和 transform 都是用来实现页面元素动画效果的属性，但它们各自有不同的用途和特点。

transform

transform 属性用于改变元素的形状、大小或位置。它支持多种变换方法，如旋转 (rotate)、缩放 (scale)、倾斜 (skew) 和位移 (translate) 等。transform 可以应用于任何元素，使其在二维或三维空间中进行变换。

示例

css
div {
  transform: scale(2);
}

transition

transition 属性用于定义元素从一种样式到另一种样式的变化效果。它允许你指定过渡的属性、持续时间、过渡曲线（timing function）和延迟时间。transition 通常与用户交互事件（如 hover）结合使用，以实现平滑的过渡效果。

示例

css
div:hover {
  background-color: red;
  transition: background-color 0.5s ease-in-out;
}

animation

animation 属性则是一个更高级的概念，它可以定义一系列关键帧（keyframes），从而创建更复杂的动画效果。animation 可以包含多个步骤，每个步骤都可以定义不同的样式，并且可以控制动画的播放次数、方向和填充模式等。

示例

css
@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

div {
  animation: fadeInOut 2s infinite;
}

区别

触发条件：
- transition 通常与某些事件（如 hover）配合使用，当元素的样式属性发生改变时触发。
- animation 则是独立的，一旦应用就会立即开始播放，并且可以通过设置 animation-play-state 属性来暂停或恢复动画。
循环：
- animation 可以设定循环次数，甚至可以无限循环。
- transition 一般是一次性的，从初始状态过渡到最终状态。
复杂度：
- animation 支持更复杂的动画效果，因为它可以通过关键帧定义多个状态。
- transition 更适合简单的过渡效果。
使用场景：
- transform 通常用来实现元素的几何变换，可以单独使用也可以与其他属性结合使用。
- transition 适用于需要平滑过渡的效果，比如按钮悬停时颜色的变化。
- animation 适用于需要更复杂动画效果的场景，比如加载动画或者元素的淡入淡出效果。

总结

transform 用于改变元素的形状、大小或位置。
transition 用于定义元素在样式变化时的过渡效果。
animation 用于创建更复杂的动画效果，通过定义一系列关键帧来实现。

这三种属性可以单独使用，也可以组合使用，以达到更丰富的视觉效果。在实际开发中，根据需要选择合适的属性来实现动画效果。

20. 为什么 react 需要 fiber 架构，而 Vue 却不需要？

React 需要引入 Fiber 架构的主要原因是为了解决在大规模应用中遇到的性能问题，特别是在渲染大量虚拟 DOM 时。React 最初的设计是同步的，这意味着在渲染过程中，如果一个组件开始更新，那么整个 UI 的渲染过程将会阻塞其他任务，包括事件处理和其他微任务。这种同步更新方式在复杂应用中会导致性能瓶颈，尤其是在高负载的情况下，可能会导致用户界面变得不响应。

React 的 Fiber 架构

Fiber 架构是 React 16 版本引入的一个重要特性，它改变了 React 的核心算法，使得渲染过程可以被打断和恢复，即所谓的“可中断的渲染”。这样做的好处是可以让 React 在渲染过程中释放主线程去处理其他重要的任务（如用户输入），从而提高应用的响应速度。Fiber 的设计使得 React 能够更有效地管理任务队列，并且能够优先处理高优先级的任务。

Vue 的响应式系统

相比之下，Vue 的设计哲学不同。Vue 采用了基于数据劫持（Data Observe）的响应式系统，它通过 Object.defineProperty 方法来追踪数据的变化，并在数据发生变化时自动更新视图。Vue 的更新机制是异步的，这意味着当数据发生变化时，Vue 会把所有的更新放到一个队列中，并在下一个事件循环中统一更新 DOM。这种异步更新机制减少了不必要的渲染，提高了效率。

Vue 的更新粒度非常细，它能够准确地知道哪些部分的数据发生了变化，并仅更新受影响的部分。因此，Vue 不需要像 React 那样的 Fiber 架构来保证渲染的中断和恢复，因为它已经能够很好地处理更新的粒度和时机。

总结

- React：由于其同步更新机制，在大规模应用中可能会导致性能问题。Fiber 架构解决了这一问题，通过可中断的渲染机制提高了应用的响应性和性能。

- Vue：基于数据劫持的异步更新机制，使得 Vue 能够高效地处理数据变化引起的视图更新，减少了不必要的重绘和布局，因此不需要类似 Fiber 的架构。*

两种框架各有优势，React 的 Fiber 架构使其更适合处理复杂的、需要高度并发的应用场景，而 Vue 的设计则提供了更为简洁的开发体验，并且在大多数常见场景下表现优异。选择哪种框架取决于项目的需求和个人偏好。

前端面试题刷（11-20）

11. Vue中，created和mounted两个钩子之间调用时间差值受什么影响？

12. 为什么Node在使用es module时必须加上文件扩展名?

13. package.json 文件中的 devDependencies 和 dependencies 对象有什么区别？

14. 下面代码中，点击 “+3” 按钮后，age 的值是什么？

15. 不会冒泡的事件有哪些？

不会冒泡的事件（焦点相关，表单相关，拖拽相关，页面相关，滚动，音视频）

可能冒泡的事件

总结表格

16. 子组件是一个 Portal，发生点击事件能冒泡到父组件吗

17. 如何让 var [a, b] = {a: 1, b: 2} 解构赋值成功？

正确的解构赋值方法

示例代码

数组解构赋值

使用 Object.values

使用 Object.entries

总结

实现迭代器接口

示例代码

详细解释

完整示例

进一步说明

18. React 为什么要废弃 componentWillMount、componentWillReceiveProps、componentWillUpdate 这三个生命周期钩子？它们有哪些问题呢？React 又是如何解决的呢？

问题所在

React 的解决方案

1. 替代 componentWillMount

2. 替代 componentWillReceiveProps

3. 替代 componentWillUpdate

例子

类组件

函数组件

总结

19. css 中的 animation、transition、transform 有什么区别？

transform

示例

transition

示例

animation

示例

区别

总结

20. 为什么 react 需要 fiber 架构，而 Vue 却不需要？

React 的 Fiber 架构

Vue 的响应式系统

总结

1. 替代 `componentWillMount`

2. 替代 `componentWillReceiveProps`

3. 替代 `componentWillUpdate`