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

資訊專欄INFORMATION COLUMN

React復(fù)習(xí)進(jìn)階 - 高階組件的使用/配置裝飾品模式/新版context的使用

canger / 2555人閱讀

摘要：所謂高階組件即使是接受一個(gè)組件作為參數(shù)返回一個(gè)新組件的函數(shù)用于提高組件的自身能力提高組件復(fù)用性普通高階組件函數(shù)將父級(jí)屬性向下傳遞并追加新屬性為添加樣式和木偶組件傳入一個(gè)組件返回一個(gè)函數(shù)式組件高階組件木偶組件我是本體是同樣還可以為增加生命周期

所謂高階組件即使是接受一個(gè)組件作為參數(shù), 返回一個(gè)新組件的函數(shù), 用于提高組件的"自身能力", 提高組件復(fù)用性 1.普通高階組件

HOC函數(shù)將父級(jí)屬性向下傳遞,并追加新屬性,為Dumb添加樣式和newName

// App.js
import React from "react";
import Dumb from "./HocDemo";


function App() {
  return (
    

      
    

  );
}

export default App;

// HocDemo.js
import React from "react"
//傳入一個(gè)組件返回一個(gè)函數(shù)式組件
const HOC = (Comp) => (props) => {
  const style = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    width: "500px",
    height: "300px",
    border: `2px solid ${props.color}`,
  }
  return 
}
// 木偶組件
function Dumb(props) {
  return (
    

      我是{props.newName || props.name} || 本體是{props.name}
    

  )
}


export default HOC(Dumb);

同樣還可以為Dumb增加生命周期等,以便處理邏輯

// 修改HOC函數(shù) 在函數(shù)內(nèi)部定義一個(gè)組件 最后將組件返回
const HOC = (Comp) => {
  class NewDumb extends React.Component {
    componentDidMount() {
      console.log("NewDumb")
    }
    render() {
      const style = {
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "500px",
        height: "300px",
        border: `2px solid ${this.props.color}`,
      }
      return 
    }
  }
  return NewDumb
}
2.高階組件裝飾器寫法

首先需要幾個(gè)包

yarn add react-app-rewired customize-cra @babel/plugin-proposal-decorators -D

跟目錄新建config-overrides.js (相當(dāng)于vue.config.js) 內(nèi)容如下

const { override, addDecoratorsLegacy } = require("customize-cra");

module.exports = override(
  addDecoratorsLegacy(),
);

修改HocDemo.js

//其他部分不變 其中裝飾器必須使用class聲明組件
@HOC
class Dumb extends React.Component{
  render(){
    const { style, newName, name } = this.props
    return (
      

        我是{newName || name} || 本體是{name}
      

    )
  }
}

export default Dumb;
3.新版context的使用

寫一個(gè)Context.js 在App.js中使用,
聲明一個(gè)上下文和初始化數(shù)據(jù)store,
封裝兩個(gè)函數(shù)withConsumer、withProvider
通過裝飾器使父級(jí)組件具有提供者功能
則Container組件下 被withConsumer包裹過的組件都有消費(fèi)者功能
實(shí)現(xiàn)跨層級(jí)組件通信 父=>孫

import React, { Component } from "react";
// 生成一個(gè)上下文
const Context = React.createContext();

const store = {
  name: "Zzz",
};

// 為Provider封裝一個(gè)高階組件
const withProvider = Comp => props => (
  
    
  
);

// 為Consumer封裝一個(gè)高階組件
const withConsumer = Comp => props => (
  
    {value => }
  
);

//使孫子組件足有消費(fèi)能力
@withConsumer
class Grandson extends Component {
  render() {
    return 
{this.props.value.name}
;
  }
}
//是父組件具有提供能力
@withProvider
class Provider extends Component {
  render() {
    return 
;
  }
}
// 一個(gè)容器組件
function Container(props) {
  return (
    
   

  )
}
// 一個(gè)容器組件2
function Container2(props) {
  return (
    
  

  )
}
// 一個(gè)容器組件3
function Container3(props) {
  return (
    
 Container3 

  )
}
export default Provider

demo代碼 https://github.com/ShangZzz/h...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/104828.html

相關(guān)文章

  • React 深入系列6：高階組件

    摘要：在項(xiàng)目中用好高階組件，可以顯著提高代碼質(zhì)量。高階組件的定義類比于高階函數(shù)的定義。高階函數(shù)接收函數(shù)作為參數(shù)，并且返回值也是一個(gè)函數(shù)。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 1. 基本概念 高階組件是React 中一個(gè)很重要且比較復(fù)雜的概念，高階組件在很多第三方庫（如Redux）中都...

    2shou 評(píng)論0 收藏0

  • redux原理分析

    摘要：介紹是一個(gè)針對(duì)應(yīng)用的可預(yù)測(cè)的狀態(tài)管理器。中的設(shè)計(jì)模式裝飾者模式定義裝飾者模式用于給對(duì)象動(dòng)態(tài)地增加職責(zé)。連接操作不會(huì)改變?cè)瓉淼慕M件類，而是返回一個(gè)新的已與連接的組件類。的這行代碼表示它對(duì)的數(shù)據(jù)進(jìn)行訂閱。 redux介紹 redux是一個(gè)針對(duì)JavaScript應(yīng)用的可預(yù)測(cè)的狀態(tài)管理器。 redux中的設(shè)計(jì)模式 裝飾者模式 定義：裝飾者模式用于給對(duì)象動(dòng)態(tài)地增加職責(zé)。 我們來看看redux最...

    jubincn 評(píng)論0 收藏0

  • [譯] React.js 模式

    摘要：此時(shí)，我將它寫下來討論和分享這些我發(fā)現(xiàn)的模式。正確的姿勢(shì)應(yīng)該是通過的方式獲取子組件的一些信息。高階組件是需要另外一個(gè)有用的模式依賴注入。也有部分人稱它是一種模式。最直接的方式是通過每一層通過來傳遞。 原文出自：http://krasimirtsonev.com/blog/article/react-js-in-design-patterns 前言 我想找一個(gè)好的前端前端框架，找了很久。...

    mumumu 評(píng)論0 收藏0

  • React 深入系列7：React 常用模式

    摘要：本篇是深入系列的最后一篇，將介紹開發(fā)應(yīng)用時(shí)，經(jīng)常用到的模式，這些模式并非都有官方名稱，所以有些模式的命名并不一定準(zhǔn)確，請(qǐng)讀者主要關(guān)注模式的內(nèi)容。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 本篇是React深入系列的最后一篇，將介紹開發(fā)React應(yīng)用時(shí)，經(jīng)常用到的模式，這些模式并非都有...

    Chao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<