超级会员免费看
本文深入剖析React组件基础，包括事件机制、高阶组件、Render props、Hooks的差异与迭代，以及React Fiber、生命周期等关键概念。详细解释了React事件如何合成和冒泡，组件的事件代理原理，React组件类型如Component、PureComponent的差异，以及state和props的管理。同时，文章探讨了React中如何优化性能，如React-Fiber的引入以解决同步渲染导致的卡顿问题，以及React.StrictMode在开发中的作用。此外，文章还讨论了React状态提升、props.children与React.Children的区别，以及在页面重新加载时如何保留数据。
1. 组件基础
1.1. React事件机制
<div onClick={this.handleClick.bind(this)}>点我</div>React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂载销毁时统一订阅和移除事件。
除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event.stopProppagation()方法。
订阅专栏 解锁全文
扫一扫
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
