两个 effect hook 是 React 提供给用户处理副作用逻辑的一个窗口，比如改变 DOM、添加订阅、设置定时器、记录日志以及执行其他各种渲染过程中不允许出现的操作。 这样会每次组件更新后都会执行，有点类似于 componentDidUpdate，但请不要用 class…

前几篇文章都在讲 React 的 Concurrent 模式, 很多读者都看懵了，这一篇来点轻松的，蹭了一下 Vue 3.0 的热度。讲讲如何在 React 下实现 Vue Composition API(下面简称VCA)，只是个玩具，别当真。 实现 'React' Compo…

之前的两篇文章，分别介绍了react-hooks如何使用，以及自定义hooks设计模式及其实战，本篇文章主要从react-hooks起源，原理，源码角度，开始剖析react-hooks运行机制和内部原理，相信这篇文章过后，对于面试的时候那些hooks问题，也就迎刃而解了。实际r…

从 React Hooks 正式发布到现在，我一直在项目使用它。但是，在使用 Hooks 的过程中，我也进入了一些误区，导致写出来的代码隐藏 bug 并且难以维护。这篇文章中，我会具体分析这些问题，并总结一些好的实践，以供大家参考。 如果使用单个 state 变量，每次更新 s…

useParams可以帮助我们。在各层组件中，轻松访问router的params参数。 在V5.1版本之前，我们需要通过props.match获取路由参数。对于更深层的组件还需要使用高阶组件withRouter。 在V5.1版本中，由于useParams的引入，我们可以轻松获取…

1. 引言 如果你在使用 React 16，可以尝试 Function Component 风格，享受更大的灵活性。但在尝试之前，最好先阅读本文，对 Function Component 的思维模式有一个初步认识，防止因思维模式不同步造成的困扰。 2. 精读 也就是，一个返回了…

在 React 16 中，除去 Fiber 架构外，Hooks 是最令人激动的一个特性，相比于 class component，Hooks 加持后的 function component 在写法与思路上都大有不同，很多时候显得更为简洁与清爽（熵更低，弱化生命周期的概念），同时解…

一个 React 项目，是由无数个大大小小的组件组合而成的。在 React 的世界中，组件是一等公民。而我们平时拆分组件的依据无非是：尽量的复用代码。 组件是 UI + 逻辑的复用，你不能将 UI 和逻辑拆开。比如 Antd 的 Cascader 级联选择 组件，内置了样式和级…

1. 前言 现在每天写的最多的就是组件了，必不可少地会碰到处理组件之间数据传递的问题。涉及到父子组件通信的话一般分为子组件获取父组件的数据以及方法和父组件获取子组件的数据以及方法。这篇文章就是总结react，vue父组件如何伸手获取子组件的数据以及调用子组件方法的。 2. re…