当前位置：首页 > news >正文

React 12

news 2025/11/5 7:12:35

1 事件绑定的核心逻辑与常见陷阱

一、React 事件绑定的本质：传递「函数本身」而非「函数调用结果」

React 事件（如 onClick、onChange 等）的本质是等待某个触发时机（如点击、输入）再执行指定函数。因此，事件绑定需要传递的是「函数本身」（函数引用），而不是「立即执行函数并返回结果」。

二、常见错误与正确写法对比

1. 绑定命名函数时

正确写法：onClick={handleClick}直接传递函数名 handleClick（函数引用），React 会在用户点击时才调用它。

错误写法：onClick={handleClick()}加了 () 会导致函数在组件渲染时立即执行（因为 JSX 中 {} 内的代码会被立即执行），而非点击时触发。

function App() {const handleClick = () => {console.log("点击了按钮");};// 正确：点击时执行return <button onClick={handleClick}>点击我</button>;// 错误：渲染时立即执行，点击无反应（除非函数返回另一个函数）// return <button onClick={handleClick()}>点击我</button>;
}

2. 绑定内联函数时

正确写法：onClick={() => alert('点击了')}用匿名箭头函数包裹逻辑，传递的是「箭头函数本身」，React 会在点击时执行箭头函数内的代码（alert）。

错误写法：onClick={alert('点击了')}直接写 alert(...) 会导致渲染时立即执行 alert（因为 alert(...) 是函数调用），点击时反而无反应。

// 正确：点击时弹出提示
<button onClick={() => alert('点击了')}>点击我</button>// 错误：渲染时立即弹出提示，点击无反应
<button onClick={alert('点击了')}>点击我</button>

三、为什么会出现这种陷阱？

JSX 中 {} 内的代码是「立即执行的 JavaScript 表达式」。

当你写 onClick={handleClick()} 或 onClick={alert(...)} 时，handleClick() 和 alert(...) 会被当作表达式立即执行，结果（通常是 undefined）会被赋值给 onClick，导致事件失效。
只有传递「函数本身」（如 handleClick 或 () => {...}），onClick 才能在触发时调用该函数。

四、React 事件绑定的完整实现方式

根据是否需要传递参数、是否使用类组件等场景，常见的绑定方式有以下几种：

1. 无参数的命名函数绑定

直接传递函数名（适用于不需要额外参数的场景）。

function App() {const handleClick = () => {console.log("按钮被点击");};return <button onClick={handleClick}>点击</button>;
}

2. 需要传递参数的绑定（内联箭头函数包裹）

如果需要向事件处理函数传递参数，用箭头函数包裹调用（确保函数在点击时执行，而非渲染时）。

function App() {const handleDelete = (id) => {console.log("删除 ID 为", id, "的数据");};// 点击时传递参数 123 给 handleDeletereturn <button onClick={() => handleDelete(123)}>删除</button>;
}

3. 类组件中的绑定（需注意 this 指向）

类组件中函数的 this 默认指向 undefined，需要通过以下方式绑定：

在构造函数中绑定（推荐，避免重复创建函数）：

class App extends React.Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this); // 绑定 this}handleClick() {console.log("this 指向组件实例：", this);}render() {return <button onClick={this.handleClick}>点击</button>;}
}

使用箭头函数定义方法（ES6 类字段语法，自动绑定 this）：

class App extends React.Component {// 箭头函数的 this 指向组件实例handleClick = () => {console.log("this 指向组件实例：", this);};render() {return <button onClick={this.handleClick}>点击</button>;}
}

4. 绑定事件对象（event）

如需获取事件对象（如鼠标位置、输入值等），可直接在函数中接收，或通过箭头函数传递。

// 方式 1：命名函数直接接收 event
const handleInput = (e) => {console.log("输入值：", e.target.value);
};
<input onChange={handleInput} />// 方式 2：内联箭头函数同时传递参数和 event
const handleChange = (id, e) => {console.log("ID：", id, "输入值：", e.target.value);
};
<input onChange={(e) => handleChange(123, e)} />

五、总结

核心原则：事件绑定需传递「函数本身」，而非「函数调用结果」。
避免陷阱：不要在 onClick={} 中直接写 函数名() 或 执行语句()（如 alert()），除非用箭头函数包裹。
灵活使用：根据是否需要参数、是否为类组件，选择命名函数、箭头函数包裹或绑定 this 的方式。

按照以上规则，就能正确实现 React 事件绑定，避免渲染时误执行、点击无反应等问题。

2 详细解释事件处理函数处理中的props

