一、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 语法规则
-
必须有唯一根节点 :
jsxreturn ( <div> <h1>Hello React</h1> </div> );
-
使用
{}
表达式插入变量 :jsxconst name = "React"; return <h1>Hello, {name}!</h1>;
-
必须闭合标签 :
jsx<input type="text" /> // 正确
(二)组件(Component)
1. 组件的概念
React 采用 组件化开发,UI 界面由一个个独立的组件构成,每个组件具有自己的逻辑和状态。
2. 组件的分类
-
函数组件(Function Component) :
jsxfunction Welcome(props) { return <h1>Hello, {props.name}</h1>; }
-
类组件(Class Component) :
jsxclass Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
3. 组件的通信方式
-
父组件向子组件传递
props
:jsxfunction Child(props) { return <h1>{props.message}</h1>; } function Parent() { return <Child message="Hello from Parent" />; }
-
子组件向父组件传递事件 :
jsxfunction 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
接收参数:jsxfunction Greeting(props) { return <h1>Hello, {props.name}!</h1>; }
2. state
(状态)
-
组件内部的可变数据,由组件自身维护。
-
useState
在函数组件中定义状态:jsxfunction Counter() { const [count, setCount] = React.useState(0); return <button onClick={() => setCount(count + 1)}>Count: {count}</button>; }
-
在类组件中,使用
this.state
:jsxclass 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. 绑定事件
-
箭头函数 (推荐):
jsxfunction Button() { return <button onClick={() => alert("Clicked!")}>Click Me</button>; }
-
类组件的事件绑定 :
jsxclass App extends React.Component { handleClick = () => { alert("Clicked!"); }; render() { return <button onClick={this.handleClick}>Click Me</button>; } }
2. 事件对象 event
-
在事件处理函数中,
event
是 React 合成事件(SyntheticEvent) :jsxfunction Button() { const handleClick = (event) => { console.log(event.target); }; return <button onClick={handleClick}>Click Me</button>; }
3. 阻止默认行为
jsx
function Link() {
return (
<a href="https://react.dev" onClick={(e) => e.preventDefault()}>
Click me (but won't navigate)
</a>
);
}
4. 事件传参
jsx
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 相关优化! 🚀