一看就懂的ReactJs入门教程 - 精华版

目录#

什么是 React？
环境搭建
JSX 语法
组件 (Components)
状态管理 (State)
属性传递 (Props)
事件处理
生命周期
Hooks 入门
最佳实践
总结
参考资料

什么是 React？#

React 是一个用于构建用户界面的 JavaScript 库。它的核心特点包括：

组件化：将 UI 拆分成独立、可复用的组件
虚拟 DOM：提高性能的高效更新机制
单向数据流：数据从父组件流向子组件，易于理解和调试

为什么选择 React？#

高效：虚拟 DOM 和智能差分算法
灵活：可以与其他库或框架配合使用
强大的生态系统：丰富的第三方库和工具
社区支持：拥有庞大的开发者社区

环境搭建#

使用 Create React App（推荐）#

Create React App 是官方推荐的创建 React 应用的方式。

# 安装 Node.js 后执行以下命令
npx create-react-app my-react-app
cd my-react-app
npm start

手动配置（了解即可）#

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        // React 代码将在这里编写
    </script>
</body>
</html>

JSX 语法#

JSX 是 JavaScript 的语法扩展，允许我们在 JavaScript 中编写类似 HTML 的代码。

基本规则#

// 正确的 JSX
const element = <h1>Hello, React!</h1>;
 
// JSX 中嵌入表达式
const name = '张三';
const greeting = <h1>Hello, {name}!</h1>;
 
// JSX 也是表达式
function getGreeting(user) {
    if (user) {
        return <h1>Hello, {user.name}!</h1>;
    }
    return <h1>Hello, Stranger!</h1>;
}

JSX 特性#

// 1. 必须有一个根元素
const correctJSX = (
    <div>
        <h1>标题</h1>
        <p>内容</p>
    </div>
);
 
// 2. 使用 className 代替 class
const element = <div className="container">内容</div>;
 
// 3. 自闭和标签必须闭合
const img = <img src="image.jpg" alt="描述" />;
 
// 4. 驼峰命名法
const button = <button onClick={handleClick}>点击</button>;

组件 (Components)#

组件是 React 的核心概念，分为函数组件和类组件。

函数组件（推荐）#

// 简单的函数组件
function Welcome(props) {
    return <h1>Hello, {props.name}!</h1>;
}
 
// 箭头函数形式
const Welcome = (props) => {
    return <h1>Hello, {props.name}!</h1>;
};
 
// 更简洁的写法
const Welcome = ({ name }) => <h1>Hello, {name}!</h1>;

类组件#

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

组件组合#

function App() {
    return (
        <div>
            <Welcome name="张三" />
            <Welcome name="李四" />
            <Welcome name="王五" />
        </div>
    );
}

状态管理 (State)#

状态是组件内部的数据，当状态改变时，组件会重新渲染。

类组件中的状态#

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }
 
    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };
 
    render() {
        return (
            <div>
                <p>计数: {this.state.count}</p>
                <button onClick={this.increment}>增加</button>
            </div>
        );
    }
}

函数组件中的状态（使用 Hooks）#

import { useState } from 'react';
 
function Counter() {
    const [count, setCount] = useState(0);
 
    const increment = () => {
        setCount(count + 1);
    };
 
    return (
        <div>
            <p>计数: {count}</p>
            <button onClick={increment}>增加</button>
        </div>
    );
}

属性传递 (Props)#

Props 是从父组件传递给子组件的数据。

基本使用#

// 子组件
function UserCard({ name, age, email }) {
    return (
        <div className="user-card">
            <h3>{name}</h3>
            <p>年龄: {age}</p>
            <p>邮箱: {email}</p>
        </div>
    );
}
 
// 父组件
function UserList() {
    const users = [
        { id: 1, name: '张三', age: 25, email: '[email protected]' },
        { id: 2, name: '李四', age: 30, email: '[email protected]' }
    ];
 
    return (
        <div>
            {users.map(user => (
                <UserCard 
                    key={user.id}
                    name={user.name}
                    age={user.age}
                    email={user.email}
                />
            ))}
        </div>
    );
}

Props 验证#

import PropTypes from 'prop-types';
 
function UserCard({ name, age, email }) {
    // 组件内容
}
 
UserCard.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    email: PropTypes.string.isRequired
};
 
UserCard.defaultProps = {
    age: 18
};

事件处理#

React 中的事件处理与 DOM 事件类似，但有一些语法差异。

基本事件处理#

function Button() {
    const handleClick = (event) => {
        event.preventDefault();
        console.log('按钮被点击了!');
    };
 
    return <button onClick={handleClick}>点击我</button>;
}

传递参数#

function TodoList() {
    const todos = ['学习 React', '写代码', '阅读文档'];
 
    const handleDelete = (index) => {
        console.log(`删除第 ${index} 项`);
    };
 
    return (
        <ul>
            {todos.map((todo, index) => (
                <li key={index}>
                    {todo}
                    <button onClick={() => handleDelete(index)}>删除</button>
                </li>
            ))}
        </ul>
    );
}

生命周期#

类组件生命周期#

class LifecycleDemo extends React.Component {
    constructor(props) {
        super(props);
        console.log('构造函数');
    }
 
    componentDidMount() {
        console.log('组件已挂载');
        // 适合进行 API 调用
    }
 
    componentDidUpdate(prevProps, prevState) {
        console.log('组件已更新');
    }
 
    componentWillUnmount() {
        console.log('组件即将卸载');
        // 清理工作
    }
 
    render() {
        console.log('渲染');
        return <div>生命周期示例</div>;
    }
}

函数组件的生命周期（使用 Hooks）#

