如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks 1. 类组件的不足 综上所述，如果不注意的话，很容易写成第三种写法，导致性能上有所损耗。 2. Hooks 优势 副作用的关注点…

虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。 类组件可以使用其他特性，如状态 state 和生命周期钩子。 当组件只是接收 pro…

在写本文之前，事先阅读了网上了一些文章，关于 Hooks 的源码解析要么过于浅显、要么就不细致，所以本文着重讲解源码，由浅入深，争取一行代码也不放过。那本系列讲解第一个 Hooks 便是 useState，我们将从 useState 的用法开始，再阐述规则、讲解原理，再简单实现…

下面，我们一一介绍五种方案的实现。 1. Mixins Mixins 混合，其将一个对象的属性拷贝到另一个对象上面去，其实就是对象的融合，它的出现主要就是为了解决代码复用问题。 由于现在 React 已经不再支持 Mixin 了，所以本文不再赘述其如何使用。至于以前在 Reac…

1 Class Component VS. Functional Component 根据 React 官网，React 中的组件可分为函数式组件（Functional Component）与类组件（Class Component）。 而函数式组件在以往我们也称其为无状态组件（…

1. useEffect 简介 对于第二点，首先，针对 Class Component 来说，我们写 React 应用时经常要在组件的各种生命周期中编写代码，如在 componentDidMount 和 componentDidUpdate 中发送 HTTP 请求、事件绑定、甚…

防抖（debounce）和节流（throttle）是前端经常用到的工具函数。 在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（…