React16新特性實踐

React16新特性實踐

1. lazy & Suspense

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

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

Suspense 做用是在等待組件時 suspend(暫停)渲染,並顯示加載標識。promise

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

舉個栗子this

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...的divcode

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

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

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

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

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

代碼簡潔,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>
    </>
  );
}
相關文章
相關標籤/搜索