Javascript 在probs上使用js类

我在学习反应是为了一种爱好，我有一个问题

许多人在使用react时会为组件创建一个函数，并且它工作得很好。它们使用（prob）指定组件的每个“子级”，如下所示：

function Foo(probs) {
    // react stuff with those probs
}

import React from "react";
import ReactDOM from "react-dom";

const firstbook = {
  title: "some title",
  autor: "someone",
  img: "some url",
};

function Booklist() {
  return (
    <div>
      {new Book(firstbook)}
    </div>
  );
}

class Book {
  constructor(data) {
    this.title = data.title;
    this.autor = data.autor;
    this.img = data.img;

    return (
      <div className="book">
        <h1>{this.title}</h1>
        <h2>{this.autor}</h2>
        <img src={this.img} alt=""></img>
      </div>
    );
  }
}

function render() {
  ReactDOM.render(<Booklist />, document.getElementById("root"));
}
render();

它工作得很好，但你知道我想要什么吗？面向对象编程

因此，我没有为每个类创建函数并在主函数中指定它们，而是为每个组件创建一个类，如下所示：

function Foo(probs) {
    // react stuff with those probs
}

import React from "react";
import ReactDOM from "react-dom";

const firstbook = {
  title: "some title",
  autor: "someone",
  img: "some url",
};

function Booklist() {
  return (
    <div>
      {new Book(firstbook)}
    </div>
  );
}

class Book {
  constructor(data) {
    this.title = data.title;
    this.autor = data.autor;
    this.img = data.img;

    return (
      <div className="book">
        <h1>{this.title}</h1>
        <h2>{this.autor}</h2>
        <img src={this.img} alt=""></img>
      </div>
    );
  }
}

function render() {
  ReactDOM.render(<Booklist />, document.getElementById("root"));
}
render();

从“React”导入React；
从“react dom”导入react dom；
const firstbook={
标题：“一些标题”，
“某人”，
img：“一些url”，
};
函数Booklist（）{
返回(
{新书（第一册）}
);
}
课堂用书{
建造师（数据）{
this.title=data.title；
this.autor=data.autor；
this.img=data.img；
返回(
{this.title}
{this.autor}
);
}
}
函数render（）{
render（，document.getElementById（“根”））；
}
render（）；

问题是，这样可以吗？我不太了解反应，我害怕在处理过程中遇到一些问题。或者不能对每个组件都这样做。

---

请帮我找出答案！顺便说一句，很抱歉我的英语不好。

对于JavaScript，您使用的类或函数组件没有区别，因为这没关系。但是对于来自地球的人来说，用这两种方法来创建组件是相当麻烦的。最好使用functional，因为它更现代。如果你没有听说过ES6，试着滥用它。无论如何，祝你学习顺利

谢天谢地的那种奇怪的函数式编程根本不是一个现代概念。但它更实用；如果设计正确，您最终会得到可重用组件，这些组件可以应用于截然不同的用例。