从细节出发，提升 React 学习效率

2023-12-21 18:49:31

把握细节，深入理解 React

在学习 React 的过程中，往往会遇到各种各样的细节问题。这些细节虽然看似不起眼，但往往是理解 React 核心概念和原理的关键。只有掌握了这些细节，才能真正理解 React 的工作原理，并能够灵活地运用 React 来构建复杂的前端应用。

小细节一：为什么在没有引用 React 时也要导入它？

在编写 React 组件时，经常会看到这样的代码：

import React from 'react';

const MyComponent = () => {
  return <div>Hello World!</div>;
};

export default MyComponent;

即使在组件中没有直接使用 React，也需要将其导入。这是因为 JSX 是 React 的一种语法扩展，它需要 React 来进行编译。当编译器遇到 JSX 代码时，它会将其转换为普通的 JavaScript 代码。如果在组件中没有导入 React，编译器就会报错。

小细节二：JSX 中的 `this` 指向

在 React 组件中，this 的指向与普通 JavaScript 对象不同。在 React 组件中，this 指向组件的实例本身。这与普通 JavaScript 对象中，this 指向当前函数的调用者不同。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <button onClick={this.incrementCount}>+</button>
        <span>{this.state.count}</span>
      </div>
    );
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };
}

在上面的代码中，this.incrementCount 方法中，this 指向组件的实例。因此，我们可以使用 this.setState() 方法来更新组件的状态。

小细节三：React 组件的生命周期

React 组件的生命周期分为四个阶段：

componentDidMount()：组件第一次挂载到 DOM 中时调用。
componentDidUpdate()：组件更新时调用。
componentWillUnmount()：组件从 DOM 中卸载时调用。
shouldComponentUpdate()：组件是否应该更新时调用。

这四个生命周期方法可以帮助我们控制组件的行为，并在适当的时候执行相应的操作。

例如，在 componentDidMount() 方法中，我们可以执行一些初始化操作，如获取数据或设置状态。在 componentDidUpdate() 方法中，我们可以更新组件的 UI，以反映状态的变化。在 componentWillUnmount() 方法中，我们可以清理组件的资源，如释放计时器或取消网络请求。在 shouldComponentUpdate() 方法中，我们可以决定组件是否应该更新。