React 生命周期的打怪升级之路

号外号外!走过路过千万不要错过!

截止目前为止 React 已经发布了 v16.12.0 版本, React 生命周期也是日常开发低头不见,抬头见的狗子,可惜狗子它变了。

改变原因

v16.3 版本之前, React 中的更新操作是同步的,这可能会导致性能问题。

举个例子,假如有一个庞大的模块里面嵌套超级多的组件,一旦最顶部的 render 方法执行了,然后依次执行组件的 render 方法,直到最底层组件。这个过程会导致主线程卡主。

官方为了解决这个问题,因此引入了 React Fiber,其解决思路是分片执行,一个更新过程被分为两个阶段(Phase):第一个阶段 Reconciliation Phase 和第二阶段 Commit Phase。

阅读更多

React Hooks学习笔记

看了一篇文章,也说清了 React 发展历程,我一直都坚信任何技术方案的出现都是为了以更好的方式解决问题。

React 组件发展历程

React 组件基本可以归结三个阶段:

  • createClass Components
  • Class Components
  • Function Components

createClass Components

示例:

阅读更多

高阶组件

首次使用场景

项目初期只有一个添加商品模块,因业务迭代,从多图商品中分离出视频商品,当前存在的问题:

  1. 版本迭代势必同时修改两个模块;
  2. 大量逻辑,方法重复。

方案筛选

鉴于以上问题,寻找的解决方案有:

  1. 公共逻辑代码抽离;
  2. 公共容器组件抽离;
  3. Mixin;
  4. 高阶组件。
阅读更多

新起点-2020

image

2019过去了,也需要总结过去这一年的点点滴滴。

2019年的头等大事,当然是和我老婆结婚了,依稀记得,结婚现场我老婆没哭,而我却从头哭到尾……

在项目开发中收获颇多:

  • 推荐使用RN作为公司核心业务开发方案;
  • 搭建基于gitlab的CI/CD持续集成H5(测试、生产)Docker环境;
  • 搭建基于Jenkins的App端测试包输出环境;
  • 自建node服务,为公司内部提供,应用Icon批量生产服务、收款码批量生产服务、验证码查询服务;
  • 前端管理的第一年;

不足

阅读更多

前端进阶系列—JS执行机制


一直以来,对JS的执行机制都是模棱两可,知道今天看了文章—《这一次,彻底弄懂JavaScript执行机制》《Event Loop的规范和实现》,才对JS的执行机制有了深入的理解,下面是我的学习总结。

2个要点

  • JS是单线程语言
  • Event Loop是JS的执行机制,为了实现主线程的不阻塞,Event Loop就这么诞生了。

2个概念(结合Browser环境和Node环境)

  • task queue(宏任务队列):setTimeoutsetIntervalsetImmediateI/OUI交互事件
  • microtask queue(微任务队列):Promiseprocess.nextTickMutaionObserver

看下图:

阅读更多

前端进阶系列—什么是执行上下文?什么是调用栈?

1
2
原文作者:Valentino
原文链接:https://www.valentinog.com/blog/js-execution-context-call-stack

什么是Javascript中的执行上下文?

我打赌你不知道答案。

编程语言中最基础的组成部分是什么?

变量和函数对吗?每个人都可以学习这些板块。

但除了基础知识之外还有什么?

阅读更多

前端进阶系列—盒模型

盒模型是界面布局需要掌握的基本功。

盒模型基本概念

盒模型四要素:marginborderpaddingcontent

盒模型分为:标准盒模型(W3C盒模型) 、 怪异盒模型(IE盒模型)

盒模型区别

怪异盒模型总宽度 = content + padding

阅读更多

前端进阶系列—flex布局

以下内容主要摘抄自阮一峰老师的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

背景

Flexbox布局(Flexible Box)模块(目前是W3C Last Call Working Draft)旨在提供更有效的布局方式,即使容器中的项目之间对齐和分配空间的大小未知或动态(因此单词“flex”)。

flex布局背后的主要思想是让容器能够改变其项目的宽度/高度(和顺序),以最好地填充可用空间(主要是为了适应所有类型的显示设备和屏幕尺寸)。Flex容器扩展项目以填充可用空间,或缩小它们以防止溢出。

最重要的是,flexbox布局与方向无关,而不是常规布局(基于垂直的块和基于水平的内联块)。虽然那些适用于页面,但它们缺乏灵活性来支持大型或复杂的应用程序(特别是在方向更改,调整大小,拉伸,缩小等方面)。

注意: Flexbox布局最适合应用程序的组件和小规模布局,而Grid布局则适用于更大规模的布局。

阅读更多

前端进阶系列—css3新特性

什么是CSS?

层叠样式表(CSS)是一种向Web文档添加样式(例如,字体,颜色,间距)的简单机制。

什么是CSS3?

CSS3是CSS语言的最新发展,旨在扩展CSS2.1。它带来了许多新功能和附加功能,如圆角,阴影,渐变,过渡或动画,以及多列,灵活的框或网格布局等新布局。

现在让我们看看有哪些新东西?

CSS3选择器

阅读更多

前端工程化之路

时至今日,前端也在飞速发展,各种框架以及因框架产生的生态圈也拔地而起,满天都是概念,如数据绑定、虚拟DOM、前端构建系统、前端工程化、大前端等等。很多前端同学被困在前端框架里,学的是心力交瘁,但有些同学早已学会了透过现象看本质的本事,不管是什么样的框架都能运用自如。
下面就带大家先看看前端的发展历史。

前端发展史

  • 1990年,Tim Berners Lee 发明了世界上第一个网页浏览器。

浏览器是被发明出来了,但问题来了,当时的网页都是静态的,如表单验证就需要后端完成,在那个年代带宽很差,发一次请求带代价是极其昂贵的,因此为了解决这一问题,急需要开发一种在浏览器执行的脚本语言,因此发生了下面的事情。

  • 1995年,Brendan Eich 只用了不到半个月时间完成了第一版网页脚本语言的设计。

  • 1996年,样式表标准CSS第一版发布。

至此 htmljavascriptcss 催生了前端的雏形。

阅读更多