import { useState, useEffect } from 'react';
 
function LifecycleDemo() {
    const [data, setData] = useState(null);
 
    // 相当于 componentDidMount 和 componentDidUpdate
    useEffect(() => {
        console.log('组件已挂载或更新');
    });
 
    // 相当于 componentDidMount
    useEffect(() => {
        console.log('组件已挂载');
        // API 调用
        fetchData().then(setData);
    }, []); // 空依赖数组表示只在挂载时执行
 
    // 监听特定状态变化
    useEffect(() => {
        console.log('data 发生变化:', data);
    }, [data]); // 只在 data 变化时执行
 
    return <div>生命周期示例</div>;
}

Hooks 入门#

Hooks 是 React 16.8 引入的新特性，让函数组件也能使用状态和其他 React 特性。

常用 Hooks#

import { useState, useEffect, useContext, useReducer, useCallback, useMemo } from 'react';
 
function AdvancedComponent() {
    // useState - 状态管理
    const [count, setCount] = useState(0);
    const [user, setUser] = useState({ name: '', age: 0 });
 
    // useEffect - 副作用处理
    useEffect(() => {
        document.title = `计数: ${count}`;
    }, [count]);
 
    // useCallback - 记忆函数
    const increment = useCallback(() => {
        setCount(c => c + 1);
    }, []);
 
    // useMemo - 记忆值
    const expensiveValue = useMemo(() => {
        return count * 100; // 假设这是昂贵的计算
    }, [count]);
 
    return (
        <div>
            <p>计数: {count}</p>
            <p>昂贵计算值: {expensiveValue}</p>
            <button onClick={increment}>增加</button>
        </div>
    );
}

自定义 Hook#

// 自定义 Hook - 用于获取窗口大小
function useWindowSize() {
    const [size, setSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight
    });
 
    useEffect(() => {
        const handleResize = () => {
            setSize({
                width: window.innerWidth,
                height: window.innerHeight
            });
        };
 
        window.addEventListener('resize', handleResize);
        
        // 清理函数
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);
 
    return size;
}
 
// 使用自定义 Hook
function ResponsiveComponent() {
    const size = useWindowSize();
 
    return (
        <div>
            <p>窗口宽度: {size.width}px</p>
            <p>窗口高度: {size.height}px</p>
        </div>
    );
}

最佳实践#

1. 组件设计原则#

// 好的组件设计 - 单一职责
// UserProfile.js - 只负责显示用户信息
function UserProfile({ user }) {
    return (
        <div>
            <img src={user.avatar} alt={user.name} />
            <h2>{user.name}</h2>
            <p>{user.bio}</p>
        </div>
    );
}
 
// UserActions.js - 只负责用户操作
function UserActions({ userId, onFollow }) {
    return (
        <div>
            <button onClick={() => onFollow(userId)}>关注</button>
            <button>发送消息</button>
        </div>
    );
}

2. 状态提升#

// 将共享状态提升到最近的共同祖先
function TemperatureConverter() {
    const [celsius, setCelsius] = useState('');
 
    const fahrenheit = celsius !== '' ? (celsius * 9/5 + 32).toFixed(2) : '';
 
    return (
        <div>
            <CelsiusInput value={celsius} onChange={setCelsius} />
            <FahrenheitDisplay value={fahrenheit} />
        </div>
    );
}
 
function CelsiusInput({ value, onChange }) {
    return (
        <input
            type="number"
            value={value}
            onChange={(e) => onChange(e.target.value)}
            placeholder="输入摄氏温度"
        />
    );
}
 
function FahrenheitDisplay({ value }) {
    return <p>华氏温度: {value}</p>;
}

3. 列表和 Key#

function TodoList() {
    const [todos, setTodos] = useState([
        { id: 1, text: '学习 React', completed: false },
        { id: 2, text: '写项目', completed: true }
    ]);
 
    return (
        <ul>
            {todos.map(todo => (
                <TodoItem 
                    key={todo.id} // 必须提供唯一的 key
                    todo={todo}
                />
            ))}
        </ul>
    );
}

4. 条件渲染#

function LoginStatus({ user }) {
    // 多种条件渲染方式
    
    // 1. if 语句
    if (!user) {
        return <div>请登录</div>;
    }
 
    // 2. 逻辑与操作符
    return (
        <div>
            {user.isAdmin && <AdminPanel />}
            <p>欢迎, {user.name}!</p>
            
            // 3. 三元操作符
            {user.hasUnreadMessages ? (
                <span className="badge">新消息</span>
            ) : (
                <span>暂无新消息</span>
            )}
        </div>
    );
}

总结#

通过本教程，你应该已经掌握了 React 的核心概念：

JSX 语法：JavaScript 的扩展，用于描述 UI
组件化开发：函数组件和类组件的使用
状态管理：使用 state 管理组件内部数据
属性传递：使用 props 在组件间传递数据
事件处理：响应用户交互
生命周期：组件的创建、更新和销毁过程
Hooks：现代 React 开发的核心特性

下一步学习建议#

学习 React Router 进行路由管理
掌握状态管理库（如 Redux、Zustand）
了解测试（Jest + React Testing Library）
学习服务端渲染（Next.js）
探索 React 生态系统中的其他工具和库

参考资料#

官方文档#

实践项目#

Todo List 应用
天气应用
博客系统
电商网站前端

工具和扩展#

React Developer Tools（浏览器扩展）
Prettier（代码格式化）
ESLint（代码检查）

希望这篇"精华版"教程能够帮助你快速入门 React！记住，最好的学习方式就是动手实践。开始构建你的第一个 React 应用吧！

目录#