logo头像

叩首问路,码梦为生

好文章推荐系列——前端框架

关于ref的一切

作为React开发者,你能回答如下几个问题么?

  1. 为什么string类型的ref prop将会被废弃?
  2. function类型的ref prop会在什么时机被调用?
  3. React.createRef与useRef的返回值有什么不同?

其实,这三个问题中的ref包含两个不同概念:

  1. 不管是string、function类型或是React.createRef、useRef创建的ref,都是作为数据结构看待

  2. 问题2探讨的时机是将ref作为生命周期看待

该文会分别从数据结构、生命周期两个角度探讨ref。这,就是关于ref的一切。作者还写了关于 React 的其他文章共十篇:#关于React的一切

为什么Vue3.0不再使用defineProperty实现数据监听?

Vue 3.0 中,响应式数据部分弃用了 Object.defineProperty,使用Proxy来代替它。本文将主要通过以下方面来分析为什么 Vue 选择弃用 Object.defineProperty。

  1. Object.defineProperty 真的无法监测数组下标的变化吗?
  2. 分析 Vue2.x 中对数组 Observe 部分源码。
  3. 对比Object.defineProperty和 Proxy。

从 IIFE 聊到 Babel 带你深入了解前端模块化发展体系

作者从十年前的 IIFE 开始介绍,一步步分析与介绍了前端模块化的演进与发展,文章很长,信息量很大。

这几个概念你可能还是没搞清require、import和export

作者从一开始的 Function 到后来的对象写法再到后来的闭包写法,介绍了模块写法的演进历程,同时还介绍了CommonJS规范、AMD规范、CMD规范和AMD与CMD的区别

useEffect 完整指南

该文篇幅较长,深入讲解了 React Hook 中的 useEffect,看完后可以帮你明白下面几个问题的答案:

  1. 🤔 如何用useEffect模拟componentDidMount生命周期?
  2. 🤔 如何正确地在useEffect里请求数据?[]又是什么?
  3. 🤔 我应该把函数当做effect的依赖吗?
  4. 🤔 为什么有时候会出现无限重复请求的问题?
  5. 🤔 为什么有时候在effect里拿到的是旧的state或prop?

前端构建秘籍

你对 webpack 了解多少?如何针对业务集成最佳配置?如何优化开发体验?如何开足马力,实现极速的 webpack 的构建性能 🚀?又会有哪些坑 💣?该文带你解答这些问题

import、require、export、module.exports 混合使用详解

该文通过以下几个问题进行展开,详细介绍了模块化相关规范以及 webpack 和 babel 在这其中起到的作用:

  1. 为何有的地方使用 require 去引用一个模块时需要加上 default? require(‘xx’).default
  2. 经常在各大UI组件引用的文档上会看到说明 import { button } from ‘xx-ui’ 这样会引入所有组件内容,需要添加额外的 babel 配置,比如 babel-plugin-component?
  3. 为什么可以使用 es6 的 import 去引用 commonjs 规范定义的模块,或者反过来也可以又是为什么?
  4. 我们在浏览一些 npm 下载下来的 UI 组件模块时(比如说 element-ui 的 lib 文件下),看到的都是 webpack 编译好的 js 文件,可以使用 import 或 require 再去引用。但是我们平时编译好的 js 是无法再被其他模块 import 的,这是为什么?
  5. babel 在模块化的场景中充当了什么角色?以及 webpack ?哪个启到了关键作用?
  6. 听说 es6 还有 tree-shaking 功能,怎么才能使用这个功能?

基于 webpack 的持久化缓存方案

如何基于 webpack 做持久化缓存似乎一直处于没有最佳实践的状态。作为开发者最大的诉求是:在 entry 内部内容未发生变更的情况下构建之后也能稳定不变。而 pigcan 的这篇文章通过具体的场景层层深入,带你逐步揭晓 webpack 持久化缓存的实现方案

让虚拟DOM和DOM-diff不再成为你的绊脚石

作者通过实际代码一步步地对虚拟 DOM 实现和 Diff 算法进行了讲解和实现,讲解的很清楚,逻辑很清晰

