react_tutorial/components

React教程 - 组件

React组件是构建用户界面的基石。它们是可复用的代码块，可以组合在一起创建复杂的UI。

组件类型

React组件主要分为以下两种类型：

函数组件：使用JavaScript函数创建，简单且易于理解。
类组件：使用ES6类创建，功能更强大，更适合大型应用。

函数组件示例

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

类组件示例

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

组件状态

组件可以维护自己的状态，并据此更新UI。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

组件属性

组件可以通过属性接收数据。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 使用组件并传递属性
<Welcome name="Alice" />

组件嵌套

组件可以嵌套其他组件。

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

扩展阅读

更多关于React组件的介绍，请访问React官方文档.

[center] React Components