swr是一个hook组件，可以作为请求库和状态管理库，本文主要介绍一下在项目中如何实战使用swr，并且会解析一下swr的原理。从原理出发读一读swr的源码 首先从缓存中取数据，然后去真实请求相应的数据，最后将缓存值和最新值做对比，如果缓存值与最新值相同，则不用更新，否则用最新值…

图表库千万个今天 HelloGitHub 给大家推荐个很有“特色”的图表库：一个手绘风格的 JS 图表库 —— Chart.xkcd，快收起你紧绷、严肃的面容让我们一起看看用手绘风格展示数据的效果。 Chart.xkcd 是一个图表库，可绘制“非精细”、“卡通”或“手绘”样式的…

React v16.7.0-alpha 中第一次引入了 Hooks 的概念，在 v16.8.0 版本被正式发布。React Hooks 在 React 中只是对 React Hook 的概念性的描述，在开发中我们用到的实际功能都应该叫做 React hook。 React Ho…

本文主要展示在当下 React 应用开发中，怎么使用 Context 和 Hooks 来管理用户的认证(也就是登录态)。 嗯，最终的代码大概就长这样。大多数 需要进行用户认证管理的应用，都可以使用类似上面的逻辑来管理用户登录状态。当用户访问我们应用中的某个需要登录后才能访问的页…

一个月前，React 官方正式发布了 v16.3 版本。在这次的更新中，除了前段时间被热烈讨论的新 Context API 之外，新引入的两个生命周期函数 getDerivedStateFromProps，getSnapshotBeforeUpdate 以及在未来 v17.0 …

是指将单页应用（SPA）在服务器端渲染成 HTML 片段，发送到浏览器，然后交由浏览器为其绑定状态与事件，成为完全可交互页面的过程。（PS：本文中的 SSR 内容都是围绕同构应用来讲的） 更快的首屏加载速度：无需等待 JavaScript 完成下载且执行才显示内容，更快速地看到…

这是一个国外大佬在其公司峰会的代码竞赛中写的一个库：react-dynamic-charts，用于根据动态数据创建动态图表可视化。 它的设计非常灵活，允许你控制内部的每个元素和事件。使用方法也非常简单，其源码也是非常精炼，值得学习。 但因其提供了不少API,不利于理解源码。所以…

redux主要目的就是为了解决多处对同一状态修改带来的问题，而反映到react上就是多个层级不同的组件对同一个状态的操作。首先，需要让子组件有方法去访问到统一个状态，在react中刚好context就是做着个事情的，但是如果要进行状态变更的话就需要修改到context里面的状态…

刮刮卡是大家非常熟悉的一种网页交互元素了。实现刮涂层的效果，需要借助canvas来实现，想必每个前端工程师都清楚。实现刮刮卡并不难，但其中却涉及很多知识点，掌握这些知识点，有助于我们更深刻理解原理，对于提升举一反三的能力很有帮助。本期以实现刮刮卡为例，分享下如何科学合理地封装函…