[英]What is the use of components in ReactJS instead of a single variable
I started to study ReactJS and can't understand the purpose of components.开始研究ReactJS,看不懂组件的用途。 for instance lets have a component:例如让我们有一个组件:
var QuoteMaker = React.createClass({
render: function () {
return (
<blockquote>
<p>
The world is full of objects, more or less interesting; I do not wish to add any more.
</p>
<cite>
<a target="_blank"
href="#">
Douglas Huebler
</a>
</cite>
</blockquote>
);}});
why can't we just use为什么我们不能使用
var thisVar = (
<blockquote>
<p>
The world is full of objects, more or less interesting; I do not wish to add any more.
</p>
<cite>
<a target="_blank"
href="#">
Douglas Huebler
</a>
</cite>
</blockquote>
)
instead of that component.而不是那个组件。
React allow you to get a composant approach. React 允许您获得组合方法。 So you can use as a new balise text (composant) in react.因此,您可以在 react 中用作新的 balise 文本(组合)。 You can reuse this component, it will have the same behavior everywhere.你可以重用这个组件,它在任何地方都会有相同的行为。
You could.你可以。 That would be just fine.那就好了。
What you couldn't do is have a list of those, built from dynamic data.你不能做的是有一个由动态数据构建的列表。 What if you wanted multiple quotes from multiple people?如果您想要多个人的多个引用怎么办?
What if you wanted a button that randomized which quote appeared?如果你想要一个随机出现哪个引用的按钮怎么办?
What if you wanted a twitter feed, or a blog roll, or a comment section?如果您想要 Twitter 提要、博客滚动或评论部分怎么办?
You don't necessarily need the createClass
.您不一定需要createClass
。 That's a particularly old way of looking at things, and you should really be using a Babel build pipeline;这是一种特别古老的看待事物的方式,您确实应该使用 Babel 构建管道; full stop.句号。
You can simply say:你可以简单地说:
const Quote = (props) => (
<blockquote>
<p>{ props.quote }</p>
<cite >{ props.author }</cite>
</blockquote>
);
ReactDOM.render(<Quote quote="..." author="..." />, rootEl);
Now you can happily build a randomizer, or a quote API, or a quote editor, or whatever.现在,您可以愉快地构建随机生成器、报价 API、报价编辑器或其他任何东西。 The component does what it should, and it leans on input from the outside world for what it shouldn't do.该组件做它应该做的事情,它依靠外部世界的输入来做它不应该做的事情。
That way that you have in example can be created function, or stateless components, where we can use props
object, that can be passed from the parent object.这样,您在示例中可以创建函数或无状态组件,我们可以在其中使用可以从父对象传递的props
对象。
const Component = (props) => {
//access to props
}
Class components allows to store thier own state and use it to rerender the component, via this.setState()
function:类组件允许存储他们自己的状态并使用它来重新渲染组件,通过this.setState()
函数:
class Component extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
//access to both state and props
}
Why we must use components instead of js objects?为什么我们必须使用组件而不是 js 对象? Because react has its own DOM - virtual DOM
, where it listening to changes and rerendering your real DOM, you can reuse or extend this component anywhere and its also semanticly awesome.因为 React 有它自己的 DOM - virtual DOM
,它监听变化并重新渲染你的真实 DOM,你可以在任何地方重用或扩展这个组件,它的语义也很棒。
Take a look to thedocumentation about React components.查看有关 React 组件的文档。
There are lots of uses for components.组件有很多用途。 These are few:这些是少数:
As i said before, there are lots of uses for components over flat html, and basically this is the whole point of ReactJS as component based :)正如我之前所说,组件在平面 html 上有很多用途,基本上这就是 ReactJS 作为基于组件的重点:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.