由于事件处理函数声明于组件内部，因此它们可以直接访问组件的 props。示例中的按钮，当点击时会弹出带有 message prop 的 alert：

function AlertButton({ message, children }) {return (<button onClick={() => alert(message)}>{children}</button>);
}export default function Toolbar() {return (<div><AlertButton message="正在播放！">播放电影</AlertButton><AlertButton message="正在上传！">上传图片</AlertButton></div>);
}

一、先看懂整体结构：两个组件的分工

这段代码定义了两个组件，它们的关系是「父子组件」：

AlertButton：子组件，负责渲染一个按钮，点击时弹出提示框（核心功能是「带提示的按钮」）。
Toolbar：父组件，负责组合多个 AlertButton 子组件，形成一个工具栏（核心功能是「组织按钮布局」）。

最终页面会显示两个按钮，点击第一个弹出 “正在播放！”，点击第二个弹出 “正在上传！”。

二、逐行解析 `AlertButton` 子组件

function AlertButton({ message, children }) {return (<button onClick={() => alert(message)}>{children}</button>);
}

1. 函数参数：`{ message, children }`（接收父组件传递的数据）

这是「解构赋值」语法，意思是从组件的 props（父组件传递的参数对象）中提取两个属性：
- message：父组件传递的 “提示文本”（比如 “正在播放！”）。
- children：父组件在标签中间写的内容（比如 <AlertButton>播放电影</AlertButton> 中的 “播放电影”）。
可以理解为：AlertButton 组件需要两个 “原材料”，一个是点击时要显示的文字（message），一个是按钮上要显示的文字（children）。

2. 返回值：渲染一个按钮（`button` 标签）

<button onClick={() => alert(message)}>{children}
</button>

button 标签：就是普通的 HTML 按钮，但由 React 控制渲染。
onClick={() => alert(message)}：按钮的点击事件绑定（核心逻辑）：
- onClick 是 React 的事件属性（类似 HTML 的 onclick，但首字母大写），用于监听按钮点击。
- () => alert(message) 是一个匿名箭头函数，当按钮被点击时，会执行 alert(message)（弹出提示框，内容是 message 的值）。
- 为什么要用箭头函数包裹？如果直接写 onClick={alert(message)}，会导致组件一渲染就弹出提示（因为 alert(...) 会被立即执行），而不是点击时才弹出。箭头函数在这里的作用是 “延迟执行”—— 只有点击时才会调用 alert。
{children}：按钮上显示的文字，由父组件通过标签内容传递（比如 “播放电影”“上传图片”）。{} 是 React 中插入 JavaScript 变量的语法，这里会把 children 的值（字符串）显示在按钮上。

三、逐行解析 `Toolbar` 父组件

export default function Toolbar() {return (<div><AlertButton message="正在播放！">播放电影</AlertButton><AlertButton message="正在上传！">上传图片</AlertButton></div>);
}

1. `export default`：对外暴露组件

表示这个 Toolbar 组件可以被其他文件导入使用（比如在 App.js 中导入并渲染）。

2. 返回值：渲染一个包含两个 `AlertButton` 的容器

外层 div：作为容器，把两个按钮放在一起（类似 HTML 中用 div 组织布局）。
第一个 AlertButton 组件：
```
<AlertButton message="正在播放！">播放电影
</AlertButton>
```
- 向子组件 AlertButton 传递了两个数据：
  - message="正在播放！"：通过属性传递，子组件会用这个值作为提示文本。
  - 标签中间的 “播放电影”：会被子组件的 children 接收，作为按钮上显示的文字。
第二个 AlertButton 组件：
```
<AlertButton message="正在上传！">上传图片
</AlertButton>
```
- 同理，传递 message="正在上传！"，按钮文字为 “上传图片”。

四、完整执行流程（从渲染到点击）

渲染阶段：
- 当 Toolbar 组件被渲染时，会生成两个 AlertButton 组件。
- 第一个 AlertButton 拿到 message="正在播放！" 和 children="播放电影"，渲染成：<button onClick={...}>播放电影</button>。
- 第二个 AlertButton 拿到 message="正在上传！" 和 children="上传图片"，渲染成：<button onClick={...}>上传图片</button>。
- 最终页面显示两个按钮，文字分别是 “播放电影” 和 “上传图片”。
点击阶段：
- 当用户点击 “播放电影” 按钮时，触发 onClick 事件，执行箭头函数 () => alert(message)。
- 此时 message 的值是 “正在播放！”，所以弹出提示框显示 “正在播放！”。
- 点击 “上传图片” 按钮时，同理，弹出 “正在上传！”。

