一、React 开发的三个核心依赖包
| 包名 | 作用说明 |
|---|---|
| react | React 的核心库，提供创建组件、定义状态、生命周期等核心功能。 |
| react-dom | 提供与 DOM 操作相关的方法，将组件渲染到浏览器页面中。 |
| babel | JavaScript 编译器，用于将 JSX 语法转换为浏览器可识别的 JavaScript 代码。 |
💡 现代 React 项目中通常通过 Vite 或 Create React App 自动集成这些依赖与配置。
二、React 如何封装组件？
1️⃣ 类组件封装方式
class App extends React.Component {
render() {
return <h2>Hello React</h2>;
}
}
// 渲染根组件
const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
2️⃣ 函数组件方式（推荐）
function App() {
return <h2>Hello React</h2>;
}
💡 现代开发推荐使用函数组件，结合 React Hooks（useState, useEffect）即可实现完整逻辑。
三、事件绑定与 this 的绑定方式
方式一：直接绑定 this
<button onClick={this.handleClick.bind(this)}>点击</button>
方式二：在构造函数中提前绑定
class App extends React.Component {
constructor() {
super();
this.state = { message: "Hello World" };
// 提前绑定 this
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this.state.message);
}
render() {
return <button onClick={this.handleClick}>点击</button>;
}
}
方式三（推荐）：使用箭头函数绑定
// 直接在类中定义箭头函数
class App extends React.Component {
state = { message: "Hello World" };
handleClick = () => {
console.log(this.state.message);
};
render() {
return <button onClick={this.handleClick}>点击</button>;
}
}
⚠️ 若在 render 中直接使用箭头函数，会在每次渲染时创建新函数，不推荐在高频渲染场景中使用。
四、 JSX 书写规范
✅ 顶层必须有且只有一个根元素
✅ JSX 多行时用 () 包裹，方便格式化
✅ 单标签必须自闭合（<img />, <input />）
✅ 注释写法：{/* 注释内容 */}
五、JSX 嵌入数据类型
| 数据类型 | 显示情况 | 示例 |
|---|---|---|
| Number / String / Array | ✅ 正常显示 | {name}, {arr} |
| null / undefined / Boolean | 🚫 不显示 | {null} → 空 |
| Object | ❌ 报错（不能作为子元素） | { {a:1} } ❌ |
| 显示 null/undefined/boolean | ✅ 转为字符串 | {String(value)}、{value + ''} 、{value.toString()} |
Object类型不能作为子元素，如需显示如下：
<h2> {ddd.name}</h2>
{/*对象多个属性*/}
<h2> {Object.keys(ddd)[0]}</h2>
六、 JSX 传递参数
- event参数的传递 -
onClick={(event) => this.btn1Click(event)} - 额外参数的传递 -
onClick={(event) => this.btn2Click(event, "http", 18)}
btn1Click(event) {
console.log(event);
}
btn2Click(event, name, age) {
console.log(event, name, age);
}
七. JSX的代码是如何被编译为React代码的？它的本质是进行什么操作？
- jsx是通过babel工具转换编译成React代码的
- 本质
- jsx 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖
- 所有的jsx最终都会被转换成React.createElement的函数调用
`
八. 什么是虚拟DOM？虚拟DOM在React中起到什么作用？
- 什么是虚拟DOM？
- Virtual DOM 是一种编程概念，UI以一种理想化或者说虚拟化的方式保存在内存中
- Virtual DOM 本质上是 JavaScript 对象，是真实 DOM 的描述，⽤⼀个 JS 对象来描述⼀个 DOM 节点
- 我们知道jsx转成React代码的本质是 - 转换成React.createElement的函数调用
- 通过React.createElement的函数创建出来的
ReactElement对象 - React利用
ReactElement对象组成了一个JavaScript的对象树 - JavaScript的对象树就是虚拟DOM
- 虚拟DOM在React中的作用
- 虚拟DOM 通过diff算法 - 以最⼩的代价更新变化的视图
- 跨平台渲染
- 声明式编程 - 虚拟DOM帮助我们从命令式编程转到了声明式编程的模式
- 你只需要告诉React希望让UI是什么状态
- React来确保DOM和这些状态是匹配的
- 不需要直接进行DOM操作，就可以从手动更改DOM、属性操作、事件处理中解放出来
