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…