Question

我开始研究ReactJS并且无法理解组件的用途。例如，让我们有一个组件：

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>
);}});

为什么我们不能只使用

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>
)

而不是那个组件。

Answer 1

React允许您获得合成方法。所以你可以用作新的应答文本（composant）作出反应。您可以重用此组件，它在任何地方都会有相同的行为。

Answer 2

你可以。那没关系。

您无法做的是根据动态数据构建的列表。如果您想要多个人的多个引号怎么办？

如果你想要一个随机出现哪个引用的按钮怎么办？

如果您想要推特推文，博客滚动或评论部分，该怎么办？

您不一定需要createClass。这是一种看待事物的特别古老的方式，你应该真正使用Babel构建管道;完全停止。

你可以简单地说：

const Quote = (props) => (
  <blockquote>
    <p>{ props.quote }</p>
    <cite >{ props.author }</cite>
  </blockquote>
);

ReactDOM.render(<Quote quote="..." author="..." />, rootEl);

现在，您可以愉快地构建随机数发生器，引用API或引用编辑器等等。该组件做了它应该做的事情，它依靠来自外部世界的输入来做它应该做的事情。

Answer 3

功能组件

在示例中，您可以创建函数或无状态组件，我们可以使用props对象，可以从父对象传递。

const Component = (props) => {
    //access to props
}

班级组件

类组件允许通过this.setState()函数存储它们自己的状态并使用它来重新渲染组件：

class Component extends React.Component {
   constructor(props) {
      super(props);
      this.state = {};
   }
   //access to both state and props
}

为什么我们必须使用组件而不是js对象？因为react有自己的DOM - virtual DOM，在那里它可以监听更改并重新渲染你的真实DOM，你可以在任何地方重用或扩展它，它的语义也很棒。

查看有关React组件的documentation。

Answer 4

组件有很多用途。这几个：

据称，如果你的组件没有逻辑或特殊用途，只需要平面html，所以可以通过使用组件，虽然它更封装，看起来更整洁。
如果现在或将来您想要为组件使用某些逻辑，那么可以在组件中处理它。这是使用html代码块的面向对象方法。如果您来自Angular，您可以将其视为＆＃34;指令＆＃34;，来自.Net＆＃34;用户控制＆＃34;。嗯，不完全是，但目的是一样的。
调用和使用不同的库。更好的做法是不要求库作为全局变量，而只需要在组件中使用。
当然最重要的因素是：你可以利用反应＆＃34;消化循环＆＃34;。您可以选择在构建之前，渲染之前，渲染之后执行的操作等等。您可以在此处查找：https://facebook.github.io/react/docs/react-component.html

正如我之前所说，平板html上的组件有很多用途，基本上这就是ReactJS作为基于组件的重点：）

ReactJS中组件的用途是什么，而不是单个变量

4 个答案: