微信授權(quán)掃碼點(diǎn)餐-新特性React16
2021-08-09 00:16:02

React v16.0

render 支持返回?cái)?shù)組和字符串

download：《微信授權(quán)掃碼點(diǎn)餐-新特性React16》

// 不需要再將元素作為子元素裝載到根元素下面
render() {
  return [
    <li/>1</li>,
    <li/>2</li>,
    <li/>3</li>,
  ];
}

Error Boundaries

React15 在渲染過程中遇到運(yùn)行時(shí)的錯(cuò)誤，會(huì)導(dǎo)致整個(gè) React 組件的崩潰，而且錯(cuò)誤信息不明確可讀性差。React16 支持了更優(yōu)雅的錯(cuò)誤處理策略，如果一個(gè)錯(cuò)誤是在組件的渲染或者生命周期方法中被拋出，整個(gè)組件結(jié)構(gòu)就會(huì)從根節(jié)點(diǎn)中卸載，而不影響其他組件的渲染，可以利用 error boundaries 進(jìn)行錯(cuò)誤的優(yōu)化處理。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  componentDidCatch(error, info) {
    this.setState({ hasError: true });

    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      return <h1>數(shù)據(jù)錯(cuò)誤</h1>;
    }
    
    return this.props.children;
  }
}

createPortal

createPortal 的出現(xiàn)為 彈窗、對(duì)話框 等脫離文檔流的組件開發(fā)提供了便利，替換了之前不穩(wěn)定的 API unstable_renderSubtreeIntoContainer，在代碼使用上可以做兼容，如：

const isReact16 = ReactDOM.createPortal !== undefined;

const getCreatePortal = () =>
  isReact16
    ? ReactDOM.createPortal
    : ReactDOM.unstable_renderSubtreeIntoContainer;

使用 createPortal 可以快速創(chuàng)建 Dialog 組件，且不需要牽扯到 componentDidMount、componentDidUpdate 等生命周期函數(shù)。

并且通過 createPortal 渲染的 DOM，事件可以從 portal 的入口端冒泡上來，如果入口端存在 onDialogClick 等事件，createPortal 中的 DOM 也能夠被調(diào)用到。

import React from 'react';
import { createPortal } from 'react-dom';

class Dialog extends React.Component {
  constructor() {
    super(props);

    this.node = document.createElement('div');
    document.body.appendChild(this.node);
  }

  render() {
    return createPortal(
      <div>
        {this.props.children}
      </div>,
      this.node
    );
  }
}

支持自定義 DOM 屬性

以前的 React 版本 DOM 不識(shí)別除了 HTML 和 SVG 支持的以外屬性，在 React16 版本中將會(huì)把全部的屬性傳遞給 DOM 元素。這個(gè)新特性可以讓我們擺脫可用的 React DOM 屬性白名單。筆者之前寫過一個(gè)方法，用于過濾非 DOM 屬性?filter-react-dom-props，16 之后即可不再需要這樣的方法。