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 作為基於組件的重點:)