Question

我主要看到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>
        )
    }
}

Answer 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>
}

Answer 2

在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

Answer 3

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

来自JavaScript类doc：

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

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

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

在呈现过程中，作为类实施的

React组件由<{1}} 实例化。

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

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

使用状态和其他React功能，而无需编写类。

Answer 4

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

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

4 个答案: