react-基础操作（5）HOC、装饰器模式

阅读数：16633次 2020-03-31

字数统计: 403字 | 阅读时长≈ 2分

vue生态更官方化，react更加社区化

源码在我的github地址react-tuts-03

HOC

高阶组件Higher-Order Component

举例：

var add = (x) => {
	return (y) => {
	return x+y
	}
}

用的时候
add(1)(2)

//柯里化

装饰器

让cra支持@装饰器写法

1.不管你是要配置什么，最好的方式是使用react-app-rewired这个包来对cra创建的项目进行轻微的配置调整

npm install react-app-rewired –save-dev

2.安装好之后，把package.json里的scripts里的react-scripts换成react-app-rewired

3.在根目录下创建一个config-overrides.js

module.exports= (config) => {
    //如果没有使用customize-cra，在这个里面可以对config进行配置
    return config
}

4.当然如果想要方便，可以先安装customize-cra，然后修改config-overrides.js

npm install customize-cra –save-dev

npm i @babel/plugin-personal-decorators -D

const {override, addDecoratorsLegacy} = require('customize-cra')

module.exports = override(
    addDecoratorsLegacy()
)

项目目录

项目结构

src/Another.js

import React, { Component } from 'react'
import withCopyright from './withCopyright'

@withCopyright

class Another extends Component {
    render() {
        return (
            <div>
                Another {this.props.name}
            </div>
        )
    }
}

export default Another

src/App.js

import React, { Component } from 'react'
import withCopyright from './withCopyright'
import Another from './Another'

 class App extends Component {
    render() {
        return (
            <div>
                App
                <Another name='组件' />
            </div>
        )
    }
}

export default withCopyright(App)

src/index.js

import React from 'react'
import { render } from 'react-dom'
import App from './App'

render(
  <App />,
  document.querySelector('#root')
)

withCopyright.js

import React,{Component} from 'react'

const withCopyright = (YourComponent) => {
    return class withCopyright extends Component {
        render(){
            return(
                <>
                    <YourComponent {...this.props}/>
                    <div>&copy; 2020 &emsp;raphael&nbsp;哈哈哈</div>
                </>
            )
        }
    }
}

export default withCopyright

config-overrides.js

const {override, addDecoratorsLegacy} = require('customize-cra')

module.exports = override(
    addDecoratorsLegacy()
)

本文作者： Raphael_Li
本文链接： https://lifei-2019.github.io/react7/
版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！