在 React 中使用类的目的是什么？答案

【问题标题】：What's the purpose of using classes in React?在 React 中使用类的目的是什么？
【发布时间】：2019-08-06 00:42:40
【问题描述】：

我主要看到 JavaScript 使用类作为构造函数，如下所示：

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

React 使用类而不使用contructor() 函数的原因是什么，例如以下？我没有看到用于创建实例的类。

class App extends Component {

    render() {
        return (
            <div className="app-content">
            </div>
        )
    }
}

【问题讨论】：

向 React.Component 和这个类添加断点，包括一个构造函数，并逐行逐行查看详细情况，包括扩展如何影响编译和执行。即使是这个简单的组件，在幕后也发生了很多事情。它不仅仅是构造函数的存在。还可以尝试添加具有初始状态的构造函数并查看效果。

标签： javascript reactjs class constructor

【解决方案1】：

现在，如果您需要使用“高级”组件生命周期方法（如 shouldComponentUpdate() 等），则应该在 React 中使用类。

以前的类组件用于处理其中的本地状态。现在我们有Hooks API，它允许以更优雅的方式使用状态，并且不需要类组件。

如果您想了解更多详细信息，可以阅读 Dan Abramov 的文章：How Are Function Components Different from Classes?。

不管你的例子，你是对的，这段代码：

class App extends Component {

    render() {
        return (
            <div className="app-content">
            </div>
        )
    }
}

可以写成：

function App() {
  return <div className="app-content"></div>
}

【讨论】：

我觉得使用class的主要原因是为了继承方法，但这可以用require完成

【解决方案2】：

React 使用类而不使用contructor() 函数的原因是什么

来自JavaScript 类doc：

如果不指定构造方法，则使用默认构造方法。

因此，无论是否指定了构造方法，每个class 都存在一个constructor。

我没有看到用于创建实例的类。

React 实现为类的组件在渲染过程中由React 实例化。

具体来说，在新的React Fiber 中创建React 类组件的实例发生在this line of the source code。

但是，@vicondin 是对的，问题中的简单组件可以实现为 function component，类组件曾经是维护状态、实现生命周期方法等的唯一方法，并且新的Hooks 可以...

在不编写类的情况下使用状态和其他 React 特性。

【讨论】：

"因此，无论是否指定了构造方法，每个类都存在构造方法。"有趣的。我想知道我们是否必须使用constructor()。我在想extends 可能带来了构造函数？
@Kevvv 完全正确。如果您需要在constructor 中执行某些特定操作（例如设置初始state、bind 方法等），则只需提供constructor 函数。

【解决方案3】：

在 React 中，状态用于 React 类组件。在那里，您可以在类的构造函数中设置初始状态，还可以使用this.state 和this.setState 访问和更新它，因为您可以使用this 对象访问类实例。

如果你在 React 组件中使用类，即使不使用constructor()，你也可以像下面这样设置初始状态：

class App extends Component {
  state = {
    hello: 'Hello'
  };

  onClickHello = value => {
    this.setState({ hello: 'Why did you clicked?' });
  };

  render() {
    return (
      <div className="app-content" onClick={this.onClickHello}>
        {this.state.hello}
      </div>
    )
  }
}

另一个好处是你可以使用所有React lifecycle methods

更新：在 React16 之后，即使在使用 react hooks 的函数组件中也可以使用生命周期事件

【讨论】：

所以在 React 中使用了类以便可以访问和更新状态？
不。您可以使用其他类功能，例如 this、生命周期方法。更新了答案，请查收。

【解决方案4】：

另外最大的原因是状态和生命周期的处理（componendDidMount ..etc），类可以做任何功能可以做的事情，但是以可读性和无状态为代价。但在大多数情况下，我很少只在需要具有生命周期的复杂父组件时才使用类

【讨论】：