React 16.x 新特性, Suspense, Hooks, Fiber

toc

• React.lazy, Suspense
• React.memo
• 静态属性contextType
• 重头戏React Hooks
  • 为什么需要hooks？
  • useState
  • useEffect
  • 自定义Hook
  • 硬核的useEffect
    • 使用useEffect来替代生命周期函数
    • Capture Value props
    • 使用useRef获取旧的props或者最新的state
    • 告诉 React 如何对比 Effects
    • 使用useCallback来缓存你的函数
• Fiber

React.lazy, Suspense

React 16.6.0 引入了lazy和Suspense。React.lazy函数可以渲染一个动态的import作为一个组件。Suspense悬停组件，它会在内容还在加载的时候先渲染fallback。它们组合就能实现之前主要是使用loadable-components，来异步加载组件，Code-Splitting。

代码语言：javascript复制

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

可以查看React lazy Demo

需要注意的是：

• 暂时不支持SSR，loadable支持。
• React.lazy函数只支持动态default组件导入
• 它们组合出来代码分片使用Webpack, Babel时候，仍然需要配置Babel插件: "plugins": ["@babel/plugin-syntax-dynamic-import"]
• Suspense目前只支持Code-Splitting， 数据异步获取的支持需要到2019年中……

React.memo

React.memo基本就是React为函数组件提供的PrueComponent或者shouldComponentUpdate功能。下面的例子：

代码语言：javascript复制

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
});

静态属性contextType

React 16.3 正式引入了Context API， 来方便跨组件共享数据，基本使用方式，按照官方例子：

代码语言：javascript复制

const ThemeContext = React.createContext('light');

class ThemeProvider extends React.Component {
  state = {theme: 'light'};

  render() {
    return (
      <ThemeContext.Provider value={this.state.theme}>
        {this.props.children}
      </ThemeContext.Provider>
    );
  }
}

class ThemedButton extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {theme => <Button theme={theme} />}
      </ThemeContext.Consumer>
    );
  }
}

可以发现消费组件需要按照函数的方式来调用，很不方便，因此新的语法可以赋值给class组件的静态属性contextType，以此能够在各个生命周期函数中得到this.context:

代码语言：javascript复制

class MyClass extends React.Component {
  static contextType = MyContext;
  componentDidMount() {
    let value = this.context;
    /* perform a side-effect at mount using the value of MyContext */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* render something based on the value of MyContext */
  }
}

重头戏React Hooks

React 在版本16.8中发布了Hooks，可以在函数式组件中使用state和其他的React 功能。

React官方文档Introducing Hooks – React花了8个章节来讲述Hooks