浅谈React16.0+的几个新特性

浅谈React16.0+的几个新特性

这段时间看了下react一些新特性，大概列了几个：

1.componentDidCatch

React 16 将提供一个内置函数 componentDidCatch，如果 render() 函数抛出错误，该函数可以捕捉到错误信息，并且可以展示相应的错误信息，这个方法真的很赞！

那么componentDidCatch究竟可以做什么？有什么好处？

1. 当有错误发生时, 我们可以友好地展示 fallback 组件；
2. 可以捕捉到它的子元素（包括嵌套子元素）抛出的异常；
3. 可以复用错误组件；

请看以下代码

上面代码中声明了一个PotentialError组件和一个AwesomeApp组件，PotentialError就是我们说的错误提示组件，我在其子元素中（也就是AwesomeApp组件）抛出来一个错误，它内置的componentDidCatch()方法可以帮我们捕捉到错误信息，在控制台打印可看到：

这样的话就可以用一个错误信息页面来代替由于某个组件报错而页面异常了，样式有点丑，大家别介意哈！而且这个组件你可以封装成高阶组件，可以在任何地方使用它，是不是很方便呢~。

另一个小特性

componentDidCatch 它也是一个包含错误堆栈的 info 对象，这将告诉你组件在哪里失效！

{this.state.info && this.state.info.componentStack}

2.Fiber

react 核心算法的一次重新实现，将原本同步的更新过程碎片化，避免主线程长时间的阻塞。

利用分片的思想，将耗时任务分成很多小片，每个小片执行完之后，把控制权交给 react 负责协调的模块，如果有紧急任务就优先处理，没有就继续更新。

一个更新过程，两个阶段：

第一阶段：找出需要更新的 DOM，这个阶段是可以被打断的
第二阶段：完成 DOM 的更新展示，这个阶段是不可以被打断的

3.lazy / Suspense

React.lazy()：动态 import 组件，可以实现代码分离
Suspense： 在等待组件渲染的时候，显示加载loading标志
我自己总结的方法：

import React, { lazy, Suspense } from "react";

function LazyComponentLoad(handle) {
  const OtherComponent = lazy(handle);
  return function MyComponent() {
    return (
      <Suspense fallback={<Loading />}>
        <OtherComponent />
      </Suspense>
    );
  };
}
const Index= LazyComponentLoad(() =>
  import(/* webpackChunkName: "Home" */ "./components/Index")
);

4.createRef

react16.0可以使用createRef 在render 方法中创建的 DOM 节点或 React 元素，当构造组件时，refs 通常被赋值给实例的一个属性，这样你可以在组件中任意一处使用它们，例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

5.Hooks

这是react新特性最引人注目的一个，其本质是：可以不用class来创建一个类组件的情况下，又可以使用state、生命周期或者react的其他属性。函数式编程的趋势已经到来~
useState基本使用：

import React, { useState } from "react";

function Example() {
  // 声明一个新的叫做 “num” 的 state 变量
  const [num, setNum] = useState(0);

  return (
    <div>
      <p>You clicked {num} times</p>
      <button onClick={() => setNum(num+ 1)}>Click me</button>
    </div>
  );
}

useEffect

import React, { useState, useEffect } from "react";

function Example() {
  const [num, setNum] = useState(0);
  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    console.log(`在每次渲染之后调用：我变更了 ${num} 次`);
    return () => {
      console.log(
        "在组件销毁或者后续渲染重新执行副作用函数之前触发"
      );
    };
  });
  return (
    <div>
      <p>You clicked {num} times</p>
      <button onClick={() => setNum(num + 1)}>Click me</button>
    </div>
  );
}

总结

以上这几个特性是我目前在项目中用的比较常见的，想重点说说hooks，在hooks出现之后，对react前端开发来说，标志性的特点应该是解决了类似定时器队列占据内存的问题，简化了react生命周期和组件代码，追溯数据流向和状态修改更为清晰。
写的不好，还望朋友们提出意见咯。