React复习进阶 - 高阶组件的使用/配置装饰品模式/新版context的使用

canger 发布于2019-08-23 18:12 / 2552人阅读

摘要：所谓高阶组件即使是接受一个组件作为参数返回一个新组件的函数用于提高组件的自身能力提高组件复用性普通高阶组件函数将父级属性向下传递并追加新属性为添加样式和木偶组件传入一个组件返回一个函数式组件高阶组件木偶组件我是本体是同样还可以为增加生命周期

所谓高阶组件即使是接受一个组件作为参数, 返回一个新组件的函数, 用于提高组件的"自身能力", 提高组件复用性 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包裹过的组件都有消费者功能
实现跨层级组件通信父=>孙

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...

GPU云服务器云服务器进阶使用技巧 react使用webrtc 高阶组件 vuejs组件使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104828.html

React 深入系列6：高阶组件

摘要：在项目中用好高阶组件，可以显著提高代码质量。高阶组件的定义类比于高阶函数的定义。高阶函数接收函数作为参数，并且返回值也是一个函数。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 1. 基本概念高阶组件是React 中一个很重要且比较复杂的概念，高阶组件在很多第三方库（如Redux）中都...

2shou 2019-08-22 17:28 评论0 收藏0
redux原理分析

摘要：介绍是一个针对应用的可预测的状态管理器。中的设计模式装饰者模式定义装饰者模式用于给对象动态地增加职责。连接操作不会改变原来的组件类，而是返回一个新的已与连接的组件类。的这行代码表示它对的数据进行订阅。 redux介绍 redux是一个针对JavaScript应用的可预测的状态管理器。 redux中的设计模式装饰者模式定义：装饰者模式用于给对象动态地增加职责。我们来看看redux最...

jubincn 2019-08-21 11:35 评论0 收藏0
[译] React.js 模式

摘要：此时，我将它写下来讨论和分享这些我发现的模式。正确的姿势应该是通过的方式获取子组件的一些信息。高阶组件是需要另外一个有用的模式依赖注入。也有部分人称它是一种模式。最直接的方式是通过每一层通过来传递。原文出自：http://krasimirtsonev.com/blog/article/react-js-in-design-patterns 前言我想找一个好的前端前端框架，找了很久。...

mumumu 2019-08-20 10:50 评论0 收藏0
React 深入系列7：React 常用模式

摘要：本篇是深入系列的最后一篇，将介绍开发应用时，经常用到的模式，这些模式并非都有官方名称，所以有些模式的命名并不一定准确，请读者主要关注模式的内容。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。本篇是React深入系列的最后一篇，将介绍开发React应用时，经常用到的模式，这些模式并非都有...

Chao 2019-08-22 17:28 评论0 收藏0