React16新特性實踐

React16新特性實踐

1. lazy & Suspense

React 16.6將代碼分割(code-splitting)帶到了一個新的level。您如今能夠在真正須要時加載組件，且無需安裝其餘依賴庫。

React.lazy() 提供了動態 import 組件的能力，實現代碼分割。

Suspense 做用是在等待組件時 suspend（暫停）渲染，並顯示加載標識。

目前 React v16.6 中 Suspense 只支持一個場景，即便用 React.lazy() 和 <React.Suspense> 實現的動態加載組件。

舉個栗子

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

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

這是一個最簡單的使用例子,當我初始化<App>組件時,在Lazy組件渲染以前,Suspense組件會填充一個loading...的div

當咱們的實際的業務場景中可能須要等待某個接口加載完畢後,按需渲染

const Lazy = lazy(() => new Promise(resolve => {
  // 假裝成接口的定時器
  setTimeout(() => {
    resolve(import('./LazyComponent'));
  }, 3000);
}));

這時,咱們的Lazy組件將會在3000ms後渲染出來

在咱們的業務場景中，App能夠表明多個條件渲染組件，咱們所有加載完成才取消loding。

只要promise沒執行到resolve，suspense都會返回fallback中的loading。

代碼簡潔，loading可提高至祖先組件，易聚合。至關優雅的解決了條件渲染。

2. Memo

React.memo() 只能做用在簡單的函數組件上，本質是一個高階函數，能夠自動幫助組件執行shouldComponentUpdate()，但只是執行淺比較，其意義和價值有限。

const MemoizedComponent = React.memo(props => {
  /* 只在 props 更改的時候纔會從新渲染 */
});

3. Hooks

Hooks 要解決的是狀態邏輯複用問題，且不會產生 JSX 嵌套地獄，其特性以下：

• 多個狀態不會產生嵌套，依然是平鋪寫法；
• Hooks 能夠引用其餘 Hooks；
• 更容易將組件的 UI 與狀態分離；

Hooks 並非經過 Proxy 或者 getters 實現，而是經過數組實現，每次 useState 都會改變下標，若是 useState 被包裹在 condition 中，那每次執行的下標就可能對不上，致使 useState 導出的 setter 更新錯數據。

function App() {
  const [open, setOpen] = useState(false);
  
  return (
    <>
      <Button type="primary" onClick={() => setOpen(true)}>
        Open Modal
      </Button>
      <Modal
        visible={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
      />
    </>
  );
}

// [TODO]hooks的使用場景不少,待補充

4. createRef

React16 規範了 Ref 的獲取方式，經過 React.createRef 取得 Ref 對象。

目前在個人開發中常常用到,例如能夠在單向數據流中,能夠在父組件中獲取子組件的props,state等等

constructor(props) {
    super(props)
    
    this.myRef = React.createRef()
  }

  render() {
    return <div ref={this.myRef} />
  }

5. Fragment

Fragment在當前開發中也很常見,例如在render函數中返回多個子組件時,我能夠用Fragment將他們包裹起來

render() {
  return (
    <React.Fragment>
      <h2>我開着鄰居家的Toyota,追着日落</h2>
      <h2>被父母說是最危險的地方 她都去過</h2>
    </React.Fragment>
  );
}

固然咱們能夠用更簡略的方式

render() {
  return (
    <>
      <h2>我開着鄰居家的Toyota,追着日落</h2>
      <h2>被父母說是最危險的地方 她都去過</h2>
    </>
  );
}