React 是一个用于构建用户界面的 JavaScript 库，它允许开发者使用声明式代码来构建交互式的 UI。以下是一些 React 的核心概念：

组件

React 应用由组件组成。组件可以是一次性的，也可以是可复用的。React 组件可以是函数，也可以是类。

  • 函数组件

    • 语法简单，易于理解
    • 无状态（无内部状态）

  • 类组件

    • 更复杂，功能更强大
    • 有状态（可以存储和更新数据）

JSX

JSX 是一个 JavaScript 的语法扩展，它看起来类似 HTML。JSX 可以让你在 JavaScript 中编写 HTML 结构。

function App() {
  return <div>Hello, React!</div>;
}

虚拟 DOM

React 使用虚拟 DOM 来优化 UI 更新。虚拟 DOM 是一个轻量级的 JavaScript 对象，它代表了实际的 DOM 结构。

State 和 Props

  • State 是组件内部的数据状态，用于响应事件。
  • Props 是组件外部的数据，用于从父组件传递到子组件。

组件生命周期

组件在其生命周期中会经历一系列的钩子函数，这些钩子函数允许你在特定的时间点执行代码。

class LifeCycleExample extends React.Component {
  // 组件挂载
  componentDidMount() {
    // ...
  }

  // 组件更新
  componentDidUpdate() {
    // ...
  }

  // 组件卸载
  componentWillUnmount() {
    // ...
  }

  // ...
}

更多关于 React 生命周期的信息

React Logo