11｜事件处理：React合成事件是什么？为什么不用原生DOM事件？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
React合成事件是React框架内建的一套事件系统，用于处理用户交互。相比原生DOM事件，合成事件隐藏了复杂性和跨浏览器的不一致性，更易于在React框架中使用。React规范化了一些在各个浏览器间行为不一致的事件，如`onChange`、`onBeforeInput`、`onMouseEnter`等，使开发者不用再担心事件处理的浏览器兼容性问题。通过合成事件，开发者可以更方便地处理用户交互，同时享受React框架带来的便利。 另外，文章还介绍了受控组件和表单处理的重要性，以及如何利用React state和合成事件处理用户交互，形成闭环，从而实现受控组件。通过这种方式，开发者可以轻松获取表单数据并进行验证、提交到服务器端等操作。文章还提到了显式地将表单元素集中在一个`<form>`表单里，以及禁用表单提交事件的默认行为的方法。 此外，文章还涉及了合成事件的冒泡和捕获机制，以及在React应用中使用原生DOM事件的情况。总的来说，本文深入介绍了React合成事件和受控组件的基础知识，为读者提供了对React事件处理和表单交互的全面了解，为后续课程的学习打下了基础。
《现代 React Web 开发实战》，新⼈⾸单¥59
全部留言(11)
- 最新
- 精选
🐑置顶你好，我是《现代React Web开发实战》的编辑辰洋，这是👇项目的源代码链接，供你学习与参考：https://gitee.com/evisong/geektime-column-oh-my-kanban/releases/tag/v0.11.02022-09-19归属地：北京
海华呀1、执行顺序 是父-子-父，有些洋葱圈模型的感觉 <div onClickCapture={() => console.log(1)} onClick={() =>console.log(4)} > <p onClickCapture={() => console.log(2)} onClick={() => { console.log(3) }}> target </p> </div > 例如这个点击会依次打印出1、2、3、4； 阻止冒泡 一般是父子组件都对事件做了处理，例如 文章列表页 ，点赞按钮，和打开详情页面；作者回复: 你好，海华呀，很简洁有效的实验，赞！
2022-10-18归属地：北京2
WL感觉老师讲得过于多内容了，看着挺花时间；可以简化些就更好了作者回复: 你好，WL，感谢你的反馈。目前这个专栏的整体，还有每节课的局部，基本都是按照表层-底层-表层-底层逻辑设计的，每节课设计的内容密度与这套逻辑相关。我和专栏编辑也商量过，在不改变课程总体设计的前提下，我们会尽量平衡各位同学的学习需求。
2022-09-15归属地：北京1
潮汐老师，想问一下，这节课的拖拽的例子，你的拖拽开始的时候，卡片会不会有一闪而过的卡片时间从status的时间变成相对时间的画面。分析了下，感觉像是KanbanCard的setDraggedItem触发了App的更新渲染，KanbanColumn和KanbanCard也会被重新渲染。但是draggedItem也并没有传给KanbanCard，为啥会触发KanbanCard的协调更新呢。作者回复: 你好，潮汐，我用 https://gitee.com/evisong/geektime-column-oh-my-kanban/releases/tag/v0.11.0 的代码在本地跑了一下，没观察到你说的情况，请问你使用的 git commit id 和浏览器版本是怎样的？
2023-01-08归属地：中国香港3
阿阳每节课的内容好多，全是干货。需要反复的听，看，动手实践。请问老师，每节课的课后习题有没有专门的章节做解答啊？作者回复: 你好，阿阳，感谢你的认可，衷心希望你从本专栏中有所收获。 专栏每节课课后都有1～2个思考题，初衷是为了鼓励同学们思考、讨论，提升学习效果。可以看到在每节课的留言区，已经有了不少优秀的答案，一些答案下面有我的评论，也有部分答案引起了同学们的热烈讨论。 在连载期间，根据同学们的留言，我们也选了3个主题制作上线了两节加餐：《加餐01｜留言区心愿单：真·子组件以及jsx-runtime》和《加餐02｜留言区心愿单：Fiber协调引擎》。目前虽然连载已经告一段落，还是非常欢迎同学们留言参与互动，我们也会根据同学们的需求，考虑是否额外加餐。 在此也感谢所有参与互动的同学们，谢谢你们！
2022-11-29归属地：北京
癡癡的等你歸老师，课程源码不见了，404了作者回复: 你好，癡癡的等你歸，你说的源码链接是下面这个吗？ https://gitee.com/evisong/geektime-column-oh-my-kanban/releases/tag/v0.11.0 我用电信宽带和联通5G都试了试，目前都能正常访问（虽然后者有点慢）。请再试试，如果还是不行请告诉我们你的电信提供商和连接方式，我会请Gitee排查。
2022-11-16归属地：北京- Geek_8e9c8d已经开始期待以后开的项目课了 希望能得到省份和城市的那个思考题的更多提示~,谢谢
作者回复: 你好，Geek_8e9c8d，抱歉由于之前一直在赶稿，这么久才回复。第24节课的特别企划开源项目在： https://gitee.com/evisong/geektime-column-oh-my-kit 很快就会正式运转起来，非常期待你的加入。 关于第10节课省份+城市的思考题，基本知识点就是那个依赖值数组。文稿中的代码： // ------------ -------------- // | 省份... |v| | 城市... |v| // ------------ -------------- const [province, setProvince] = useState(null); const [cities, setCities] = useState([]); useEffect(() => { if (province === '山东') { // 这些数据可以是本地数据，也可以现从服务器端读取 setCities(['济南', '青岛', '淄博']); } }, [province]); 意思就是当 province值有变化才会再次执行前面的副作用回调函数，来更新城市列表state。
2022-10-10归属地：北京 
01对目前发展来讲， 合成事件是否是个好的选择。 同时是否增加了开发的心智负担。 许多类react相关库不采用合成事件代替原生事件。作者回复: 你好，01，这是个好问题。我也赞同合成事件增加了开发者的认知负担。不过我也会从下面几个方面思考合成事件对于React的必要性： 1. React对事件系统的限制。对于DOM event，只要开发者愿意，可以做到很多替代React数据流的事情，而合成事件，则只保留了主要是与用户交互相关的部分能力，保证它不会跟React其他特性抢活儿。 2. 合成事件对于特定事件的所谓规范化，尤其是onChange，算是受控组件的基本实现原理，如果放手给原生DOM事件，受控组件方案可能需要调整。 3. 原生DOM event的事件处理是同步执行的，可能会阻塞页面，我本想对比一下合成事件处理是不是异步执行的，但我查过React源码packages/react-dom/src/events/和一些资料，还没有发现有地方说明这一点。 4. 在React 17，合成事件处理函数中修改多次state，会自动批处理，只触发一次渲染，原生DOM事件处理函数中如果也修改多个state，是不享受这个待遇的；不过这个优势在React 18已经不存在了，只要是事件处理函数中，都可以自动批处理，只渲染一次： elm.addEventListener('click', () => { setCount(c => c + 1); setFlag(f => !f); // React will only re-render once at the end (that's batching!) }); 具体可以参考 https://github.com/reactwg/react-18/discussions/21 如有补充或其他观点，欢迎继续回复讨论。
2022-09-27归属地：北京2
joel终于追上来了作者回复: 你好，joel，我看了下你留言的日期，学习速度快得让人羡慕 :) 很高兴专栏能引起你的学习兴趣。
2022-09-15归属地：北京
C0S_02老师您好，我一直没明白 合成事件 的必要性是什么，react 到底在解决什么需求2023-05-27归属地：四川1