從零開始學習 React 高階元件

xpromise發表於2019-03-24

01、介紹

React 高階元件也叫做 React HOC(High Order Component), 它是react中的高階技術, 用來重用元件邏輯。
但高階元件本身並不是React API。它只是一種模式，這種模式是由react自身的組合性質必然產生的。
那麼在學習高階元件之前有一個概念我們必須清楚，就是高階函式。

02、高階函式

概念：高階函式是一個函式，它接收函式作為引數或將函式作為輸出返回

舉個栗子:

接收函式作為引數

function a(x) {
  x();
}
function b() {
  alert('hello');
}

a(b);
複製程式碼

將函式作為輸出返回

function a() {
  function b() {
    alert('hello');
  }
  return b;
}

a()();
複製程式碼

以上函式a就是一個高階函式, 用法非常簡單, 那麼實際開發中又有哪些是高階函式呢？
- Array 的 map 、reduce 、filter 等方法
- Object 的 keys 、values 等方法

03、高階元件

概念：高階元件就是一個函式，且該函式接受一個元件作為引數，並返回一個新的元件

舉個栗子：

// WrappedComponent 就是傳入的包裝元件
function withHoc(WrappedComponent) {
  return class extends Component {
    render () {
      return (
        <WrappedComponent />
      )
    }
  }
}
複製程式碼

withHoc 函式就是一個高階元件。那麼高階元件到底有什麼神奇的魔力，值得我們為之著迷？
開發元件時，我們會遇到相同的功能，使用高階元件則能減少重複程式碼

04、高階元件實訓1

目的: 定義高階元件

元件 Login -- 登陸頁面

// 受控元件
class Login extends Component {
  state = {
    username: '',
    password: ''
  }
  
  onUsernameChange = (e) => {
    this.setState({username: e.target.value});
  }
  
  onPasswordChange = (e) => {
    this.setState({password: e.target.value});
  }
  
  login = (e) => {
    // 禁止預設事件
    e.preventDefault();
    // 收集表單資料
    const { username, password } = this.state;
    alert(`使用者名稱: ${username}, 密碼: ${password}`);
  }
  
  render () {
    const { username, password } = this.state;
    return (
      <div>
        <h2>登陸</h2>
        <form onSubmit={this.login}>
          使用者名稱: <input type="text" name="username" value={username} onChange={this.onUsernameChange}/> <br/>
          密碼: <input type="password" name="password" value={password} onChange={this.onPasswordChange}/> <br/>
          <input type="submit" value="登陸"/>
        </form>
      </div>
    )
  }
}
複製程式碼

元件 Register -- 註冊頁面

// 受控元件
class Register extends Component {
  state = {
    username: '',
    password: '',
    rePassword: ''
  }
  
  onUsernameChange = (e) => {
    this.setState({username: e.target.value});
  }
  
  onPasswordChange = (e) => {
    this.setState({password: e.target.value});
  }
  
  onRePasswordChange = (e) => {
    this.setState({rePassword: e.target.value});
  }
  
  register = (e) => {
    // 禁止預設事件
    e.preventDefault();
    // 收集表單資料
    const { username, password, rePassword } = this.state;
    alert(`使用者名稱: ${username}, 密碼: ${password}, 確認密碼: ${rePassword}`);
  }
  
  render () {
    const { username, password, rePassword } = this.state;
    return (
      <div>
        <h2>註冊</h2>
        <form onSubmit={this.register}>
          使用者名稱: <input type="text" name="username" value={username} onChange={this.onUsernameChange}/> <br/>
          密碼: <input type="password" name="password" value={password} onChange={this.onPasswordChange}/> <br/>
          確認密碼: <input type="password" name="rePassword" value={rePassword} onChange={this.onRePasswordChange}/> <br/>
          <input type="submit" value="註冊"/>
        </form>
      </div>
    )
  }
}
複製程式碼

頁面效果

我們發現裡面重複邏輯實在太多了，尤其是 onXxxChange 函式出現太多，我們先優化一下。

// 我們以 Register 元件為例來看
class Register extends Component {
  state = {
    username: '',
    password: '',
    rePassword: ''
  }
  // 最終修改狀態資料的函式
  onChange = (stateName, stateValue) => {
    this.setState({[stateName]: stateValue});
  }
  // 高階函式 --> 這樣後面就能一直複用當前函式，而不用重新建立了~
  composeChange = (name) => {
    return (e) => this.onChange(name, e.target.value);
  }
  // 統一所有提交表單函式名
  handleSubmit = (e) => {
    e.preventDefault();
    const { username, password, rePassword } = this.state;
    alert(`使用者名稱: ${username}, 密碼: ${password}, 確認密碼: ${rePassword}`);
  }
  
