React 基础语法

aiguangyuan2025-06-04 18:49

新版本 React 推荐使用函数式组件设计，状态相关处理推荐使用 Hooks，接下来我们通过 class component 和 function component 进行对比讲解。

React 的基础语法和概念是构建 React 应用程序的核心。以下是对 React 基础语法的详细说明，包括 props、state、条件渲染、事件处理和组件传值等。

1. Class Component

1.1. Props

props 是组件的属性，是从父组件传递到子组件的数据。props 是只读的，子组件只能读取而不能修改它们。

javascript 复制代码 
import React from 'react';
import ReactDOM from 'react-dom';

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

function App() {
    return (
        <div>
            <Welcome name="Sara" />
            <Welcome name="Cahal" />
            <Welcome name="Edite" />
        </div>
    );
}

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

1.2. State

state 是组件内部的数据状态。state 是可变的，可以通过调用 this.setState 方法来更新状态，从而触发重新渲染。

javascript 复制代码 
import React from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = { date: new Date() };
    }

    componentDidMount() {
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({
            date: new Date()
        });
    }

    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

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

1.3. 条件渲染

根据某个条件来决定渲染哪个组件或内容。可以使用 JavaScript 中的条件运算符，如 if、else 或三元运算符。

javascript 复制代码 
function UserGreeting(props) {
    return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
    return <h1>Please sign up.</h1>;
}

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting />;
    }
    return <GuestGreeting />;
}

ReactDOM.render(
    <Greeting isLoggedIn={false} />,
    document.getElementById('root')
);

1.4. 事件处理

React 的事件处理类似于 DOM 事件处理，但有一些语法上的不同。事件命名采用小驼峰命名法，处理函数通过 {} 传递。

javascript 复制代码 
class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isToggleOn: true };

        // 绑定事件处理函数
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(state => ({ 
            isToggleOn: !state.isToggleOn 
        })); 
    }

    render() {
        return (
            <button onClick={this.handleClick}> 
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        ); 
    }
}

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

1.5. 组件传值

父组件可以通过 props 向子组件传递数据和函数，子组件可以调用父组件传递的函数来传递数据回父组件。

javascript 复制代码 
class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { message: '' };
        this.handleChildData = this.handleChildData.bind(this);
    }

    handleChildData(data) {
        this.setState({ message: data });
    }

    render() {
        return (
            <div>
                <Child onChildData={this.handleChildData} />
                <p>Message from child: {this.state.message}</p>
            </div>
        );
    }
}

class Child extends React.Component {
    sendData = () => {
        this.props.onChildData('Hello from child');
    }

    render() {
        return (
            <div>
                <button onClick={this.sendData}>Send Data to Parent</button>
            </div>
        );
    }
}

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

1.6. 列表和 Key

在 React 中渲染列表时，需要为每个列表项提供一个唯一的 key 属性，以便 React 能够有效地更新和重新渲染列表。

javascript 复制代码 
function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        <li key={number.toString()}>
            {number}
        </li>
    );
    return (
        <ul>{listItems}</ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
    <NumberList numbers={numbers} />,
    document.getElementById('root')
);

1.7. 表单处理

React 表单元素的值通常由组件的 state 控制，这些表单元素称为"受控组件"。

javascript 复制代码 
class NameForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { value: '' };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ value: event.target.value });
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}> 
                <label> 
                    Name: 
                    <input type="text" value={this.state.value} onChange={this.handleChange}/>
                </label> 
                <input type="submit" value="Submit"/>
            </form>
        );
    }
}

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

2. Class Component

目前 React 应用主流编码方式是函数式组件，后续我们的课程也均是以函数式组件为主，同学们重点学习。

2.1. Props

函数式组件通过参数来接收 props。

javascript 复制代码 
import React from 'react';
import ReactDOM from 'react-dom';

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

function App() {
    return (
        <div>
            <Welcome name="Sara" />
            <Welcome name="Cahal" />
            <Welcome name="Edite" />
        </div>
    );
}

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