为什么顺序调用对 React Hooks 很重要?

同事推荐,对 React Hooks 讲解的很清楚,而且非常贴心的把评论神马的都翻译成了中文

react 组件的生命周期

作者详细介绍了和 react 生命周期的一些函数执行时机以及它们的作用,通过实例的方式进行了讲解,个人感觉讲解的非常清晰

Gulp 和 Webpack 对比

作者通过实际的代码对比了 gulp 和 webpack 在功能、原理以及模块化方面的优缺点

webpack 常用插件及其作用

介绍了 webpack 经常用到的一些插件和它们的作用,美中不足的是没有具体代码以及介绍的插件有点少

webpack 源码阅读——npm 脚本运行 webpack 与命令行输入 webpack 的区别

虽然是一个小知识点,不过作者读源码的精神可嘉

webpack - 收藏集 - 掘金

掘金上面的 webpack 相关文章,webpack 本身实在太复杂,还是需要一些文章差补缺漏的

Vue.js——60分钟快速入门

vue 入门教程,还有另外两篇文章,文章最后有链接,个人认为是目前为止看到的最舒服的 vue 入门教程,排版配色都很不错

深入到源码:解读 redux 的设计思路与用法

一直都没搞明白 redux,后来看了这篇文章,讲的很详细,而且讲解了一部分源码,推荐!(下面一段话取自该文章) 组织 redux 的流程莫过于:

  • 设计全局 state 的数据结构
  • 设计更改 state 数据的 actionTypes 常量以及其他跟视图展现相关的 actionTypes 常量
  • 根据 actionTypes 常量,书写 actionCreator 。
  • 根据各个 actionCreator 的返回值,涉及 reducer 做数据的最后处理
  • 在有了 reducer 函数之后,createStore(reducer, initState) 得到 store 对象
  • 用 bindActionCreators 函数将 actionCreators 和 store.dispatch 绑定起来,得到一组能修改全局状态的函数
  • 分发各个状态修改函数到各个 DOM 事件中。

Vue 生命周期深入

这篇博客会从下面四个常见的应用诠释了组件的生命周期,以及各个生命周期应该干什么事,博主写的很不错,直观易懂,很适合接触 vue 不深的童鞋。

  1. 单组件的生命周期
  2. 父子组件的生命周期
  3. 兄弟组件的生命周期
  4. 宏 mixin 的生命周期

2019 年 Vue 学习路线图

作者我将在这篇文章中展示了一个高级“知识地图”,它包含了与 Vue 开发相关的关键领域,你可以使用这张地图作为 2019 年学习 Vue 的图鉴。英文原文:https://vuejsdevelopers.com/2018/12/04/vue-js-2019-knowledge-map/

一口(很长的)气了解 babel

作者详细介绍了 babel 究竟是做什么的,以及 babel 的一些配套工具的作用,同时还介绍了如何争取地进行配置和使用 babel。

Which of the 635000 npm modules do I choose?

npm 现在已经有 60 多万个库,如何在如此繁杂的 module 中选择合适自己的感觉是件难事,而作者就基于此对一些比较大型使用比较多的库进行了横向比较,会对你在技术上的选择起到帮助作用。

2019 年 React 学习路线图

和上面的 Vue 学习路线图类似,建议搭配食用,英文原文:https://hackernoon.com/the-2018-react-js-roadmap-4d0a43814c02

细说 webpack 之流程篇

淘宝 FED 这篇博客,对 webpack 的整体流程梳理的非常清晰,以及 webpack 的基础架构讲解的很细致,对 compiler 和 complation 对象也做了很细致的剖析。

React 是怎样炼成的

文章主要讲述 React 的诞生过程和优化思路。内容整理自 2014 年的 OSCON - React Architecture by vjeux,虽然从今天来看可能会有点历史感,但仍然值得学习了解。以史为鉴,从中也可以管窥 Facebook 优秀的工程管理文化。

支付宝打赏 微信打赏

听说赞过就能年薪百万