react 高階組件 HOC 的個人理解和使用場景(易懂)

一句話介紹HOC
高階組件就是接受一個組件作為參數并返回一個新組件(功能增強的組件)的函數。這里需要注意高階組件是一個函數,并不是組件,這一點一定要注意。
使用場景
將幾個功能相似的組件里面的方法和react特性(如生命周期里面的副作用)提取到HOC中,然后向HOC傳入需要封裝的組件。最后將公用的方法傳給組件。
優勢
使代碼簡潔優雅、代碼量更少
代碼示例:
高階組件:






`//定義高階組件 //放在common公用方法里面
import React, { Component} from 'react';
export default (WrappedComponent) => {  
    return class extends Component {
          constructor(props) {
            super(props)
            this.state = { //定義可復用的狀態
                count:1
            }
            this.getCode = this.getCode.bind(this) 
          }
          componentDidMount() {
            alert('111')
          }
        //定義可復用的方法
          getCode(mobile) {
            // ...
            this.setState({count : mobile})
            console.log(mobile)
          }
          postVcode(mobile) {
            // ...
          }
          render() {
            return (
              <div>
                <WrappedComponent getCode="{this.getCode}" state="{this.state}" {...this.props}=""/>
              </div>
            )
          }
        }
      }
      // 高階組件就是把可復用的邏輯放在定義的高階組件中,然后把需要調用高階組件的組件作為參數傳給高階組件,然后在高階組件中
      // 實例化該組件,再把需要復用的方法和state傳給次組件注册送28体验金的游戏平台,然后在此組件中的props中就可以拿到高階組件里定義的邏輯方法和state了

傳入的組件:

import React, { Component} from 'react';
import HOC from './index'
//高階組件的使用
class Register extends Component{
       render() {
        return (
          <div>
            <button onClick="{()=">{this.props.getCode('17682334636')}}>使用高階組件里復用的方法</button>
            {this.props.state.count}
          </div>
        )
      }
}
export default HOC(Register)
//高階組件其實就是將復用的方法傳給組件,使代碼簡潔、代碼量更少

看到這里,hoc基本就會用了。

原文鏈接:

上一篇:vue中的keep-alive緩存
下一篇:h5 draggable 拖動元素跟實際結構表現不匹配的問題

相關推薦

官方社區

掃碼加入 JavaScript 社區