React 基础语法-EW帮帮网

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

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

1. Class Component

1.1. Props

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

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 方法来更新状态，从而触发重新渲染。

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 或三元运算符。

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 事件处理，但有一些语法上的不同。事件命名采用小驼峰命名法，处理函数通过 {} 传递。

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 向子组件传递数据和函数，子组件可以调用父组件传递的函数来传递数据回父组件。

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 能够有效地更新和重新渲染列表。

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 控制，这些表单元素称为“受控组件”。

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。

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 来管理状态。

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. 条件渲染

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

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. 事件处理

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

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 向子组件传递数据和函数。

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 属性。

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 来处理表单数据。

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'));

React 基础语法