blocks|key|2686652|text|@符号实际上是一个JavaScript表达式currently+proposed+to+signify+|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2686653|2686654|装饰器使得在设计时注释和修改类和属性成为可能。|blockquote|2686655|2686656|2686657|下面是在没有装饰器的情况下和使用装饰器的情况下设置Redux的示例：|2686658|不带装饰器的|2686659|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);|code-block|syntax|javascript|2686660|使用装饰器的|2686661|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
}|2686662|上面的两个例子都是等价的，这只是一个偏好问题。此外，装饰器语法还没有内置到任何Javascript运行时中，它仍然是实验性的，可能会发生变化。如果你想使用它，可以使用Babel。|BOLD|2686663|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/wycats/javascript-decorators|1|https://babeljs.io/^0|0|1|M|U|0|0|0|0|0|0|0|0|0|0|0|0|2H|2B|5|1|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|F|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|1I|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1L|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1M|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1N|8|@]|D|@]|E|$S|T]]|$1|U|3|V|5|6|7|1O|8|@]|D|@]|E|$]]|$1|W|3|X|5|R|7|1P|8|@]|D|@]|E|$S|T]]|$1|Y|3|Z|5|6|7|1Q|8|@$9|1R|A|1S|B|10]]|D|@$9|1T|A|1U|1|1V]]|E|$]]|$1|11|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]|19|$5|14|15|16|E|$17|1A]]]]

The <code>@</code> symbol is in fact a JavaScript expression <a href="https://github.com/wycats/javascript-decorators">currently proposed to signify decorators</a>:

<blockquote>
 Decorators make it possible to annotate and modify classes and properties at design time.
</blockquote>

Here's an example of setting up Redux without and with a decorator:

Without a decorator

<pre><code>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);
</code></pre>

Using a decorator

<pre><code>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
}
</code></pre>

Both examples above are equivalent, it's just a matter of preference. Also, the decorator syntax isn't built into any Javascript runtimes yet, and is still experimental and subject to change. If you want to use it, it is available using <a href="https://babeljs.io/">Babel</a>.

blocks|key|2898915|text|非常重要！|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2898916|这些道具被称为状态道具，它们与普通道具不同，组件状态道具的任何更改都会一次又一次地触发组件呈现方法，即使您不使用这些道具，因此出于性能的原因，尝试仅绑定组件中所需的状态道具，如果您使用子道具，则仅绑定这些道具。|2898917|例如:假设在你的组件中，你只需要两个道具：|2898918|2898919|ordered-list-item|2898920|2898921|+user+name的最后一条消息|2898922|，不这样做|2898923|@connect(state+=>+({+
+++user:+state.user,
+++messages:+state.messages
}))|code-block|syntax|javascript|2898924|执行此操作|2898925|@connect(state+=>+({+
+++user_name:+state.user.name,
+++last_message:+state.messages[state.messages.length-1]
}))|2898926|entityMap^0|0|5|0|1T|6|0|0|0|0|0|0|1|4|0|0|0|5|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|19|8|@]|D|@]|E|$]]|$1|K|3|-4|5|L|7|1A|8|@]|D|@]|E|$]]|$1|M|3|-4|5|L|7|1B|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1C|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1D|8|@$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|R|3|S|5|T|7|1G|8|@]|D|@]|E|$U|V]]|$1|W|3|X|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|T|7|1K|8|@]|D|@]|E|$U|V]]|$1|10|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|11|$]]

Very Important! 

These props are called state props and they are different from normal props, any change to your component state props will trigger the component render method again and again even if you don't use these props so for Performance Reasons try to bind to your component only the state props that you need inside your component and if you use a sub props only bind these props.

example:
lets say inside your component you only need two props:

<ol>
<li>the last message </li>
<li>the user name</li>
</ol>

don't do this 

<pre><code>@connect(state =&gt; ({ 
 user: state.user,
 messages: state.messages
}))
</code></pre>

do this 

<pre><code>@connect(state =&gt; ({ 
 user_name: state.user.name,
 last_message: state.messages[state.messages.length-1]
}))
</code></pre>

I am learning Redux with React and stumbled upon this code. I am not sure if it is <a href="https://rackt.github.io/redux/index.html">Redux</a> specific or not, but I have seen the following code snippet in one of the examples.

<pre><code>@connect((state) =&gt; {
 return {
 key: state.a.b
 };
})
</code></pre>

While the functionality of <code>connect</code> is pretty straightforward, but I don't understand the <code>@</code> before <code>connect</code>. It isn't even a JavaScript operator if I am not wrong.

Can someone explain please what is this and why is it used?

Update: 

It is in fact a part of <a href="https://github.com/rackt/react-redux"><code>react-redux</code></a> which is used to connects a React component to a Redux store.

What's the '@' (at symbol) in the Redux @connect decorator?

我正在学习Redux with React，偶然发现了这段代码。我不确定它是否是特定于的，但我在其中一个示例中看到了以下代码片段。@connect((state) => {  return {    key: state.a.b  };})虽然connect的功能非常简单，但我不理解connect之前的@。如果我没记错...

问Redux @connect装饰器中的'@‘(at符号)是什么？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Redux @connect装饰器中的'@‘(at符号)是什么？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Redux @connect装饰器中的'@‘(at符号)是什么？
EN