react

2023-01-03 10:57| 来源: 网络整理| 查看: 265

大家好，都吃晚饭了吗？我是Kaiqisan,是一个已经走出社恐的一般生徒,我第一次见识到这个知识是在使用taro的时候看到的，当时觉得奇怪，自己写了一年的js却从来没有见到过这个语法，（但是别的语言似乎很常见吧）于是就查资料，发现这是一个装饰器语法，详细内容在这

本章不详细讲解装饰器的原理，本章讲解具体的使用方法和如何跑动项目

第一步，先安装相应的包 npm i @babel/plugin-proposal-decorators --save-dev

装饰器是ES7的语法，但是现在没有主流浏览器支持这个特性

刚刚被谷歌暴打了一顿,查了好久才知道不能兼容

第二步，完成项目配置 // 这个plugins在module里面，然后找到检测js文件的那个模块，填写在相应的plugins里面即可 plugins: [ .... ["@babel/plugin-proposal-decorators", { "legacy": true } ],

第三步，跑项目，开始写代码

第四步，编写代码

找到最外层的标签，填写provider标签（这样可以让整个app都可以获取store的数据，防止组件一层一层传递state造成代码冗杂和结构复杂）

import { Provider } from 'react-redux' // P是大写的 import store from '../redux/store' /* index.js主入口文件 */

store有一个全局参数 num

/* reducer.js */ const INITIAL_STATE = { num: '0000' } const reducer = (state = INITIAL_STATE, action) => { .... } export default reducer /* 原先写法，使用经典react框架create-react-app */ import React from 'react' import { connect } from 'react-redux' // 导入connect方法 class Demo extends React.Component { constructor(props) { super(props) this.state = {} } render() { return 值：{this.props.reducer.num} } } export default connect(( reducer ) => { return { reducer } }, null)(Demo)

明显看出，原先的写法并不简介，理解起来非常困难

然后我们改一改代码

import React from 'react' // import { Link } from 'react-router-dom' import { connect } from 'react-redux' @connect(( reducer ) => { return { reducer } }, (dispatch) => ({})) class Demo extends React.Component { constructor(props) { super(props) this.state = {} } render() { return 点击+1 值：{this.props.reducer.num} } } export default Demo

这样子似乎可以更好理解了呢

原理

核心是利用了装饰器对原先的类进行修改，把store的参数植入类的props里面

【本文地址】

react

react

今日新闻

推荐新闻