React环境搭建及语法简介

React 是目前最流行的前端框架之一，其核心是组件化开发和虚拟 DOM。以下从基础语法到高级特性，为你提供系统化的学习路径和代码示例。

一、基础环境搭建

首先需要安装 Node.js（包含 npm 或 yarn），然后创建 React 项目：

# 使用 create-react-app 脚手架
npx create-react-app my-react-app
cd my-react-app
npm start  # 启动开发服务器

二、核心语法与概念

1. 组件定义

React 组件分为函数组件和类组件，推荐使用函数组件（更简洁，配合 Hooks）。

// 函数组件（推荐）
const Welcome = (props) => {return <h1>Hello, {props.name}</h1>;
};// 类组件（旧写法）
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}

2. JSX 语法

JSX 是 JavaScript 的语法扩展，用于描述 UI 结构：

const element = (<div className="container"><h1>Hello, JSX!</h1><p>{1 + 2}</p>  {/* 嵌入表达式 */}{true && <p>条件渲染</p>}</div>
);

• 注意：
  • 类名使用 className 而非 class
  • 标签必须闭合（如 <img />）
  • 支持表达式嵌入 {}

3. 状态管理（State）

使用 useState Hook 管理组件内部状态：

import { useState } from 'react';const Counter = () => {const [count, setCount] = useState(0);  // 初始化状态return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
};

4. 生命周期（Hooks 版）

useEffect 替代类组件的 componentDidMount、componentDidUpdate 和 componentWillUnmount：

import { useEffect, useState } from 'react';const Example = () => {const [data, setData] = useState(null);useEffect(() => {// 组件挂载后执行（类似 componentDidMount）fetchData();// 清理函数（类似 componentWillUnmount）return () => {// 资源清理逻辑};}, []);  // 空依赖数组表示只执行一次return <div>{data}</div>;
};

5. 组件通信

• 父→子：通过 props 传递数据
• 子→父：通过回调函数传递数据

// 父组件
const Parent = () => {const [message, setMessage] = useState('');const handleChildClick = (newMessage) => {setMessage(newMessage);};return (<div><Child onButtonClick={handleChildClick} /><p>Received: {message}</p></div>);
};// 子组件
const Child = (props) => {return (<button onClick={() => props.onButtonClick('Hello from child')}>Send Message</button>);
};

三、高级特性

1. 条件渲染

const UserGreeting = ({ isLoggedIn }) => {return isLoggedIn ? (<p>Welcome back!</p>) : (<p>Please log in.</p>);
};

2. 列表渲染

使用 .map() 方法渲染列表，注意添加唯一 key：

const TodoList = ({ todos }) => {return (<ul>{todos.map(todo => (<li key={todo.id}>{todo.text}</li>))}</ul>);
};

3. 自定义 Hooks

提取可复用的逻辑：

// useFetch.js
import { useState, useEffect } from 'react';const useFetch = (url) => {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);useEffect(() => {fetch(url).then(res => res.json()).then(data => {setData(data);setLoading(false);});}, [url]);return { data, loading };
};// 使用自定义 Hook
const PostList = () => {const { data, loading } = useFetch('https://api.example.com/posts');if (loading) return <p>Loading...</p>;return <div>{data.map(post => <p key={post.id}>{post.title}</p>)}</div>;
};

4. Context API

跨层级传递数据（替代层层传递 props）：

// 创建 Context
const ThemeContext = React.createContext();// 提供者组件
const App = () => {const theme = 'dark';return (<ThemeContext.Provider value={theme}><Toolbar /></ThemeContext.Provider>);
};// 深层组件使用
const Toolbar = () => {return (<div><ThemedButton /></div>);
};const ThemedButton = () => {const theme = useContext(ThemeContext);  // 使用 useContext Hookreturn <button style={{ background: theme }}>Themed Button</button>;
};

四、实践建议

1. 官方文档：精读 React 官方文档，尤其是 Hooks 部分
2. 练习项目：
   • Todo List 应用（基础状态管理）
   • 博客评论系统（组件通信）
   • 天气查询应用（API 调用与 Context）
3. 推荐工具：
   • React DevTools（浏览器插件）
   • ESLint + Prettier（代码规范）
   • Vite（替代 Create React App，更快的构建工具）

需要我针对某个具体部分展开讲解或提供更多示例吗？ 😊