React 组件

使用React来创建网页时，屏幕上的每个部分（例如按钮、文本框等）都用”组件”来表示。我们通过组合这些组件来构建复杂的页面和应用程序。

1. 类组件

Feature:

クラスベース: JavaScriptのクラスを使って定義されます。

ライフサイクルメソッド: 特定の時点で実行されるメソッドがあります。例えば、コンポーネントが画面に初めて表示されるときや、データが変わったときなどの動作を定義できます。

状態管理: this.stateで状態（データ）を持ち、this.setStateで状態を更新できます。

给我一杯咖啡。

class WelcomeClass extends React.Component {
  // コンストラクタ: コンポーネントが作成されるときに一度だけ実行される
  constructor(props) {
    super(props);
    this.state = { name: 'React' };
  }

  // レンダリング: どのように画面に表示されるかを定義
  render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}

2. 函数组件

特点：

関数ベース: 通常の関数や矢印関数で定義されます。

Hooksの利用: 状態を持ったり、ライフサイクルのような動作を制御するための特別な関数（Hooks）が使えます。例: useState, useEffect

请给我一杯咖啡。(英文原句：Please give me a cup of coffee.)

import { useState } from 'react';

function WelcomeFunction() {
  // useState Hook: コンポーネントの状態を管理する
  const [name, setName] = useState('React');

  return <h1>Hello, {name}</h1>;
}

总结：

クラスコンポーネント: JavaScriptのクラスの特性を活かして、状態やライフサイクルを持つコンポーネントを作成する方法。

関数コンポーネント: よりシンプルで柔軟な方法でコンポーネントを作成。最近のReactでは、Hooksを使ってクラスコンポーネントと同じようなことを関数コンポーネントで実現できるようになりました。

由于其简洁性和引入Hooks功能的增强，函数组件已成为当前React开发的主流。然而，在许多现有项目和库中，仍使用类组件，因此理解两者都是很重要的。