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

所谓高阶组件即使是接受一个组件作为参数, 返回一个新组件的函数, 用于提高组件的"自身能力", 提高组件复用性

1.普通高阶组件

HOC函数将父级属性乡下传递,并追加新属性,为Dumb添加样式和newName

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


function App() {
  return (
    <div className="App">
      <Dumb name="木偶组件" color="#afa"/>
    </div>
  );
}

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 <Comp style={style} {...props} newName="高阶组件" />
}
// 木偶组件
function Dumb(props) {
  return (
    <div style={props.style}>
      我是{props.newName || props.name} || 本体是{props.name}
    </div>
  )
}


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 <Comp style={style} {...this.props} newName="高阶组件" />
    }
  }
  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 (
      <div style={style}>
        我是{newName || name} || 本体是{name}
      </div>
    )
  }
}

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 => (
  <Context.Provider value={store}>
    <Comp {...props} />
  </Context.Provider>
);

// 为Consumer封装一个高阶组件
const withConsumer = Comp => props => (
  <Context.Consumer>
    {value => <Comp {...props} value={value} />}
  </Context.Consumer>
);

//使孙子组件足有消费能力
@withConsumer
class Grandson extends Component {
  render() {
    return <div>{this.props.value.name}</div>;
  }
}
//是父组件具有提供能力
@withProvider
class Provider extends Component {
  render() {
    return <div><Container/></div>;
  }
}
// 一个容器组件
function Container(props) {
  return (
    <div> <Container2/> <Container3/> </div>
  )
}
// 一个容器组件2
function Container2(props) {
  return (
    <div> <Grandson/> </div>
  )
}
// 一个容器组件3
function Container3(props) {
  return (
    <div> Container3 </div>
  )
}
export default Provider

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