React 基础

October 30, 2024

React 基础

1. JSX 语法

JSX 是一种 JavaScript 的语法扩展，允许在 JavaScript 中编写类似 HTML 的代码。JSX 让组件的定义更加直观。它最终会被编译成原生的 JavaScript。

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

注意：

• JSX 中可以嵌入 JavaScript 表达式，使用 {} 包裹。
• 每个 JSX 元素必须有一个闭合标签，甚至单个标签（例如 <img />）。

2. 组件的创建与使用

React 中的组件是构建用户界面的基本单元。常见的组件有两种类型：函数组件 和 类组件。

函数组件

函数组件是最常用的组件，简单且轻量。

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

类组件

类组件在旧版 React 中使用较多，它提供了更多的功能，如生命周期方法。

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

组件的使用

组件通过在 JSX 中使用标签的形式来引用：

    function App() {
        return (
            <div>
                <Welcome name="Alice" />
                <Welcome name="Bob" />
            </div>
        );
    }

3. Props 和 State

Props

Props（属性）是用于向组件传递数据的方式，通常是由父组件传递给子组件的，不可在子组件内部修改。

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

State

State 是组件内部的数据存储，可以被组件自行修改。函数组件中使用 useState 钩子来管理状态。

    import React, { useState } from 'react';

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

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

4. 事件处理

React 的事件处理和 DOM 有些不同：

• 事件名为 小驼峰命名（如 onClick 而不是 onclick）。
• 事件处理函数可以直接用 JavaScript 函数表示，不需要 return false 来阻止默认行为。

    function ActionButton() {
        function handleClick() {
            alert("Button clicked!");
        }

        return (
            <button onClick={handleClick}>Click Me</button>
        );
    }

5. 条件渲染

React 允许使用 JavaScript 的条件语句来决定组件的渲染内容。

    function Greeting(props) {
        if (props.isLoggedIn) {
            return <h1>Welcome back!</h1>;
        }
        return <h1>Please sign in.</h1>;
    }

也可以用三元运算符或逻辑与 && 进行简化：

    function UserMessage(props) {
        return (
            <div>
                {props.isLoggedIn ? <p>Hello, user!</p> : <p>Please log in.</p>}
                {props.hasNotification && <p>You have new messages!</p>}
            </div>
        );
    }

6. 列表渲染

在 React 中使用 map() 方法渲染列表。每个列表项应包含一个唯一的 key，以优化渲染性能。

    function NameList(props) {
        const names = props.names;
        return (
            <ul>
                {names.map((name, index) => (
                    <li key={index}>{name}</li>
                ))}
            </ul>
        );
    }

7. 表单处理与双向绑定

在 React 中，表单元素通常是受控组件，即其值由 React 的状态管理。

    function Form() {
        const [value, setValue] = useState("");

        function handleChange(event) {
            setValue(event.target.value);
        }

        function handleSubmit(event) {
            alert("Submitted value: " + value);
            event.preventDefault();
        }

        return (
            <form onSubmit={handleSubmit}>
                <input type="text" value={value} onChange={handleChange} />
                <button type="submit">Submit</button>
            </form>
        );
    }

8. 组合与继承

React 鼓励使用组合来构建组件。通常通过将子组件嵌入父组件来组合内容。

    function FancyBorder(props) {
        return (
            <div className={'FancyBorder FancyBorder-' + props.color}>
                {props.children}
            </div>
        );
    }

    function WelcomeDialog() {
        return (
            <FancyBorder color="blue">
                <h1 className="Dialog-title">Welcome</h1>
                <p className="Dialog-message">Thank you for visiting our spacecraft!</p>
            </FancyBorder>
        );
    }