2.2. State

函数式组件使用 useState Hook 来管理状态。

javascript 复制代码 
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

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

    useEffect(() => {
        const timerID = setInterval(() => tick(), 1000);
        return () => clearInterval(timerID);
    }, []);

    const tick = () => {
        setDate(new Date());
    };

    return (
        <div>
            <h1>Hello, world!</h1>
            <h2>It is {date.toLocaleTimeString()}</h2>
        </div>
    );
}

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

2.3. 条件渲染

使用条件运算符或逻辑运算符来实现条件渲染。

javascript 复制代码 
import React from 'react';
import ReactDOM from 'react-dom';

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    return (
        <div>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
        </div>
    );
}

ReactDOM.render(
    <Greeting isLoggedIn={false} />,
    document.getElementById('root')
);

2.4. 事件处理

函数式组件通过内联函数或自定义函数来处理事件。

javascript 复制代码 
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Toggle() {
    const [isToggleOn, setIsToggleOn] = useState(true);

    const handleClick = () => {
        setIsToggleOn(!isToggleOn);
    };

    return (
        <button onClick={handleClick}> 
            {isToggleOn ? 'ON' : 'OFF'}
        </button>
    );
}

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

2.5. 组件传值

父组件可以通过 props 向子组件传递数据和函数。

javascript 复制代码 
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Parent() {
    const [message, setMessage] = useState('');

    const handleChildData = (data) => {
        setMessage(data);
    };

    return (
        <div>
            <Child onChildData={handleChildData}/>
            <p>Message from child: {message}</p>
        </div>
    );
}

function Child(props) {
    const sendData = () => {
        props.onChildData('Hello from Child');
    };

    return (
        <div>
            <button onClick={sendData}>Send Data to Parent</button>
        </div>
    );
}

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

2.6. 列表和 Key

渲染列表时，需要为每个列表项提供一个唯一的 key 属性。

javascript 复制代码 
import React from 'react';
import ReactDOM from 'react-dom';

function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) => 
        <li key={number.toString()}>
            {number}
        </li>
    );
    return (
        <ul>{listItems}</ul>
    );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
    <NumberList numbers={numbers} />,
    document.getElementById('root')
);

2.7. 表单处理

函数式组件使用 useState Hook 来处理表单数据。

javascript 复制代码 
import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function NameForm() {
    const [value, setValue] = useState('');

    const handleChange = (event) => {
        setValue(event.target.value);
    };

    const handleSubmit = (event) => {
        alert('A name was submitted: ' + value);
        event.preventDefault();
    };

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

ReactDOM.render(<NameForm />, document.getElementById('root'));
相关推荐
aiguangyuan3 小时前
React Hooks 基础指南
react·前端开发
aiguangyuan19 小时前
React 项目初始化与搭建指南
react·前端开发
aiguangyuan1 天前
React 组件异常捕获机制详解
react·前端开发
aiguangyuan1 天前
深入理解 JSX：React 的核心语法
react·前端开发
aiguangyuan3 天前
React 核心概念与生态系统
react·前端开发
aiguangyuan3 天前
React 18 生命周期详解与并发模式下的变化
react·前端开发
aiguangyuan5 天前
Vue 3.0 中的路由导航守卫详解
前端开发·vue 3.0
aiguangyuan6 天前
Vue 3.0 状态管理方案Vuex详解
前端开发·vue 3.0
vivo互联网技术8 天前
纯前端实现图片伪3D视差效果
webgl·前端开发·pixi.js
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04VMware虚拟机安装Win7专业版保姆级教程（附镜像包）05DeepSeek各版本说明与优缺点分析06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07山东大学2024深度学习期末考试回忆08wandb使用遇到的一些问题09组基轨迹建模 GBTM的介绍与实现（Stata 或 R）10Coze扣子平台完整体验和实践（附国内和国际版对比）