React 是一个用于构建用户界面的 JavaScript 库。它被广泛用于开发单页应用和复杂的前端应用。下面是一些 React 基础知识的介绍。

React 简介

React 由 Facebook 开发，旨在构建高性能、可维护的用户界面。它使用虚拟 DOM（虚拟文档对象模型）来提高渲染性能，并简化了状态管理和组件化开发。

快速开始

要开始使用 React，你可以创建一个简单的应用，如下所示：

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

const App = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

组件

React 的核心是组件。组件是可复用的代码块，可以封装 UI 的特定部分。React 提供了两种类型的组件：

  • 类组件：使用 ES6 类定义。
  • 函数组件：使用 JavaScript 函数定义。

例如，一个简单的类组件：

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

和函数组件：

const Welcome = (props) => (
  <h1>Hello, {props.name}!</h1>
);

JSX

JSX 是 JavaScript 的语法扩展，它看起来与 HTML 非常相似。在 JSX 中，你可以使用标签来描述 UI 的结构。

例如：

const element = <h1>Hello, world!</h1>;

虚拟 DOM

React 使用虚拟 DOM 来提高渲染性能。虚拟 DOM 是一个轻量级的 DOM 树，它存储在内存中。当数据变化时，React 会比较虚拟 DOM 和真实 DOM 的差异，然后只更新变化的部分。

状态管理

React 提供了 useState 和 useEffect 等钩子函数来帮助管理组件的状态和副作用。

例如：

import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
};

更多关于 React 的内容，请访问我们的React 教程。

React Logo