constructor(props) {
    super(props);
    this.key = null;
} 
componentWillReceiveProps(nextProps) {
    if (nextProps.status !== this.props.status) {
      this.doSomething(nextProps.status);
    }
  }
eventListener(key) { // 某个事件触发
    this.key =key;
    this.props.updateStatus(2); // 调用redux方法，修改props内容
  };

UNSAFE_componentWillReceiveProps()
UNSAFE_componentWillReceiveProps(nextProps)
Note

This lifecycle was previously named componentWillReceiveProps. That name will continue to work until version 17. Use the rename-unsafe-lifecycles codemod to automatically update your components.

Note:

Using this lifecycle method often leads to bugs and inconsistencies

If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead.
If you used componentWillReceiveProps for re-computing some data only when a prop changes, use a memoization helper instead.
If you used componentWillReceiveProps to “reset” some state when a prop changes, consider either making a component fully controlled or fully uncontrolled with a key instead.
For other use cases, follow the recommendations in this blog post about derived state.

UNSAFE_componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

Note that if a parent component causes your component to re-render, this method will be called even if props have not changed. Make sure to compare the current and next values if you only want to handle changes.

React doesn’t call UNSAFE_componentWillReceiveProps() with initial props during mounting. It only calls this method if some of component’s props may update. Calling this.setState() generally doesn’t trigger UNSAFE_componentWillReceiveProps().
Google翻译一下。。
注意：

使用此生命周期方法通常会导致错误和不一致

如果您需要执行副作用（例如，数据提取或动画）以响应props中的更改，请改用componentDidUpdate生命周期。
如果您仅在prop更改时使用componentWillReceiveProps重新计算某些数据，请使用memoization helper。
如果您在prop更改时使用componentWillReceiveProps“重置”某些状态，请考虑使用组件完全控制组件或完全不受控制。
对于其他用例，请遵循此博客文章中有关派生状态的建议。

在安装的组件接收新的props之前调用UNSAFE_componentWillReceiveProps（）。如果您需要更新状态以响应prop更改（例如，重置它），您可以比较this.props和nextProps并使用此方法中的this.setState（）执行状态转换。

请注意，如果父组件导致组件重新渲染，即使props没有更改，也会调用此方法。如果您只想处理更改，请务必比较当前值和下一个值。

在安装过程中，React不会使用初始道具调用UNSAFE_componentWillReceiveProps（）。如果某些组件的道具可能会更新，它只会调用此方法。调用this.setState（）通常不会触发UNSAFE_componentWillReceiveProps（）。

function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>,
  children: ReactNodeList,
  container: Container,
  forceHydrate: boolean,
  callback: ?Function,
) {
  let root: RootType = (container._reactRootContainer: any);
  let fiberRoot;
  // 这里根据root判断是否初次挂载（initial mount）
  if (!root) {
    // 根据container创建一个firberRoot，并挂到container上，名称为_reactRootContainer
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
      container,
      forceHydrate,
    );
    fiberRoot = root._internalRoot;
   
    unbatchedUpdates(() => {
      // 执行到这里
      updateContainer(children, fiberRoot, parentComponent, callback);
    });
  }
  return getPublicRootInstance(fiberRoot);
}

export function createFiberRoot(
  containerInfo: any,
  tag: RootTag,
  hydrate: boolean,
  hydrationCallbacks: null | SuspenseHydrationCallbacks,
): FiberRoot {
  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);

  const uninitializedFiber = createHostRootFiber(tag);
  root.current = uninitializedFiber;
  uninitializedFiber.stateNode = root;

  initializeUpdateQueue(uninitializedFiber);
  return root;
}

export function updateContainer(
  element: ReactNodeList,
  container: OpaqueRoot,
  parentComponent: ?React$Component<any, any>,
  callback: ?Function,
): ExpirationTime {
  const current = container.current;
  const currentTime = requestCurrentTimeForUpdate();
  const suspenseConfig = requestCurrentSuspenseConfig();
  const expirationTime = computeExpirationForFiber(
    currentTime,
    current,
    suspenseConfig,
  );
  // 取createFiberRoot方法时添加的current，并执行scheduleWork方法
  scheduleWork(current, expirationTime);
  return expirationTime;
}

let a = [5,6];
a.pop(); // 6
a // [5];

let a = [5,6];
a.push(7); // 7
a // [5, 6, 7];

let a = [5,6];
a.reverse(); // [6,5]
a // [6,5];

let a = [5,6];
a.shift(); // 5
a // [6];

let a = [5,6];
a.unshift(4); // 3 数组的长度
a // [4,5,6];

let a = [5,6];
a.slice(0); // [5,6]
a.slice(0, 1); // [5]
a // [5,6];

