技術標籤：React知識庫reactjs裝飾器babelredux

大家好，都吃晚飯了嗎？我是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主入口檔案 */
<Provider store={store}>
    <div className="App">
    </div>
</Provider>

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 <>
            <p>值：{this.props.reducer.num}</p>
        </>
    }
}

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 <>
            <button>點選+1</button>
            <p>值：{this.props.reducer.num}</p>
        </>
    }
}

export default Demo

這樣子似乎可以更好理解了呢

原理

核心是利用了裝飾器對原先的類進行修改，把store的引數植入類的props裡面