  render () {
    const { username, password, rePassword } = this.state;
    return (
      <div>
        <h2>註冊</h2>
        <form onSubmit={this.handleSubmit}>
          使用者名稱: <input type="text" name="username" value={username} onChange={this.composeChange('username')}/> <br/>
          密碼: <input type="password" name="password" value={password} onChange={this.composeChange('password')}/> <br/>
          確認密碼: <input type="password" name="rePassword" value={rePassword} onChange={this.composeChange('rePassword')}/> <br/>
          <input type="submit" value="註冊"/>
        </form>
      </div>
    )
  }
}
複製程式碼

現在兩個頁面都有 onChange 、 composeChange 、handleSubmit 函式和相關的狀態，我們接下來提取，封裝成高階元件！

// 高階元件 withHoc
export default function withHoc(WrappedComponent) {
  return class extends Component {
    state = {
      username: '',
      password: '',
      rePassword: ''
    }
  
    onChange = (stateName, stateValue) => {
      this.setState({[stateName]: stateValue});
    }
  
    composeChange = (name) => {
      return (e) => this.onChange(name, e.target.value);
    }
    
    handleSubmit = (e) => {
      e.preventDefault();
      const { username, password, rePassword } = this.state;
      if (rePassword) {
        alert(`使用者名稱: ${username}, 密碼: ${password}, 確認密碼: ${rePassword}`);
      } else {
        alert(`使用者名稱: ${username}, 密碼: ${password}`);
      }
    }
    
    render () {
      // 抽取方法
      const mapMethodToProps = {
        composeChange: this.composeChange,
        handleSubmit: this.handleSubmit,
      }
      // 將狀態資料和操作的方法以 props 的方式傳入的包裝元件中
      return (
        <div>
          {/*提取公共頭部*/}
          <h2>xxx</h2>
          <WrappedComponent {...this.state} {...mapMethodToProps}/>
        </div>
      )
    }
  }
}

// 元件 Register
class Register extends Component {
  render () {
    const { handleSubmit, composeChange, username, password, rePassword } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        使用者名稱: <input type="text" name="username" value={username} onChange={composeChange('username')}/> <br/>
        密碼: <input type="password" name="password" value={password} onChange={composeChange('password')}/> <br/>
        確認密碼: <input type="password" name="rePassword" value={rePassword} onChange={composeChange('rePassword')}/> <br/>
        <input type="submit" value="註冊"/>
      </form>
    )
  }
}
// 向外暴露的是高階元件的返回值~包裝了 Register 元件返回了一個新元件
export default withHoc(Register);
複製程式碼

現在我們提取了公共方法、狀態等資料, 封裝了一個基本的高階元件。但是還有很多需要問題需要解決，現在開始行動~

05、高階元件實訓2

目的: 向高階元件中傳參

修改高階元件

// 再次包裹了一層高階函式, 這個高階函式執行後返回值才是高階元件
// 通過這種方式, 高階元件內部就能獲取引數了~
export default (title) => (WrappedComponent) => {
  return class Form extends Component {
    ...重複程式碼省略...
    
    render () {
      const mapMethodToProps = {
        composeChange: this.composeChange,
        handleSubmit: this.handleSubmit,
      }
      return (
        <div>
          {/*獲取到引數值就能正常顯示了~*/}
          <h2>{title}</h2>
          <WrappedComponent {...this.state} {...mapMethodToProps}/>
        </div>
      )
    }
  }
}
複製程式碼

在 Login / Register 元件中使用
- export default withHoc('登陸')(Login);
- export default withHoc('註冊')(Register);

06、高階元件實訓3

目的: 獲取父元件傳遞的 props

修改 App 元件

class App extends Component {
  render() {
    return (
      <div>
        {/*父元件向子元件傳遞屬性*/}
        <Login name="jack" age={18}/>
        <Register />
      </div>
    );
  }
}
複製程式碼

修改高階元件

export default (title) => (WrappedComponent) => {
  return class Form extends Component {
    ...重複程式碼省略...
    
    render () {
      const mapMethodToProps = {
        composeChange: this.composeChange,
        handleSubmit: this.handleSubmit,
      }
      return (
        <div>
          {/*獲取到引數值就能正常顯示了~*/}
          <h2>{title}</h2>
          {/* 將當前元件接受到的props傳給包裝元件~*/}
          <WrappedComponent {...this.props} {...this.state} {...mapMethodToProps}/>
        </div>
      )
    }
  }
}
複製程式碼

 class Login extends Component {
   render () {
     const { handleSubmit, composeChange, username, password, name, age } = this.props;
     return (
       <div>
         <p>你的名字: {name}</p>
         <p>你的年齡: {age}</p>
         <form onSubmit={handleSubmit}>
           使用者名稱: <input type="text" name="username" value={username} onChange={composeChange('username')}/> <br/>
           密碼: <input type="password" name="password" value={password} onChange={composeChange('password')}/> <br/>
           <input type="submit" value="登陸"/>
         </form>
       </div>
     )
   }
 }
