React 组件 API 学习笔记

React 是一个用于构建用户界面的 JavaScript 库。为设计交互式 UI，我们需要使用组件。组件是 React 构建块的基本单位。

基础组件

• <div />: 用于将元素分组，并在其周围创建布局。
• <span />: 用于标记文本片段。与 <div /> 相比，<span /> 更适合包含短的文本字符串。
• <img />: 用于显示图像。
• <form />: 用于创建 HTML 表单，该表单使用 React 的状态来更新它们的值。

React 组件

• 函数式组件: 无状态组件或简单组件。定义了一个 JavaScript 函数，其中可以接受组件参数,然后通过返回一个 React 元素来渲染 UI。示例：

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

• Class 组件: 可以用于声明更复杂的 UI。它们拥有自己的状态，并且可以响应生命周期方法。示例：

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

Props

• props: 是一个传递给组件的对象，包含组件需要渲染的所有数据。例如，传递给上面的 Welcome 组件的 props 属性。

jsxCopy Code
<Welcome name="Sara" />

State

• state: 与 props 类似，但是仅仅是组件内部管理的。state 是可变的，可以通过 setState() 方法来更新。示例：

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

  render() {
    return <h1>It is {this.state.date.toLocaleTimeString()}.</h1>;
  }
}

以上就是 React 组件 API 的基本介绍和示例。更多详细内容可以查看官方文档。