02.react進階指南

const OtherComponent = React.lazy(() => import("./OtherComponent"));

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

Context提供了一個無需為每層組件手動添加 props，就能在組件樹間進行數據傳遞的方法，設計目的是為了共享那些對于一個組件樹而言是“全局”的數據。

// Context 可以讓我們無須明確地傳遍每一個組件，就能將值深入傳遞進組件樹。
// 為當前的 theme 創建一個 context（“light”為默認值）。
const ThemeContext = React.createContext("light");

class App extends React.Component {
  render() {
    // 使用一個 Provider 來將當前的 theme 傳遞給以下的組件樹。
    // 無論多深，任何組件都能讀取這個值。
    // 在這個例子中，我們將 “dark” 作為當前的值傳遞下去。
    return (
      
        
      
    );
  }
}

// 中間的組件再也不必指明往下傳遞 theme 了。
function Toolbar(props) {
  return (
    

      
    
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 讀取當前的 theme context。
  // React 會往上找到最近的 theme Provider，然后使用它的值。
  // 在這個例子中，當前的 theme 值為 “dark”。
  static contextType = ThemeContext;
  render() {
    return ;
  }
}

請謹慎使用，因為這會使得組件的復用性變差。

API:

React.createContext：
創建一個 Context 對象。當 React 渲染一個訂閱了這個 Context 對象的組件，這個組件會從組件樹中離自身最近的那個匹配的 Provider 中讀取到當前的 context 值。只有當組件所處的樹中沒有匹配到 Provider 時，其 defaultValue 參數才會生效。

Context.Provider：
每個 Context 對象都會返回一個 Provider React 組件，它允許消費組件訂閱 context 的變化。當 Provider 的 value 值發生變化時，它內部的所有消費組件都會重新渲染。

Class.contextType：
掛載在 class 上的 contextType 屬性會被重賦值為一個由 React.createContext() 創建的 Context 對象。這能讓你使用 this.context 來消費最近 Context 上的那個值。你可以在任何生命周期中訪問到它，包括 render 函數中。

Context.Consumer：
這里，React 組件也可以訂閱到 context 變更。這能讓你在函數式組件中完成訂閱 context。

Refs 提供了一種方式，允許我們訪問 DOM 節點或在 render 方法中創建的 React 元素。不能在函數組件上使用 ref 屬性，因為他們沒有實例，可以在函數組件內部使用 ref 屬性。

適合使用 refs 的情況：

管理焦點，文本選擇或媒體播放。

觸發強制動畫。

集成第三方 DOM 庫。

使用方法：

創建 Refs

Refs 是使用 React.createRef() 創建的，并通過 ref 屬性附加到 React 元素。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return 
;
  }
}

訪問 Refs

在 ref 的 current 屬性中被訪問

const node = this.myRef.current;

Ref 轉發是一項將 ref 自動地通過組件傳遞到其一子組件的技巧。子組件使用React.forwardRef接收ref。可用于Hoc處理ref。

const FancyButton = React.forwardRef((props, ref) => (
  
    {props.children}
  
));

// 你可以直接獲取 DOM button 的 ref：
const ref = React.createRef();
Click me!;

上例中，FancyButton 使用 React.forwardRef 來獲取傳遞給它的 ref，然后轉發到它渲染的 DOM button。這樣，使用 FancyButton 的組件可以獲取底層 DOM 節點 button 的 ref ，并在必要時訪問，就像其直接使用 DOM button 一樣。

Fragments 允許你將子列表分組，而無需向 DOM 添加額外節點。key 是唯一可以傳遞給 Fragment 的屬性

render() {
  return (
    
      
      
      
    
  );
}

可簡寫為<>

HOC是參數為組件，返回值為新組件的函數。

HOC 不會修改傳入的組件，也不會使用繼承來復制其行為。相反，HOC 通過將組件包裝在容器組件中來組成新組件。HOC 是純函數，沒有副作用。

示例：

// 此函數接收一個組件...
function withSubscription(WrappedComponent, selectData) {
  // ...并返回另一個組件...
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ...負責訂閱相關的操作...
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      DataSource.removeChangeListener(this.handleChange);
    }

    handleChange() {
      this.setState({
        data: selectData(DataSource, this.props)
      });
    }

    render() {
      // ... 并使用新數據渲染被包裝的組件!
      // 請注意，我們可能還會傳遞其他屬性
      return ;
    }
  };
}

上例中class組件為HOC的容器組件，容器組件擔任分離將高層和低層關注的責任，由容器管理訂閱和狀態，并將 prop 傳遞給處理渲染 UI。HOC 使用容器作為其實現的一部分，你可以將 HOC 視為參數化容器組件。

注意事項：

不要在 render 方法中使用 HOC。

在render中使用會導致diff 算法在對比組件變化時每次檢測都不一樣，每次渲染都會進行卸載，和重新掛載的操作，這不僅僅是性能問題 - 重新掛載組件會導致該組件及其所有子組件的狀態丟失。

務必復制靜態方法到容器組件上。

可以使用hoist-non-react-statics自動拷貝所有非 React 靜態方法

import hoistNonReactStatic from "hoist-non-react-statics";
function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  hoistNonReactStatic(Enhance, WrappedComponent);
  return Enhance;
}

Refs 不會被傳遞。

可用過Refs 轉發解決

常見的HOC:

redux的 connect

大部分情況下，你可以使用 React.PureComponent 來代替手寫 shouldComponentUpdate。只有當檢測數據是數組或對象時，由于淺拷貝的問題會導致比較出現偏差不能使用，此時使用深拷貝仍可繼續使用。

如以下代碼：

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
       this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      
    );
  }
}

可替換為：

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
       this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      
    );
  }
}

Portal 提供了一種將子節點渲染到存在于父組件以外的 DOM 節點的優秀的方案。

一個 portal 的典型用例是當父組件有 overflow: hidden 或 z-index 樣式時，但你需要子組件能夠在視覺上“跳出”其容器。例如，對話框、懸浮卡以及提示框：

render() {
  // React 并*沒有*創建一個新的 div。它只是把子元素渲染到 `domNode` 中。
  // `domNode` 是一個可以在任何位置的有效 DOM 節點。
  return ReactDOM.createPortal(
    this.props.children,
    domNode
  );
}

StrictMode 不會渲染任何可見的 UI。它為其后代元素觸發額外的檢查和警告。嚴格模式檢查僅在開發模式下運行；它們不會影響生產構建。

作用：

識別不安全的生命周期

關于使用過時字符串 ref API 的警告

關于使用廢棄的 findDOMNode 方法的警告

檢測意外的副作用

檢測過時的 context API

React.memo 為高階組件。它與 React.PureComponent 非常相似，但它適用于函數組件，但不適用于 class 組件。

如果你的函數組件在給定相同 props 的情況下渲染相同的結果，那么你可以通過將其包裝在 React.memo 中調用，以此通過記憶組件渲染結果的方式來提高組件的性能表現。這意味著在這種情況下，React 將跳過渲染組件的操作并直接復用最近一次渲染的結果。

默認情況下其只會對復雜對象做淺層對比，如果你想要控制對比過程，那么請將自定義的比較函數通過第二個參數傳入來實現。

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