ReactJS中使用组件代替单个变量有什么用

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 允许您获得组合方法。 因此，您可以在 react 中用作新的 balise 文本（组合）。 你可以重用这个组件，它在任何地方都会有相同的行为。

Answer 2

你可以。 那就好了。

你不能做的是有一个由动态数据构建的列表。 如果您想要多个人的多个引用怎么办？

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

如果您想要 Twitter 提要、博客滚动或评论部分怎么办？

您不一定需要createClass 。 这是一种特别古老的看待事物的方式，您确实应该使用 Babel 构建管道； 句号。

你可以简单地说：

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

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

现在，您可以愉快地构建随机生成器、报价 API、报价编辑器或其他任何东西。 该组件做它应该做的事情，它依靠外部世界的输入来做它不应该做的事情。

Answer 3

1. 功能组件

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

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

2. 类组件

类组件允许存储他们自己的状态并使用它来重新渲染组件，通过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 组件的文档。

Answer 4

组件有很多用途。 这些是少数：

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

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