react——@修饰器——高阶组件的使用——通过装饰器来调用高阶组件——简单修改样式

Posted 2022-09-26 勇敢*牛牛

使用装饰器@

装饰器 用来装饰类的，可以增强类，在不修改类的内部的源码的同时，增强它的能力(属性或方法)
装饰器使用@函数名写法，对类进行装饰，目前在js中还是提案，使用需要配置相关兼容代码库。
react脚手架创建的项目默认是不支持装饰器，需要手动安装相关模块和添加配置文件
💥安装相关模块

yarn add -D customize-cra react-app-rewired  @babel/plugin-proposal-decorators

💥修改package.json文件中scripts命令

"scripts": 
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  

💥在项目根目录中添加config-overrides.js配置文件
此文件可以理解为就是webpack.config.js的扩展文件

const  resolve  = require('path')
const  addDecoratorsLegacy, override  = require('customize-cra')

// 增强自定义给webpack添加相关配置
const custom = () => config => 
  config.resolve.alias['@'] = resolve('./src')
  return config


module.exports = override(addDecoratorsLegacy(), custom())

一般加上这个就行：

// 增量配置当前项目中的webpack配置，建议在react18中不要用
// 建议在react18中也不要用装饰器
// override 方法，如果webpack中有此配置则，覆盖，如果没有则添加
const  addDecoratorsLegacy, override  = require('customize-cra')

// 追加上一个装饰器
module.exports = override(addDecoratorsLegacy())

装饰器的使用

装饰类

装饰函数，在装饰时它没有写小括号，target它就是当前你装饰的类
添加静态方法/属性：
不是成员方法

const handle = target =>
    target.run = ()=>
        console.log("run");
    


@handle
class Demo ;
const d = new Demo();
Demo.run();

添加成员方法/属性：

const handle = target =>
    target.prototype.run = ()=>
        console.log("run");
    


@handle
class Demo ;
const d = new Demo();
d.run();

---

装饰器加上了小括号，则定义函数时一定要返回一个新函数

const handle = (msg) => target =>
    target.prototype.run = ()=>
        console.log("run",msg);
    


@handle("我爱你")
class Demo ;
const d = new Demo();
d.run();

装饰成员属性

装饰器装饰成员属性，装饰时没有写小括号

装饰器装饰成员属性，装饰时没有写小括号
target 装饰的类的实例 new Demo  this
key 当前的成员属性名称  username
description 就是当前属性在对象中它的描述 Object.defineProperty

const handle = (target, key, description) => 
  // 设置当前属性为只读属性
  // description.writable = false
  console.log(target, key, description)


class Demo 
  @handle
  username = 'abc'

---

高阶组件

定义高阶组件，用来进行全局布局
1.它就是一个函数
2.参数首字母大写，因为你传入的是一个组件，在react中组件的调用必须首字母大写
3.返回一个组件

---

高阶组件的使用场景

1, 需要代码重用时, react如果有多个组件都用到了同一段逻辑, 这时,就可以把共同的逻辑部分提取出来,

利用高阶组件的形式将这段逻辑整合到每一个组件中, 从而减少代码的逻辑重复。

2, 需要组件增强优化时, 比如我们在项目中使用的组件有些不是自己写的, 而是从网上C下来的,

但是第三方写的组件可能比较复杂, 有时不能完全满足需求, 但第三方组件不易修改, 此时也可以用高阶组件,

在不修改原始组件的前提下, 对组件添加满足实际开发需求的功能。

---

高阶组件的实现方式

高阶组件的实现方式有两种：

1, 属性代理: 通过创建新组建来包裹原始组件, 把原始组件作为新组建的子组件渲染

功能: 可实现对原始组件的 props数据更新 和 组件模板更新。

下面是实现属性代理的代码片段：

(1), 新建高阶组件文件 MyHOC.jsx

function MyHoc(OldCom)
      return class NewCom extends React.Component
        render()
            let newProps =  age: 10, sex: '男' 
            return (
              <OldCom ...newProps ></OldCom>
            )
        
      
    

// 导出高阶组件函数
export default MyHOC;

// 属性代理: 通过创建新组建来包裹原始组件, 把原始组件作为新组建的子组件渲染
// 功能: 可实现对原始组件的 props数据更新 和 组件模板更

(2), 在文件中创建函数 函数的参数是一个组件OldCom(参数可以自定义), 函数的返回值也是一个组件 NewCom(自定义)

---

反向继承: 通过创建新组建继承自原始组件, 把原始组件作为父组件
功能: 可实现对原始组件的state状态数据更新 和 组件模板更新。

下面是实现反向继承的代码片段：

function MyHOC (OldCom)
      return class NewCom extends OldCom
        componentDidMount() 
          this.setState( name: '李四' )
        
        render() 
          return super.render()
        
      
    

// 导出高阶组件函数
export default MyHOC;

 // 反向继承的state数据, 不能在render中改, 会进入死循环
 // 一般在生命周期函数或自定义函数中更新state

---

简单的样式修改

一、没有使用cssModule时，只能直接导入

import './style.css'
<div className="todo-title">任务列表</div>

注意手动添加标识符
例如：

.todo-title 
  color: red;

二、 在react中create-react-app工程，它内置了cssModule功能，但是文件后缀一定要有xxx.module.css/scss
如果有scss文件，必须得安装yarn add sass

import styles from './style.module.css'

引用：

<div className=styles.title>任务列表</div>
<span className=done ? style.title : ''>title</span>

通过装饰器来调用高阶组件

完成修饰后类组件导出：

@withLayout
class Child extends Component
	render() 
	        return ()
	

export default Child;
//export default withRouter(Child);

装饰器：装饰一个类，可以写很多个,执行的顺序是从上到下，从左到右。