一、React 基础概念
React 是一个用于构建用户界面的 声明式（Declarative）、组件化（Component-Based） 和 高效（Efficient） 的前端库，核心概念包括 JSX、组件、状态管理和事件处理等。
二、React 核心知识点
（一）JSX（JavaScript XML）
1. JSX 是什么？
JSX 是 JavaScript 的一种语法扩展，用于在 JavaScript 代码中编写类似 HTML 的结构。
2. JSX 的本质
JSX 代码会被 Babel 转换为 React.createElement() 调用，最终生成 虚拟 DOM（Virtual DOM）。
3. JSX 语法规则
- 必须有唯一根节点：
return (<div><h1>Hello React</h1></div> ); - 使用
{}表达式插入变量：const name = "React"; return <h1>Hello, {name}!</h1>; - 必须闭合标签：
<input type="text" /> // 正确
（二）组件（Component）
1. 组件的概念
React 采用 组件化开发，UI 界面由一个个独立的组件构成，每个组件具有自己的逻辑和状态。
2. 组件的分类
- 函数组件（Function Component）：
function Welcome(props) {return <h1>Hello, {props.name}</h1>; } - 类组件（Class Component）：
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;} }
3. 组件的通信方式
- 父组件向子组件传递
props：function Child(props) {return <h1>{props.message}</h1>; }function Parent() {return <Child message="Hello from Parent" />; } - 子组件向父组件传递事件：
function Child(props) {return <button onClick={() => props.onClick("Hello from Child")}>Click Me</button>; }function Parent() {const handleMessage = (msg) => alert(msg);return <Child onClick={handleMessage} />; } - 组件之间的共享状态（Context API、Redux）（详见后续章节）
（三）Props 和 State
1. props（属性）
- 用于父组件向子组件传递数据，不可修改（只读）。
- 组件通过
props接收参数：function Greeting(props) {return <h1>Hello, {props.name}!</h1>; }
2. state（状态）
- 组件内部的可变数据，由组件自身维护。
useState在函数组件中定义状态：function Counter() {const [count, setCount] = React.useState(0);return <button onClick={() => setCount(count + 1)}>Count: {count}</button>; }- 在类组件中，使用
this.state：class Counter extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}render() {return (<button onClick={() => this.setState({ count: this.state.count + 1 })}>Count: {this.state.count}</button>);} }
3. props vs state
| 比较项 | props | state |
|---|---|---|
| 定义位置 | 由父组件传递 | 组件内部定义 |
| 是否可变 | 不可变 | 可变 |
| 作用 | 传递数据 | 维护组件内部状态 |
| 可否被子组件修改 | ❌ 不可修改 | ✅ 可修改 |
（四）事件处理
1. 绑定事件
- 箭头函数（推荐）：
function Button() {return <button onClick={() => alert("Clicked!")}>Click Me</button>; } - 类组件的事件绑定：
class App extends React.Component {handleClick = () => {alert("Clicked!");};render() {return <button onClick={this.handleClick}>Click Me</button>;} }
2. 事件对象 event
- 在事件处理函数中，
event是 React 合成事件（SyntheticEvent）：function Button() {const handleClick = (event) => {console.log(event.target);};return <button onClick={handleClick}>Click Me</button>; }
3. 阻止默认行为
function Link() {return (<a href="https://react.dev" onClick={(e) => e.preventDefault()}>Click me (but won't navigate)</a>);
}
4. 事件传参
function Button() {const handleClick = (name) => {alert(`Hello, ${name}`);};return <button onClick={() => handleClick("React")}>Click Me</button>;
}
三、总结
1. React 基础
- 采用 组件化开发，基于 Virtual DOM
- 使用 JSX 语法，简化 UI 代码
- 通过 函数组件 / 类组件 构建 UI
2. 组件数据管理
props用于 父组件向子组件传递数据state用于 管理组件内部状态- 组件间通信可通过 回调、Context API、Redux 进行（详见后续章节）
3. 事件处理
- 事件绑定推荐使用 箭头函数
- 事件对象
event是 合成事件 - 可以使用
event.preventDefault()阻止默认行为
接下来，我们将详细讲解 生命周期、Hooks 和 React 18 相关优化！ 🚀
