生命周期

react 生命周期

其中標紅的（ componentWillMount、 componentWillReceiveProps、 componentWillUpdate ）是 react 16.3 版本要移除的生命周期，移除原因：react 打算在17版本中，添加 async rendering ， react 將一個更新過程分為 render 前后兩個階段，render 前是可以被打斷（比如有緊急任務），當生命周期被打斷后，再次執行，并不會從斷點繼續執行，是重新執行的，所以這些生命周期就可能會運行多次。

同時為了彌補失去這三個生命，react 新增了兩個生命周期： static getDerivedStateFromProps、 getSnapshotBeforeUpdate

static getDerivedStateFromProps

getDerivedStateFromProps 會在調用 render 方法之前調用，并且在初始掛載及后續更新時都會被調用。它應返回一個對象來更新 state，如果返回 null 則不更新任何內容。

此方法適用于罕見的用例，即 state 的值在任何時候都取決于 props。

static getDerivedStateFromProps(nextProps, prevState) {
  //根據nextProps和prevState計算出預期的狀態改變，返回結果會被送給setState
  //這是一個static，簡單說應該是一個純函數
}

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate() 在最近一次渲染輸出（提交到 DOM 節點）之前調用。它使得組件能在發生更改之前從 DOM 中捕獲一些信息（例如，滾動位置）。此生命周期的任何返回值將作為參數傳遞給 componentDidUpdate()。

getSnapshotBeforeUpdate 返回的值會做為第三個參數傳遞給 componentDidUpdate。

getSnapshotBeforeUpdate(prevProps, prevState) {
  ...
  return snapshot;
}

componentDidUpdate(prevProps, prevState, snapshot) {
  
}

性能優化

shouldComponentUpdate

這是一個組件的子樹。每個節點中，SCU 代表 shouldComponentUpdate 返回的值，而 vDOMEq 代表返回的 React 元素是否相同。最后，圓圈的顏色代表了該組件是否需要更新。

shouldComponentUpdate

react 父組件觸發更新時，它的所有子組件都會觸發更新（即使 props 和 state ）并沒有改變，這樣時候我們在子組件中添加 shouldComponentUpdate 生命周期，判斷狀態是否變更，如果沒有變更返回 false , 這個子組件就不會重新 render。

React.PureComponent

React.PureComponent 是 React 自動幫我們在 shouldComponentUpdate 做了一層淺比較。

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps)
  || !shallowEqual(inst.state, nextState);
}

React.memo

React.memo 是一個高階組件，類似于 React.PureComponent，不同于 React.memo 是 function 組件，React.PureComponent 是 class 組件。

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

長列表優化

虛擬列表：用數組保存所有列表元素的位置，只渲染可視區內的列表元素，當可視區滾動時，根據滾動的 offset 大小以及所有列表元素的位置，計算在可視區應該渲染哪些元素。常用庫（ react-window 、 react-virtualized ）
事件代理：簡單的說就是將同類行的子元素事件，綁定在一個父元素上，從而達到減少事件的注冊。
懶加載：常用于長列表圖片加載，組件先不渲染，當監聽到組件可以時，在去渲染組件。常用庫（ react-lazyload ）

key

key 幫助 React 識別哪些元素改變了，比如被添加或刪除。當子元素擁有 key 時，React 使用 key 來匹配原有樹上的子元素以及最新樹上的子元素。正確的使用 key 可以使 react 的更新開銷變小。

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

代碼復用

Mixin

概念：將公用方法包裝成 Mixin 方法，然后注入各個組件，從而實現代碼復用。（已經不推薦）

缺點：

命名覆蓋：比如你在 A Mixin 中定義的 get 方法，在 B Mixin 中也定義了 get 方法。
復雜度高后，容易混亂：比如 Mixin 中可以調用 setState 的，當多個 Mixin 中都調用了 setSate , state 的更新來源會變得混淆不清。
ES6 class 語法不支持 Mixin。

HOC（高階組件）

概念：可以理解為組件工廠，傳入原始組件，添加功能，返回新的組件。

缺點：

命名覆蓋，難以溯源：當存在多個 HOC 時，僅僅通過新組件，并不能知道 props 是來源于哪個 HOC，同時如果兩個工廠，傳入了相同名稱的props，就會產生覆蓋。
靜態構建：工廠返回的新組件，不會立即執行，即 HOC 工廠函數里定義的生命周期函數只有新組建渲染時才會執行。

Render Props

概念：Render Props 就是一個 render 函數作為 props 傳遞給了父組件，使得父組件知道如何渲染子組件。

優點：

解決了命名沖突，難以溯源的問題，可以通過 render props 的參數直接看到 props 來源于哪個組件。
動態構建，可以更好的利用組件內的生命周期。

缺點：

無法利用 shouldComponentUpdate 來實現渲染性能的優化。

React hooks

