**裁减组件。
创立一个函数裁减之后返回另一个函数**
import React, { Component } from 'react' function bala(props){ return( <div> {props.age} - {props.name} </div> ) } function moreStage(Component){ const moreComponent = props =>{ return <Component {...props} name="jack"/> } return moreComponent }  export default moreStage(bala)
App.js中应用
import React from 'react';  import './App.css';import Hoc from './Hoc'function App() { return ( <div className="App"> <Hoc age="12"/> </div> );}  export default App;
链式调用
import React, { Component } from 'react'   function bala(props){ return( <div> {props.age} - {props.name} </div> ) } function moreStage(Component){ const moreComponent = props =>{ return <Component {...props} name="jack"/> } return moreComponent } function withlog(Component){ console.log(Component.name+'增强的') return props =>{ return <Component {...props} /> } }  export default moreStage(withlog(moreStage(withlog(bala))))
装璜器写法
npm i @babel/plugin-proposal-decorators -D

在config-overrides.js中增加

const {override,fixBabelImports,addDecoratorsLegacy} = require('customize-cra')// override返回一个函数   该函数返回对象作为webpack的配置对象module.exports = override( fixBabelImports("import",{ libraryName:'antd', libraryDirectory:'es', style:'css' }), addDecoratorsLegacy())
import React, { Component } from 'react'function withlog(Component){ console.log(Component.name+'增强的') return props =>{ return <Component {...props} /> }}function moreStage(Component){ const moreComponent = props=>{ return <Component {...props} name="jack"/> } return moreComponent } @withlog @moreStage @withlog class bala extends Component{ render(){  return( <div> {this.props.age} - {this.props.name} </div> ) } }  // export default moreStage(withlog(moreStage(withlog(bala))))export default bala
组件复合
import React, { Component } from 'react'  function Dialog(props){ let color = props.color||'yellow' return ( <div style={{border:`1px solid ${color}`}}> {/* children是固定的名称 相当于slot,匿名插槽 */} {props.children} {props.foo('子组件传过来的')} <div> {/* 具名插槽 */} {props.footer} </div> </div> )}function WelcomeDialog(){ let footer = <button onClick={()=>alert('...')}>确认</button> return ( //传递任意非法表达式 <Dialog color="lightBlue" footer={footer} foo={(c)=><p>{c}</p>}> <p>React牛逼</p> </Dialog> )}export default function Composition(){ return <WelcomeDialog>}

简易版的redux
import React, { Component } from 'react'const Context = React.createContext()const store = {    token:'kkk'}export default class ContextText extends Component {    render() {        return (            <Context.Provider value={store}>                <div>                <Context.Consumer>                    {store=> <p>{store.token}</p>}                </Context.Consumer>                </div>            </Context.Provider>                    )    }}