使用装饰器@
装饰器 用来装饰类的，可以增强类，在不修改类的内部的源码的同时，增强它的能力(属性或方法) 装饰器使用@函数名写法，对类进行装饰，目前在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 (
)
}
}
}
// 导出高阶组件函数
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'
注意手动添加标识符 例如：
.todo-title {
color: red;
}
二、 在react中create-react-app工程，它内置了cssModule功能，但是文件后缀一定要有xxx.module.css/scss 如果有scss文件，必须得安装yarn add sass
import styles from './style.module.css'
引用：
{title}
通过装饰器来调用高阶组件
完成修饰后类组件导出：
@withLayout
class Child extends Component{
render() {
return ()
}
}
export default Child;
//export default withRouter(Child);
装饰器：装饰一个类，可以写很多个,执行的顺序是从上到下，从左到右。
好文推荐
您阅读本篇文章共花了：
发表评论