Redux @connect装饰器中的“ @”(符号处)是什么?

2020/10/12 16:21 · javascript ·  · 0评论

我正在用React学习Redux,偶然发现了这段代码。我不确定它是否特定于Redux,但我在其中一个示例中看到了以下代码片段。

@connect((state) => {
  return {
    key: state.a.b
  };
})

虽然的功能connect非常简单明了,但我@之前并不了解connect如果我没有记错的话,它甚至都不是JavaScript运算符。

有人可以解释一下这是什么,为什么使用它?

更新:

实际上,react-redux的一部分用于将React组件连接到Redux存储。

@实际上,符号是一个JavaScript表达式,用于表示装饰器

装饰器使在设计时注释和修改类和属性成为可能。

这是在不带装饰器的情况下设置Redux的示例:

没有装饰

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

class MyApp extends React.Component {
  // ...define your main app here
}

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

使用装饰器

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  // ...define your main app here
}

上面的两个示例都是等效的,这只是一个优先事项。此外,装饰器语法尚未内置到任何Javascript运行时中,并且仍处于试验阶段,可能会发生变化。如果要使用它,可以使用Babel来使用

很重要!

这些道具称为状态道具,它们与普通道具不同,即使不使用这些道具,对组件状态道具的任何更改也会一次又一次触发组件渲染方法,因此出于性能原因,请尝试仅绑定到组件组件内部需要的状态道具,如果使用子道具,则仅绑定这些道具。

例如:假设您的组件内部仅需要两个道具:

  1. 最后一条消息
  2. 用户名

不要这样做

@connect(state => ({ 
   user: state.user,
   messages: state.messages
}))

做这个

@connect(state => ({ 
   user_name: state.user.name,
   last_message: state.messages[state.messages.length-1]
}))
本文地址:http://javascript.askforanswer.com/redux-connectzhuangshiqizhongde-fuhaochushishenme.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!