react--高階元件connect

connect串聯model跟元件；connect這個函數本身可以傳參，映射store的屬性；

connect() 接收四個參數，它們分别是mapStateToProps ， mapDispatchToProps ， mergeProps 和 options。

const mapStateToProps = (state)=>{return {num:state.num;} }
export default connect(mapStateToProps)(元件名稱)
           

state是model的state，項目開發中會直接解構；比如：

export default connect(({num,login})=>({num,login}))(元件名稱)
@connect(({num,login})=>({num,login}))
           

兩種寫法意義是一樣的，都是串聯model跟元件；不同點：

1. 前者是在函數元件中使用，後者是在類元件用，主要是因為函數元件内不能用@修飾器；
2. 寫的位置；前者是寫在最後面，後者寫在class類前

   

   

   用的時候你會發現頁面有警告，這個是因為experimentalDecorators沒有開啟，用了typescript裝飾器；打開vscode的setting，搜尋experimentalDecorators，改為true就可以了

Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.ts(1219)
           

具體使用方法this.props.xx

@connect(({loading})=>({load:loading}))
class Test extends PureComponent {
  render() {
    const { load } = this.props;
    return (
      <Spin spinning = {load}></Spin>
    )
 }
           

參考：

• 高階元件官方文檔
• connect英文版說明

别的部落客的一些講解：

• 掘金講解有點像中文版說明
• https://www.jianshu.com/p/21224080326e
• https://www.cnblogs.com/irobotzz/p/12292283.html
• https://blog.csdn.net/sf1989424/article/details/103161138

上面的隻能說是我淺薄的了解，剛開始接觸，自己了解的可能也不太對；要是有不對，麻煩指出。