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可提高至祖先組件,易聚合。至關優雅的解決了條件渲染。
React.memo() 只能做用在簡單的函數組件上,本質是一個高階函數,能夠自動幫助組件執行shouldComponentUpdate(),但只是執行淺比較,其意義和價值有限。
const MemoizedComponent = React.memo(props => { /* 只在 props 更改的時候纔會從新渲染 */ });
Hooks 要解決的是狀態邏輯複用問題,且不會產生 JSX 嵌套地獄,其特性以下:
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的使用場景不少,待補充
React16 規範了 Ref 的獲取方式,經過 React.createRef 取得 Ref 對象。
目前在個人開發中常常用到,例如能夠在單向數據流中,能夠在父組件中獲取子組件的props,state等等
constructor(props) { super(props) this.myRef = React.createRef() } render() { return <div ref={this.myRef} /> }
Fragment在當前開發中也很常見,例如在render函數中返回多個子組件時,我能夠用Fragment將他們包裹起來
render() { return ( <React.Fragment> <h2>我開着鄰居家的Toyota,追着日落</h2> <h2>被父母說是最危險的地方 她都去過</h2> </React.Fragment> ); }
固然咱們能夠用更簡略的方式
render() { return ( <> <h2>我開着鄰居家的Toyota,追着日落</h2> <h2>被父母說是最危險的地方 她都去過</h2> </> ); }