国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

高階函數與高階組件

legendmohe / 999人閱讀

摘要：高階函數基本概念函數可以作為參數被傳遞函數可以作為返回值輸出平時遇到的應用場景中獲取成功數組中和高階組件高階組件就是接受一個組件作為參數并返回一個新組件的函數高階組件是一個函數，并不一個組件例子組件里面包含組件這里必須出去這是組件高階組件的

高階函數基本概念

1 函數可以作為參數被傳遞

 setTimeout(()=>{
   console.log("aaaa")
  },1000)

2 函數可以作為返回值輸出

  function foo(x){
        return function(){
           return x
        }
      }

 //平時遇到的應用場景      
//ajax中
 $.get("/api/getTime",function(){
     console.log("獲取成功")
  })
 //數組中
 some(), every(),filter(), map()和forEach（）
高階組件

1 高階組件就是接受一個組件作為參數并返回一個新組件的函數

2 高階組件是一個函數，并不一個組件

例子： A組件里面包含B組件

 import React , { Component }from "react"
    function A(WrappedComponent){
     return  class A extends Component{  //這里必須retrun出去
       render() {
        return(
         

           這是A組件
           
         

         )
       }
      }
     }

    export default  A
高階組件的應用

傳參數

import React, { Component } from "react";
import "./App.css";
import B from "./components/B"
class App extends Component {
  render() {
   return (
     

        這是我的APP
       
     

   );
  }
}
export default App;


//A組件
import React , { Component }from "react"
export default (title)=> WrappedComponent => {
return  class A extends Component{
 render() {
  return(
    

       這是A組件{title}
       
    

    )
   }
 }
}

 //B組件
import React , { Component }from "react"
import A from "./A.js"
class B extends Component{
  render() {
   return(
    

     性別：{this.props.sex}
     年齡：{this.props.age}
     姓名：{this.props.name}
    

   )
  }
 }
export default  A("提示")(B)

//有兩種方式引用高階函數，第一種入上
//第二種

import React , { Component }from "react"
import a from "./A.js"
@a("提示")
class B extends Component{
  render() {
   return(
    

     性別：{this.props.sex}
     年齡：{this.props.age}
     姓名：{this.props.name}
    

   )
  }
 }
export default B

使用第二種方式的步驟

繼承方式高階組件的實現

   //D.js
import React from "react"
const modifyPropsHOC= (WrappedComponent) =>  class NewComponent extends WrappedComponent{
render() {
   const element = super.render();
   const newStyle = {
     color: element.type == "div"?"red":"green"
   }
   const newProps = {...this.props,style:newStyle}
   return React.cloneElement(element,newProps,element.props.children)
 }
} 
export default modifyPropsHOC


 // E.js

import React, {Component} from "react"
import D from "./D"
class E extends Component {
render(){
return (
  

  我的div
  

);
}
}

export default D(E)


// F.js
import React, {Component} from "react"
import d from "./D"
class F extends Component {
render(){
return (
  

  我的p
  

);
}
}

export default d(F)


import React, { Component } from "react";
import "./App.css";
import E from "./components/E"
import F from "./components/F"
class App extends Component {
  render() {
return (
  

   這是我的APP
   
   
  

  );
  }
}

export default App;

修改生命周期

import React from "react"
const modifyPropsHOC= (WrappedComponent) =>  class NewComponent extends WrappedComponent{
componentWillMount(){
alert("我的修改后的生命周期");
}
render() {
   const element = super.render();
   const newStyle = {
color: element.type == "div"?"red":"green"
   }
   const newProps = {...this.props,style:newStyle}
   return React.cloneElement(element,newProps,element.props.children)
  }
}

export default modifyPropsHOC

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103680.html

相關文章

  • react進階系列：高階組件詳解（一）

    摘要：創建一個普通函數因為的存在所以變成構造函數創建一個方法在方法中，創建一個中間實例對中間實例經過邏輯處理之后返回使用方法創建實例而恰好，高階組件的創建邏輯與使用，與這里的方法完全一致。因為方法其實就是構造函數的高階組件。 很多人寫文章喜歡把問題復雜化，因此當我學習高階組件的時候，查閱到的很多文章都給人一種高階組件高深莫測的感覺。但是事實上卻未必。 有一個詞叫做封裝。相信寫代碼這么久了，大...

    NervosNetwork 評論0 收藏0

  • 深入淺出React高階組件

    摘要：博客地址背景知識在開始講述高階組件前，我們先來回顧高階函數的定義接收函數作為輸入，或者輸出另一個函數的一類函數，被稱作高階函數。 博客地址：http://www.luckyjing.com/post... 背景知識 在開始講述高階組件前，我們先來回顧高階函數的定義：接收函數作為輸入，或者輸出另一個函數的一類函數，被稱作高階函數。對于高階組件，它描述的便是接受React組件作為輸入，輸出...

    yuanzhanghu 評論0 收藏0

  • React進階——使用高階組件（Higher-order Components）優化你的代碼

    摘要：之所以稱之為高階，是因為在中，這種嵌套關系會反映到組件樹上，層層嵌套就好像高階函數的一樣，如圖從圖上也可以看出，組件樹雖然嵌套了多層，但是實際渲染的結構并沒有改變。你可能已經注意到，目前我寫的所有高階函數，都是形如表示為。 什么是高階組件 Higher-Order Components (HOCs) are JavaScript functions which add function...

    happyfish 評論0 收藏0

  • React高階組件

    摘要：高階組件高階函數接收函數作為輸入，或者輸出另一個函數的一類函數高階組件接收組件作為輸入，輸出一個新的組件的組件。包含了一系列實用的高階組件庫拖動庫深入理解高階組件其中詳細介紹了屬性代理和反向繼承的區別。 React高階組件 高階函數： 接收函數作為輸入，或者輸出另一個函數的一類函數； 高階組件： 接收React組件作為輸入，輸出一個新的React組件的組件。 高階組件通過包裹一個新傳入...

    cncoder 評論0 收藏0

  • 學習es7的Decorator(順帶寫個react高階組件)

    摘要：為了代碼進一步解耦，可以考慮使用高階組件這種模式。開源的高階組件使用提供了一系列使用的高階組件，可以增強組件的行為，可以利用此庫學習高階組件的寫法。通過使用此庫提供的高階組件，可以方便地讓列表元素可拖動。 1. Decorator基本知識 在很多框架和庫中看到它的身影，尤其是React和Redux，還有mobx中，那什么是裝飾器呢。 修飾器（Decorator）是一個函數，用來修改類的...

    xiyang 評論0 收藏0

發表評論

0條評論

legendmohe

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<