React 基础 - React

01. React 组件基础——搭 UI 积木

React 的核心思想就是把 UI 拆成一个个独立的、可复用的「组件」。每个组件就像一块积木，你可以随便组合它们搭出复杂的界面。组件就是一个返回 JSX 的函数。JSX 看起来像在 JavaScript 里写 HTML，其实会被编译成普通的 JS 函数调用。组件名必须以大写字母开头——React 靠这个区分「自定义组件」和「普通 HTML 标签」。

jsx

// 函数组件（现代 React 的标准写法）
function Welcome({ name }: { name: string }) {
return (
    <div className="welcome">
        <h1>你好，{name}！</h1>
        <p>欢迎使用 React</p>
    </div>
);
}

// 使用组件——像搭乐高一样拼起来
function App() {
return (
    <div>
        <Welcome name="张三" />
        <Welcome name="李四" />
    </div>
);
}

export default App;

02. Props 与 State——数据怎么流动

React 里的数据分两种： Props——父组件传给子组件的数据，子组件只能读不能改。就像爸妈给你的零花钱，你可以花但不能在钱上改面额。 State——组件自己管理的内部数据，改了 State 就会自动重新渲染界面。就像你自己的账户余额，想取就取想存就存。 useState 是最基础的 State Hook。调用它返回一个数组：第一个是当前值，第二个是更新这个值的函数。每次调用更新函数，组件就会重新渲染。

jsx

import { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);

return (
    <div>
        <p>当前计数：{count}</p>
        <button onClick={() => setCount(count + 1)}>加 1</button>
        <button onClick={() => setCount(count - 1)}>减 1</button>
        <button onClick={() => setCount(0)}>重置</button>
    </div>
);
}

State 更新是异步的。如果新状态依赖于旧状态，要用函数式更新：setCount(prev => prev + 1)，避免拿到过期的值。

知识测验

第 1/5 题正确 0

React 组件名为什么必须大写开头？

Hooks 详解