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>;
};
四、实践建议
- 官方文档：精读 React 官方文档，尤其是 Hooks 部分
- 练习项目：
- Todo List 应用（基础状态管理）
- 博客评论系统（组件通信）
- 天气查询应用（API 调用与 Context）
- 推荐工具：
- React DevTools（浏览器插件）
- ESLint + Prettier（代码规范）
- Vite（替代 Create React App，更快的构建工具）
需要我针对某个具体部分展开讲解或提供更多示例吗？ 😊