什么是高階組件HOC

這篇文章主要講解了“什么是高階組件HOC”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“什么是高階組件HOC”吧！

高階組件

簡單來說，高階組件可以看做一個函數(shù)，且該函數(shù)接受一個組件作為參數(shù)，并返回一個新的組件。

我在之前的博客《閉包和類》中提到一個觀點(diǎn)，面向?qū)ο蟮暮锰幘驮谟冢子诶斫猓奖憔S護(hù)和復(fù)用。
其實(shí)高階組件，也是為了更好地復(fù)用之前的組件。它可以理解為，基礎(chǔ)組件通過包裹處理，生成一個適應(yīng)某些場景的組件。
它可能存在于以下幾種場景：

定制props

一個簡單例子：

function withMoreThings(WrappedComponent) {  
  return class extends React.Component {
    render() {     
      const moreThings = {
          more: 'things',
      };
      return <WrappedComponent {...this.props} ...moreThings/>    
    }  
  } 
}

這是HOC(High Order Component)最常用的一種方式，用來傳遞一些定制化的參數(shù)給內(nèi)部組件。

提取公共方法、屬性

在to B的項(xiàng)目中，表單是一個大頭，所有流程都繞不開表單。也就會說到受控組件和非受控組件。

受控組件

由于HTML表單元素會保留一些內(nèi)部狀態(tài)，比如input框，它會有自己內(nèi)部的狀態(tài)來保存用戶的輸入值。

<input type="text" name="name" />

此時，為了能夠處理將React的state和表單元素的內(nèi)部狀態(tài)統(tǒng)一起來，React提供了一種稱為“受控組件”的技術(shù)。

class NameInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    console.log(this);
    this.setState({value: event.target.value});
  }

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

通過內(nèi)部的state和綁定change事件，就可以將input內(nèi)部的處理機(jī)制轉(zhuǎn)移到React的默認(rèn)處理機(jī)制上，收到React的控制。
但是，還是有一些元素，不能使用這種方法，比如

<input type="file">

這個元素是只讀的，用戶選擇完畢后，可以獲取到對應(yīng)的文件。不能通過React內(nèi)部的state來模擬。
這就引出了——

非受控組件

非受控組件從DOM中獲取表單值，而不是通過React的state來處理。由于它不經(jīng)過React的一些邏輯，所以不能對它的狀態(tài)做監(jiān)控。這里有一篇文章Controlled and uncontrolled form inputs in React don't have to be complicated介紹了何時可以使用非受控組件。
下面是一個非受控組件的例子：

import React, { Component } from "react";
export default class NameInput extends Component {
  constructor(props) {
    super(props);
  }

  handleChange(event) {
    console.log(this);
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <input
        type="text"
        defaultValue="test"
        ref={input => (this.input = input)}
      />
    );
  }
}

<input type="checkbox"> 和 <input type="radio"> 支持 defaultChecked，<input type="text"><select> 和 <textarea> 支持 defaultValue，可以幫助設(shè)置表單默認(rèn)值。

非受控組件通過ref來獲取DOM元素，然后根據(jù)當(dāng)前DOM去更新UI。
有關(guān)Ref的使用，參考這個文檔Refs & DOM。
我個人建議，如果對于一些數(shù)據(jù)交互較少，展示和處理基本在組件內(nèi)部完成，不會涉及到很多組件間數(shù)據(jù)交換的情景，可以使用非受控組件，更快，更直觀。其他情況仍然建議使用受控組件，方便數(shù)據(jù)流的傳導(dǎo)。

接著說回高階組件。在使用表單時，很多情境下的輸入，我們都希望統(tǒng)一由state，或者redux來保存，而不是被dom節(jié)點(diǎn)存儲。
上面講到了受控組件的使用，關(guān)鍵點(diǎn)有三：
1.對應(yīng)的onChange方法
2.對應(yīng)的存儲點(diǎn)，state或者redux
3.綁定到對應(yīng)組件
參考上面的描述，來實(shí)現(xiàn)一個高階組件的生成函數(shù)。
這樣就可以很方便的生成受控組件。
在一些場景下，我們也可以用其他組件包裝WrappedComponent。比如，添加一些小圖標(biāo)，用父組件可能不夠靈活，用HOC則可以很輕松地生成一個可配置的組件，靈活許多。
在React Higher Order Components in depth還提到一種生成HOC的方法，類繼承，改寫更徹底。詳細(xì)內(nèi)容可以參考這篇文章。也可以查看知乎的這篇翻譯深入理解 React 高階組件。

感謝各位的閱讀，以上就是“什么是高階組件HOC”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對什么是高階組件HOC這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！