概念：hooks 遵循函數式編程的理念，主旨是在函數組件中引入類組件中的狀態和生命周期，并且這些狀態和生命周期函數也可以被抽離，實現復用的同時，減少函數組件的復雜性和易用性。

hooks api：

基礎：useState、 useEffect、 useContext
額外：useReducer、 useCallback、 useMemo、 useRef、 useImperativeHandle、 useLayoutEffect、 useDebugValue

一個簡單的 custom hooks：

    
import { useEffect } from 'react';

function useTitle(title){
  useEffect(()=>{
    document.title = title;
  }, [title]);
}

虛擬 Dom diff 算法

虛擬 Dom：react 將 Dom 抽象成一個對象樹，通過對比新舊兩個樹的區別（diff 算法），然后將更新部分渲染出來。

diff 算法基于兩個策略：

兩個相同組件產生類似的 DOM 結構，不同的組件產生不同的 DOM 結構。
對于同一層次的一組子節點，它們可以通過唯一的 id 進行區分。

逐層進行節點比較

在 react 中，樹的比對非常簡單，react 只會對兩棵樹進行逐層比較，即比較處于同一層級的節點。

逐層比較

節點比較

節點比較分成兩種情況：（1）節點類型不同，（2）節點類型相同，屬性不同。

情況（1）：

節點不同

// DOM Diff 操作
C.destroy();
D = new D();
A.append(D);

情況（2）：

//變更錢
<div style={{fontSize: '16px'}} ></div>
//變更后
<div style={{color: 'red'}} ><div/>
//執行操作
=> removeStyle fontSize
=> addStyle color 'red'

列表節點的比較（key）

當列表中插入 F 節點，如下圖：

列表節點的比較

這個時候就會有兩種情況：（1）節點沒有表示唯一 key ，（2）節點表示了唯一 key

情況（1）結果如下圖：

列表節點的比較，沒有唯一 key

//執行過程
C unmount
D unmount
E unmount
F mount
C mount
D mount
E mount

情況（2）結果如下圖：

列表節點的比較，有唯一 key

//執行過程
F mount

React 16.x 部分新特性

Error Boundaries

如果在組件的渲染或生命周期方法中引發錯誤，整個組件結構就會從根節點中卸載，而不影響其他組件的渲染，可以利用 error boundaries 進行錯誤的優化處理。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

createPortal

react 支持將組建掛在到其他 dom 節點，事件還是按組件原有位置冒泡。

render() {
  return ReactDOM.createPortal(
    this.props.children,
    domNode,
  );
}

Fiber

Fiber 是對 react 核心算法 reconciliation 的更新實現，將原本的同步更新分成兩個階段。階段1（Reconciliation Phase）的任務是片段化執行的，每個片段執行完成之后，就會把控制權重新交給 react 調度模塊，如果有更高優先級的任務就去處理，而低優先級更新任務所做的工作則會完全作廢，然后等待機會重頭再來，如果沒有就執行下一個片段。階段2（Commit Phase）是同步執行的，reactDom 會根據階段1計算出來的 effect-list 來更新 DOM 。

階段1涉及的生命周期（可能會執行多次）：componentWillMount、 componentWillReceiveProps、 shouldComponentUpdate、 componentWillUpdate

階段2涉及的生命周期：componentDidMount、 componentDidUpdate、 componentWillUnmount

createContext

全新的 Context API 可以很容易實現祖先節點和子節點通信，并且沒有副作用。

React.createContext 是一個函數，它接收初始值并返回帶有 Provider 和 Consumer 組件的對象
Provider 發布方
Consumer 訂閱方

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>
    );
  }
}

生命周期函數的更新（見上文）

React.memo（見上文）

lazy / Suspense

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

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

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

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

面試小抄 - react

面試小抄 - react

生命周期

static getDerivedStateFromProps

getSnapshotBeforeUpdate

性能優化

shouldComponentUpdate

React.PureComponent

React.memo

長列表優化

key

代碼復用

Mixin

HOC（高階組件）

Render Props

React hooks

虛擬 Dom diff 算法

逐層進行節點比較

節點比較

列表節點的比較（key）

React 16.x 部分新特性

Error Boundaries

createPortal

Fiber

createContext

生命周期函數的更新（見上文）

React.memo（見上文）

lazy / Suspense

React hooks（見上文）

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

面試小抄 - react

生命周期

static getDerivedStateFromProps

getSnapshotBeforeUpdate

性能優化

shouldComponentUpdate

React.PureComponent

React.memo

長列表優化

key

代碼復用

Mixin

HOC（高階組件）

Render Props

React hooks

虛擬 Dom diff 算法

逐層進行節點比較

節點比較

列表節點的比較（key）

React 16.x 部分新特性

Error Boundaries

createPortal

Fiber

createContext

生命周期函數的更新（見上文）

React.memo（見上文）

lazy / Suspense

React hooks（見上文）

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频