五、核心亮点：组件复用

AlertButton 被设计成一个 “通用组件”—— 只负责 “点击按钮弹出提示” 这个核心功能，而具体的提示文本（message）和按钮文字（children）由父组件动态传递。这样一来：

如果需要第三个按钮（比如 “下载文件”，提示 “正在下载！”），只需要在 Toolbar 中再写一个 <AlertButton message="正在下载！">下载文件</AlertButton> 即可，无需修改 AlertButton 的代码。
这就是 React 组件化的核心思想：封装可复用的功能，通过 props 传递动态数据。

【还是没看懂，props没引入啊，为什么{message}这种语法，这是js语法吗】

！{message} 这种写法确实和 JavaScript 语法直接相关，而且 props 其实隐藏在代码里了，只是用了更简洁的写法。我们一步步拆开来，保证你能看懂：

一、先明确：`props` 是什么？它在哪里？

在 React 中，props 是父组件传递给子组件的数据的 “总称”，本质是一个 JavaScript 对象。比如父组件写 <AlertButton message="正在播放！">播放电影</AlertButton>，子组件会收到一个 props 对象，长这样：

props = {message: "正在播放！",children: "播放电影"
}

那代码里为什么没写 props 呢？因为子组件用了 “解构赋值”（JavaScript 的语法），直接从 props 里提取了需要的属性。

二、`function AlertButton({ message, children })` 其实是简写！

这句话完整的写法应该是：

function AlertButton(props) {  // 这里的 props 就是父组件传递的所有数据const message = props.message;  // 从 props 里取出 messageconst children = props.children;  // 从 props 里取出 children// ... 后面的代码
}

而 { message, children } 是 JavaScript 的 “对象解构赋值” 语法，是上面三行代码的简写。它的意思是：“从传入的 props 对象中，直接提取 message 和 children 这两个属性，作为变量使用”。

就像你有一个快递箱（props），里面装了两个东西（message 和 children），解构赋值就相当于直接把这两个东西从箱子里拿出来，不用每次都打开箱子（props.xxx）再取。

三、`{message}` 在 JSX 中是什么意思？

当你在 JSX 里看到 {}，它的作用是 “插入 JavaScript 变量或表达式”。比如：

<button onClick={() => alert(message)}>{children}
</button>

这里的 {message} 和 {children}，就是把前面从 props 里解构出来的 message 和 children 变量，插入到 JSX 中：

alert(message) 里的 message：是 JavaScript 变量，对应父组件传递的 message 值（比如 “正在播放！”）。
{children}：在 JSX 中插入 children 变量，对应父组件在标签中间写的内容（比如 “播放电影”）。

举个例子：当父组件传递 message="正在播放！" 和 children="播放电影" 时，子组件的 JSX 会被 “翻译” 成：

<button onClick={() => alert("正在播放！")}>播放电影
</button>

这就是为什么点击按钮会弹出 “正在播放！”，按钮上显示 “播放电影”。

四、总结：核心语法链

父组件通过 <AlertButton message="xxx">文字</AlertButton> 传递数据，形成 props 对象：{ message: "xxx", children: "文字" }。
子组件用 function AlertButton({ message, children })（对象解构）从 props 中提取变量，相当于 const message = props.message; const children = props.children;。
JSX 中用 {变量名} 插入这些变量，比如 alert(message) 用了 message 变量，{children} 显示了 children 变量。

整个过程完全基于 JavaScript 语法（对象、解构赋值）和 React 对 JSX 的规定（{} 插入变量），没有任何 “魔法”。

如果还是哪里绕不过来，可以试着把代码改回 “不简写” 的版本，对比着看：

// 不简写的 AlertButton 组件
function AlertButton(props) {  // 显式写出 propsreturn (<button onClick={() => alert(props.message)}>  // 用 props.message{props.children}  // 用 props.children</button>);
}

这样是不是就清晰多了？{message} 其实就是 {props.message} 的简写呀！

3 React 事件传播

要理解事件传播，我们可以从概念定义、React 中的表现（含 onScroll 的特殊情况）两个维度来解析：

一、事件传播的核心概念

事件传播是指用户操作（如点击、鼠标移动）触发事件后，事件会在 DOM 元素之间 “传递” 的过程，分为三个阶段：

捕获阶段：事件从最外层的根元素开始，向目标元素 “穿透”。
目标阶段：事件到达触发的目标元素。
冒泡阶段：事件从目标元素开始，向最外层的根元素 “回弹”。

我们可以用一个生活场景类比：

把 DOM 元素想象成 “嵌套的盒子”，比如 <div><button>点击我</button></div>。

当你点击按钮时，事件会先从 div（外层盒子）“捕获” 到 button（目标盒子），再从 button“冒泡” 回 div。

在这个过程中，你可以在 div 或 button 上监听事件，从而实现事件委托（用父元素统一处理子元素的事件）等功能。

二、React 中大多数事件的传播逻辑

在 React 中，除了 onScroll，其他事件（如 onClick、onChange、onMouseMove 等）都遵循事件传播机制。

举个例子：

function App() {const handleDivClick = () => {console.log("div 被点击了");};const handleButtonClick = () => {console.log("button 被点击了");};return (<div onClick={handleDivClick} style={{ padding: "20px", border: "1px solid #000" }}><button onClick={handleButtonClick}>点击我</button></div>);
}

当你点击按钮时：

按钮的 handleButtonClick 会执行（目标阶段）。
事件会 “冒泡” 到外层的 div，触发 handleDivClick（冒泡阶段）。最终控制台会先打印 button 被点击了，再打印 div 被点击了。

三、`onScroll` 的特殊之处（不传播）

onScroll 事件仅会在你绑定的 JSX 标签上触发，不会向父元素或子元素传播。

比如：

function App() {const handleDivScroll = () => {console.log("div 滚动了");};const handleInnerDivScroll = () => {console.log("内部 div 滚动了");};return (<divonClick={handleDivClick}onScroll={handleDivScroll}style={{ height: "200px", overflow: "auto", border: "1px solid #000" }}><divonScroll={handleInnerDivScroll}style={{ height: "400px", background: "#f0f0f0" }}>滚动我...</div></div>);
}

当你滚动 “内部 div” 时，只会触发 handleInnerDivScroll，外层的 div 的 handleDivScroll 不会被触发（因为 onScroll 不传播）。
只有当你滚动外层 div 时，才会触发 handleDivScroll。

总结来说，事件传播是事件在 DOM 元素间 “传递” 的过程，React 中大部分事件都支持这种传递，方便做事件委托等操作；但 onScroll 是例外，它只在绑定的元素自身触发，不会向外传播。

【是不是就是事件响应了？】

可以这么理解，但 “事件传播” 和 “事件响应” 是两个相关但不同的概念，前者是后者的 “传递过程”，后者是 “最终结果”。我们用一个具体的例子说清楚：

1. 事件响应：“谁被触发了”

当你点击一个按钮时，按钮的点击事件处理函数（比如 onClick 绑定的函数）执行了，这就是 “事件响应”—— 某个元素对事件做出了反应。

比如：

<button onClick={() => console.log("按钮被点击")}>点我</button>

点击按钮后，console.log 执行了，这就是 “事件响应”。

2. 事件传播：“事件怎么传到这里的”

但事件不会凭空被响应，它有一个 “传递路径”。比如：

<div onClick={() => console.log("div 响应了")}><button onClick={() => console.log("按钮响应了")}>点我</button>
</div>

当你点击按钮时：

首先，按钮的 onClick 执行（按钮响应了事件）。
接着，事件会 “冒泡” 到外层的 div，div 的 onClick 也会执行（div 也响应了事件）。

这个 “按钮 → div” 的传递过程，就是 “事件传播”。传播的目的是让事件沿途的元素都有机会响应事件。

总结

事件响应：单个元素对事件做出的具体处理（比如执行函数）。
事件传播：事件在元素之间传递的过程，决定了哪些元素有机会响应事件。

简单说，事件传播是 “事件走的路”，事件响应是 “路上的元素做的事”。没有传播，很多元素可能没机会响应事件；没有响应，传播也就没有意义啦。

4 冒泡

【冒泡是什么，这个是不是就是多次连击click不会产生多个弹窗，优化了交互】

要理解冒泡，我们需要结合 React 事件传播的三个阶段，以及它和 “多次交互优化” 的区别来解析：

一、什么是「事件冒泡」？

事件冒泡是事件传播的 “第三阶段”：当事件在 “目标元素”（比如按钮）触发后，会从目标元素开始，向父元素逐层向上传递，沿途的父元素如果绑定了对应事件（如 onClick），就会依次执行。

举个例子：

<div onClick={() => console.log("div 被点击")}><button onClick={() => console.log("按钮被点击")}>点我</button>
</div>

当你点击按钮时：

先执行按钮的 onClick（目标阶段）→ 打印 “按钮被点击”。
事件冒泡到外层 div，执行 div 的 onClick → 打印 “div 被点击”。

这就是 “冒泡”—— 事件像水泡一样从底部（目标元素）往顶部（父元素）“冒”，让父元素也能响应事件。

