React/教程/基础概念

React 是一个用于构建用户界面的 JavaScript 库，它允许开发者使用声明式的方法来构建可复用的 UI 组件。下面是 React 的基础概念：

JSX

JSX 是一种类似于 HTML 的语法扩展，它允许我们在 JavaScript 代码中直接编写 HTML 结构。这使得组件的模板非常清晰。

• 使用 JSX，你可以将组件的结构和逻辑混合在一起，这使得代码更加模块化。
• 例如，以下是一个简单的 JSX 示例：

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

组件

React 中的 UI 是由组件构成的。组件是一个可复用的函数或类，它接收 props 作为输入，并返回一个 React 元素。

• 组件可以嵌套使用，形成一个组件树。
• 例如，以下是一个简单的组件示例：

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

状态和属性

状态是组件内部的数据，它可以通过更新状态来改变组件的输出。属性则是从父组件传递到子组件的数据。

• 状态通常用于处理组件内部的数据变化。
• 属性通常用于传递数据到子组件。

function Clock() {
  const [date, setDate] = React.useState(new Date());

  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {date.toLocaleTimeString()}.</h2>
    </div>
  );
}

生命周期

React 组件在其生命周期中会经历几个阶段，包括挂载、更新和卸载。

• 在组件挂载时，React 会调用 componentDidMount 生命周期方法。
• 在组件更新时，React 会调用 componentDidUpdate 生命周期方法。
• 在组件卸载时，React 会调用 componentWillUnmount 生命周期方法。

React 生命周期

React Router

React Router 是一个用于处理 React 应用的路由库。它可以让你为不同的路径渲染不同的组件。

• 使用 React Router，你可以创建单页面应用（SPA）。
• 例如，以下是一个简单的 React Router 示例：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

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