23 分钟带你学会现代化的组件样式书写方法：styled-components。 通过将 ES6 中的模板字符串（template literals）特性创造性的运用到 CSS 编码上，styled-components 成了前端社区现象级的 CSS-IN-JS 解决方案，能让…

一 前言 不知不觉 react-router 已经到了 v6 版本了，可能很多同学发现，v6相比之前的 v5 有着翻天覆地的变化，因为最近接触到了 React 的新项目，用到了 v6 版本的 reac

下面是我阅读过源码后，将所有的执行流程总结出来的流程图，不会贴代码，如果你想阅读代码看看具体是如何实现的，可以根据流程图去源码里寻找。 组件装载 / 更新。 通过lastProps、nextProps判断是否新增、删除事件分别调用事件注册、卸载方法。 获取document对象。…

​ 本教程目标是打造一门严谨(严格遵循react17核心思想)、通俗易懂(提供大量流程图解，结合demo、视频教程)的react源码解析课程，争取做到最容易理解，学起来效率最高的教程。在视频教程中，会带着大家一步一步断点调试。学完本课程后，你对react的理解会上升一个档次，如…

1. 函数式更新 除了常规的setState(value)的方式去更新状态以外，setState还可以接收一个函数来更新状态。这种更新状态的方式通常使用在新的 state 需要通过使用先前的 state 计算得出的场景。 但是依赖项设置后会导致每次改变发生时定时器都被重置，这并…

从概念上讲，Hooks 是 React 16.8 才全面支持的一个新特性，全面拥抱函数，能够使开发者在不使用 Class 的前提下使用状态和 React 其他的功能，从此函数式组件的地位直线飙升，不再仅仅是纯函数。 从写法上讲，Hooks 是一堆名为 useXXX 的函数，且这…

作为前端小白中的一员，没接触过 React 高阶组件，首次看到这个名字时不明觉厉 😱，甚至有种“从入门到放弃”的想法。 然 🦢，通过深入学习后发现它实际上是一个概念十分简单，但却非常常用的东西。它的作用是能实现代码复用和逻辑抽象、对 state 和 props 进行抽象和操…

项目中有两个页面有很多Echarts画的图，进去的时候特别卡，使用了滚动加载之后流畅很多，用户体验大幅提升。 另外滚动加载还有很多其他用途，比如：滚动翻页，无线翻滚，图片出现在视口才请求。。。 1. 传统方案 在滚动加载的组件中我们需要在state中添加一个字段表示正在加载中，…

高阶组件这个概念在 React 中一度非常流行，但是在 Vue 的社区里讨论的不多，本篇文章就真正的带你来玩一个进阶的骚操作。 先和大家说好，本篇文章的核心是学会这样的思想，也就是 智能组件 和 木偶组件 的解耦合，没听过这个概念没关系，下面会详细说明。 这可以有很多方式，比如…