複製程式碼

07、高階元件實訓4

目的: 修改在 React-devtool 中高階元件名稱，方便除錯

修改高階元件

export default (title) => (WrappedComponent) => {
  return class Form extends Component {
    // 定義靜態方法，修改元件在除錯工具中顯示的名稱
    static displayName = `Form(${getDisplayName(WrappedComponent)})`
    
    ...省略重複程式碼...
  }
}
// 獲取包裝元件的displayName的方法
function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
複製程式碼

修改之前名稱
修改之後名稱

08、使用裝飾器

目的: 簡化使用高階元件
下載包
- npm i react-app-rewired customize-cra @babel/plugin-proposal-decorators -D

在專案根目錄配置 config-overrides.js

const { override, addDecoratorsLegacy } = require('customize-cra');
// 修改 create-react-app 的 webpack 的配置
module.exports = override(
  addDecoratorsLegacy()
)
複製程式碼

修改 package.json 的 scripts

// 將 react-scripts 修改為 react-app-rewired
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
},
複製程式碼

以上就是使用 decorator 的配置，修改完後就能使用了~

修改 Login 元件

@withHoc('登陸')
class Login extends Component {
  ...省略重複程式碼...
}
export default Login;
複製程式碼

修改 Register 元件

@withHoc('註冊')
class Register extends Component {
  ...省略重複程式碼...
}
export default Register;
複製程式碼

react-app-rewired customize-cra 是 create-react-app 2.0以上專門用來修改 webpack 的配置
decorator 還能做很多事，感興趣朋友可以看看阮一峰ES6教程瞭解更多

重複程式碼永遠是我們需要考慮處理的程式碼，所以我們有模組化、元件化、工具類函式等等，在 React 中再次引入了一個高階元件的概念，都是為了去除掉萬惡的重複程式碼，讓我們程式碼變得更加精簡。本篇文章所有原始碼都放在了 git倉庫，如果它對你有幫助的話，歡迎點 star ~~

從零開始學React:二檔 React生命週期以及元件開發
2019-02-13
React元件
【從零開始學爬蟲】模板的高階選項
2023-01-06
爬蟲
從零開始學習Kafka
2019-05-10
Kafka
從零開始學習機器學習
2018-08-09
機器學習
從零開始學習laravel
2020-11-17
Laravel
eclipse學習從零開始
2012-03-04
Eclipse
從零開始學Python：21課-函式的高階應用
2020-08-13
Python函式
從零開始學 Web 之 JavaScript 高階（一）原型，貪吃蛇案
2021-09-09
WebJavaScript原型
學習React，從攻克JSX開始
2018-09-04
ReactJS
從零開始學習 Go ——安裝
2019-05-14
Go
30天從零開始學習Swift
2015-11-02
Swift
React高階元件
2020-12-27
React元件
React 高階元件
2018-03-11
React元件
從零開始學習邏輯迴歸
2018-11-23
邏輯迴歸
從零開始學習如何部署程式碼
2018-07-11
從零開始內網滲透學習
2018-06-23
內網
如何從零開始學習一個框架
2016-10-24
框架
從零開始學React：三檔 React-router4.x的使用
2019-02-13
React
React HOC（高階元件）
2019-05-22
React元件
從零開始學習OpenGL-14複習光照
2020-11-24
從零開始React伺服器渲染
2017-01-13
React伺服器
《谷歌JAX深度學習從零開始學》簡介
2022-06-14
谷歌深度學習
《Python深度學習從零開始學》簡介
2022-05-23
Python深度學習
從零開始學習開發人工智慧(一)
2019-02-22
人工智慧
React 進階(三) 高階元件
2019-03-18
React元件
React高階指南之高階元件
2018-08-18
React元件
軟體測試如何從零開始學習
2019-09-16
我是如何從零開始學習前端的
2018-04-14
前端
VUE2.0從零開始學習路線
2018-07-02
Vue
【ROS】從零開始學ROS
2020-12-12
ROS
從零開始學Python
2022-04-10
Python
【React學習路線】從零進階前端核心工程師
2021-09-09
React前端工程師
從零開始React專案架構(六)
2019-02-27
React架構
從零開始React專案架構(三)
2018-06-10
React架構
從零開始React專案架構(四)
2018-06-13
React架構
從零開始React專案架構(五)
2018-06-19
React架構
從零開始搭建React全家桶環境
2018-01-31
React
從零開始React專案架構(一)
2018-06-06
React架構

從零開始學習 React 高階元件

01、介紹

02、高階函式

03、高階元件

04、高階元件實訓1

05、高階元件實訓2

06、高階元件實訓3

07、高階元件實訓4

08、使用裝飾器

相關文章