二、它和 “多次点击不产生多个弹窗” 无关

你提到的 “多次点击不产生多个弹窗” 是 “防止重复触发” 的交互优化 ，和事件冒泡的逻辑没有直接关系。

事件冒泡是 “事件传递的机制”，而 “防止重复弹窗” 是业务逻辑层面的控制（比如用状态 isClicked 标记是否已触发，或者防抖 / 节流）。

比如，如果你想点击按钮只弹一次窗，可以这样写：

function App() {const [clicked, setClicked] = React.useState(false);const handleClick = () => {if (!clicked) {alert("只弹一次！");setClicked(true);}};return <button onClick={handleClick}>点我</button>;
}

这里是通过状态 clicked 来控制是否触发弹窗，和事件冒泡的机制无关。

三、再结合你提供的 “捕获阶段” 理解事件传播全流程

React 事件传播分为三个阶段，冒泡是其中最后一个阶段：

捕获阶段：事件从根元素向下传递，执行所有带 Capture 后缀的事件（如 onClickCapture）。
目标阶段：事件到达触发的目标元素，执行它的事件（如 onClick）。
冒泡阶段：事件从目标元素向上传递，执行所有父元素的事件（如 onClick）。

比如代码中的例子：

<div onClickCapture={() => { /* 捕获阶段执行 */ }}><button onClick={e => e.stopPropagation()} /><button onClick={e => e.stopPropagation()} />
</div>

点击按钮时，先执行 div 的 onClickCapture（捕获阶段）。
再执行按钮的 onClick，但 e.stopPropagation() 会阻止事件继续冒泡，所以父元素的 onClick（如果有的话）不会再执行。

总结：

「冒泡」是事件传播的一个阶段，让父元素能响应子元素的事件。
它和 “防止多次弹窗” 是两个不同层面的逻辑，前者是事件机制，后者是业务交互优化。

5 阻止冒泡和阻止默认行为

一、`e.preventDefault()`：阻止 “默认行为”

它的作用是阻止浏览器对该事件的 “默认操作”，但不会阻止事件传播（冒泡 / 捕获）。

举几个常见的默认行为例子：

点击 <a href="https://xxx.com"> 时，浏览器会默认跳转到目标链接。
提交 <form> 时，浏览器会默认刷新页面并提交数据。
按下空格键时，页面会默认向下滚动。

如果我们想 “自定义这些行为”，就可以用 e.preventDefault() 阻止默认操作。

示例：

// 点击链接时，不跳转，只执行自定义逻辑
<ahref="https://example.com"onClick={(e) => {e.preventDefault(); // 阻止默认跳转console.log("链接被点击，但不跳转");}}
>点我
</a>

二、阻止冒泡的 API：`e.stopPropagation()`

它的作用是阻止事件在 DOM 中继续传播（包括冒泡和捕获阶段），但不会影响浏览器的默认行为。

示例（结合之前的冒泡场景）：

<div onClick={() => console.log("div 被点击")}><buttononClick={(e) => {e.stopPropagation(); // 阻止事件冒泡到 divconsole.log("按钮被点击");}}>点我</button>
</div>

此时点击按钮，只会打印 “按钮被点击”，外层 div 的 onClick 不会执行（因为冒泡被阻止了）。

三、总结：两者的核心区别

特性	`e.preventDefault()`	`e.stopPropagation()`
作用	阻止浏览器的默认行为	阻止事件的传播（冒泡 / 捕获）
不影响的逻辑	事件仍然会继续传播（冒泡 / 捕获）	浏览器默认行为仍然会执行
典型场景	自定义链接跳转、表单提交等	避免父元素重复响应子元素的事件

简单来说：

如果你想 “不让浏览器自动干某件事”（比如不跳转、不刷新），用 e.preventDefault()。
如果你想 “不让事件传到父元素”（比如子元素点击了，父元素别再触发），用 e.stopPropagation()。

6 摘要

这篇摘要围绕 React 事件处理，从绑定方式、传播控制、函数传递、默认行为等维度，系统总结了核心规则，以下是详细拆解：

一、事件处理函数的绑定与定义

绑定形式：需将函数本身作为 prop 传递给元素（如 <button>），格式为 onClick={handleClick}，而非 onClick={handleClick()}（后者会在渲染时立即执行函数，而非点击时触发）。
定义方式：可单独定义（命名函数）或内联定义（箭头函数，如 onClick={() => { ... }}）。
作用域优势：事件处理函数在组件内部定义时，可直接访问组件的 props，便于读取父组件传递的数据。