let a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
a.sort(); // [1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
a //  [1, 10, 2, 3, 4, 5, 6, 7, 8, 9]
a.sort((a,b) => a-b);  // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
a // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

let a = [5,6];
a.splice(0, 1); // [5] 返回的是被删除的**数组**
a // [6]
a.splice(0, 0, 4, 5); // []
a // [4,5,6]

let a = [5,6];
a.forEach((value, index, array) => {
  value // 5,6
  index // 0,1
  array // [5, 6]
}) // 返回undefined 

let a = [5,6];
a.map((value, index, array) => {
  return value + 1;
}) // 返回[6,7] 

let a = [5,6];
a.filter((value, index, array) =>  value > 5;) // 返回[6] 
a // [5,6];

let a = [5,6];
a.some((value, index, array) =>  value > 5;) // 返回true
a // [5,6];

let a = [5,6];
a.some((value, index, array) =>  value > 5;) // 返回false
a // [5,6];

let a = [5,6];
a.indexOf(5) // 返回0，未查到返回-1
a // [5,6];

let a = [5,6];
a.lastIndexOf(5) // 返回0，未查到返回-1
a // [5,6];

let a = [0, 1, 2, 3, 4];
a.reduce((accumulator, currentValue, currentIndex, array) => { return accumulator + currentValue; }, 0 ); // 返回10，0 + 0 = 0; 0 + 1 = 1; 1 + 2 = 3; 3 + 3 = 6; 6 + 4 = 10; 
a.reduce((accumulator, currentValue, currentIndex, array) => { return accumulator + currentValue; }, 10 ); // 返回20，10 + 0 = 10; 10 + 1 = 11; 11 + 2 = 13; 13 + 3 = 16; 16 + 4 = 20; 
a //  [0, 1, 2, 3, 4]

let a = [0, 1, 2, 3, 4];
[0, 1, 2, 3, 4].reduceRight(function(previousValue, currentValue, index, array) {
    return previousValue + currentValue;
}, 10); // 返回20，10 + 4 = 14; 14 + 3 = 17; 17 + 2 = 19; 19 + 1 = 20; 20 + 0 = 20; 
a //  [0, 1, 2, 3, 4]

...[1,2] // 1 2 主要用于函数调用
Math.max.apply(null, [14, 3, 7]) => Max.max(...[14, 3, 7]);
运用
1. 复制数组
es5: 
var a1 = [1,2];
var a2 = a1.concat();
es6:
const a1 = [1,2];
const a2 = [...a1]; // 或者 const [...a2] = a1;
2. 合并数组
[...a1, ...a2, ...a3]

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

let a = [5,6,7,8,9];
a.copyWithin(0, 2); // [7, 8, 9, 8, 9]
a //  [7,8,9,8,9];

let a = [5,6,7,8,9];
a.find((value, index, arr) => {
  return value > 7;
}); // 8
a.findIndex((value, index, arr) => {
  return value > 7;
}); // 3
可以接受第二个参数，用于绑定回调函数的this对象
function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

[1,[2,3],4].flat(1) // [1,2,3,4] 参数为层数

function getName() {
  console.log(this.name)
}
getName(); // undefined
getName.call({name: 'qp'}); // qp
getName.apply({name: 'qp'}); // qp

function getName(...param) {
  console.log(param)
}
getName(); // undefined
getName.call({}, 'qp', 'qp'); // ['qp', 'qp']
getName.apply({}, ['qp', 'qp']); // ['qp', 'qp']

let a = false;  
function onClick = () => {  
  if (a) return;  
  // do something  
  a = true;  
  setTimeout(() =>{  
      a = false;  
  }, 500);  
}  

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

var a = [];
var b = {};
a.length; // 0
b.length; // undefined

var a = [];
var b = {};
a instanceof Array; // true
b instanceof Array; // false

JavaScript中的 Object 是构造函数（创建对象的包装器）。
一般用法是：
var obj = new Object();

所以：
Object.getPrototypeOf( Object );               // ƒ () { [native code] }
Object.getPrototypeOf( Function );             // ƒ () { [native code] }

Object.getPrototypeOf( Object ) === Function.prototype;        // true

Object.getPrototypeOf( Object )是把Object这一构造函数看作对象，
返回的当然是函数对象的原型，也就是 Function.prototype。

正确的方法是，Object.prototype是构造出来的对象的原型。
var obj = new Object();
Object.prototype === Object.getPrototypeOf( obj );              // true

Object.prototype === Object.getPrototypeOf( {} );               // true

var a = [];
var b = {};
b.toString(); // "[object Object]"
Object.prototype.toString.call(a); // "[object Array]"
Object.prototype.toString.call(b); // "[object Object]"

var a = [];
var b = {};
Array.isArray(a); // true
Array.isArray(b); // false