什么是链式调用？

链式调用（operate of responsibility）是一种很常见的代码设计。

像Jquery：

$('div').on('click', callback)
           .on('mousedown', callback);

d3.js:

d3.select(DOM.svg(width, height * years.length))
      .style("font", "10px sans-serif")
      .style("width", "100%")
      .style("height", "auto");

链式调用的优势

1. 美观：提高代码优雅度 操作语法化 增加可阅读性
2. 简洁：通过链式调用显得代码更加简洁
3. 提效：简化对同一对象多个方法多次调用的方式
4. 回调地狱的解决方案, 例子

实现链式调用

这里我们借鉴jQuery、d3.js和《JavaScript设计模式》第 27 章 - 永无尽头——链模式的思路，

- jQuery 基本实现方式

该例子已对构造器进行强化

var A = function (selector){
  return new A.fn.init(selector)
};
A.fn = A.prototype = {
  // 强化构造器
  constructor: A,
  init: function(selector) {
    const list = document.querySelectorAll(selector);
    list.forEach((item, index) => {
      this[index] = item;
    })
    this.length = list.length;
    return this;
  },
  length: 0,
  size: function() {
    return this.length
  }
}
// 强化构造器
A.fn.init.prototype = A.fn

具体使用：

A('div').size();
/* 
  > Number
*/

- d3.js的实现方式

这是改编于d3js的代码

function func1 () {
  console.log('func1');
  return this;
}

function getArg () {
  return this.arg;
}

// -- 底层 -- //
function A(arg) {
  this.arg = arg;
}

// -- 用于 instenceOf 判断 -- //
function _A(){
  return new A();
}

// -- 强化构造器 -- //
A.prototype = _A.prototype = {
  constructor: A,
  func1: func1,
  getArg: getArg
}

// -- 二层封装 -- //
function B(arg) {
  return new A(arg)
}

具体使用：

B('arg').func1().getArg();
/* 
  > 'func1'
  > 'arg'
*/

一、为什么要了解React Fiber

起因是我们项目的UI库进行了x位版本的升级，也就是0.x => 1.x的一次升级，这个UI库的1.x版本依赖使用react 16，而0.x版本和我们的项目是依赖使用的react 15，在查阅了官方和别人的升级过程后，发现

• componentWillMount
• componentWillUpdate
• componentWillRecieveProps

三个生命周期被官方标记为不安全，在react 16中可以增加UNSAFE_前缀来使用

• UNSAFE_componentWillMount
• UNSAFE_componentWillUpdate
• UNSAFE_componentWillRecieveProps

并增加了两个新的生命周期

• static getDerivedStateFromProps
• getSnapshotBeforeUpdate

在react 17进行正式取代。

本着求知的精神继续查阅发现react官方将推行异步渲染这一功能。
而被标记为不安全的生命周期在异步渲染的过程中会被重复触发，故被标记为不安全并被取代。