当我们在组件上设置事件处理器时，React并不会在该DOM元素上直接绑定事件处理器. React内部自定义了一套事件系统，在这个系统上统一进行事件订阅和分发. 具体来讲，React利用事件委托机制在Document上统一监听DOM事件，再根据触发的target将事件分发到具体的…

一般我们的做法是判断scrollTop和clientHeight对比scrollHeight,得出是否在底部。 但是这种做法在移动端会有各种各样的问题，包括浏览器版本，ios，Android。 此方法非常简单，只需要为元素生成一个IntersectionObserver,并且监…

惰性加载是一种优化 Web 应用和移动应用的旧技术。非常直截了当 —— 如果在某一时刻资源没有被查看或需要，就不要渲染它们。例如，如果我们有一个要显示的文章列表，开始时应该只渲染视口上的内容。这意味着其他元素将在以后按需呈现（当它们位于视口中或即将在视口上时）。 大多数时候，我…

Web 为了支持客户端和服务器之间的全双工（或双向）通信已经走过了很长的路。这是 WebSocket 协议的主要目的：通过单个 TCP 套接字连接在客户端和服务器之间提供持久的实时通信。 WebSocket 协议只有两个议程：1）打开握手，2）帮助数据传输。一旦服务器和客户端握…

我们经常使用js对象 key...value 的形式存储内容，使用 . 操作符来取的相应的值（这是一种hash表），如果我们将这个与 react component 结合就会发生奇妙的反应： 当我初次接触到这种写法的时候，最直观的感觉就是这就是 switch 的替代（alter…

使用 create-react-app 生成项目，不会有 webpack 的配置项，要导出 webpack，必须使用 react-script eject，但这是一个单向操作，eject 后，就无法恢复了。如果只是修改一些简单的配置，eject 是没有必要的。

实现多个表单组件， Input 基础输入框、 PasswordRevealer 密码可见、 Slider 滑块元素、 MultiselectCheckbox 复选框、 Select 下拉选择器。

第一次在掘金上发布文章，本着学习的态度，将自己运用Next.js开发服务端渲染的项目复原总结出来，巩固知识点，也可以跟同行探讨下技术。（文章不断完善中...） 公司原有项目基于PHP和jQuery混合开发的，提出重构需求。但是后端技术栈由PHP更替为Java微服务,前端技术栈也…

我之前写过 一篇博客，介绍了 Class 组件的各个生命周期钩子函数在 Hooks 中对应的方案。那时 Hooks 刚刚发布，开发者最关心的莫过于代码的迁移问题，也就是怎么把现有的 Class 组件改造成 Hooks 的方式。 尽管这种方式非常的直观有效，但很快我们就发现，事情…