成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React復習進階 - 高階組件的使用/配置裝飾品模式/新版context的使用

canger / 2562人閱讀

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

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

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

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


function App() {
  return (
    

      
    

  );
}

export default App;

// HocDemo.js
import React from "react"
//傳入一個組件返回一個函數式組件
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函數 在函數內部定義一個組件 最后將組件返回
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.高階組件裝飾器寫法

首先需要幾個包

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

跟目錄新建config-overrides.js (相當于vue.config.js) 內容如下

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的使用

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

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

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

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

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

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

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

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

  )
}
export default Provider

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

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

轉載請注明本文地址：http://systransis.cn/yun/104828.html

相關文章

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

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

    2shou 評論0 收藏0

  • redux原理分析

    摘要：介紹是一個針對應用的可預測的狀態(tài)管理器。中的設計模式裝飾者模式定義裝飾者模式用于給對象動態(tài)地增加職責。連接操作不會改變原來的組件類，而是返回一個新的已與連接的組件類。的這行代碼表示它對的數據進行訂閱。 redux介紹 redux是一個針對JavaScript應用的可預測的狀態(tài)管理器。 redux中的設計模式 裝飾者模式 定義：裝飾者模式用于給對象動態(tài)地增加職責。 我們來看看redux最...

    jubincn 評論0 收藏0

  • [譯] React.js 模式

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

    mumumu 評論0 收藏0

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

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

    Chao 評論0 收藏0

發(fā)表評論

0條評論

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