所謂組件，即封裝起來的具有獨立功能的 UI 部件。React 推薦以組件的方式去重新思考 UI 構(gòu)成，將 UI 上每一個功能相對獨立的模塊定義成組件，然后將小的組件通過組合或者嵌套的方式構(gòu)成大的組件，最終完成整體 UI 的構(gòu)建。
在 React 中，你按照界面模塊自然劃分的方式來組織和編寫你的代碼，對于評論界面而言，整個 UI 是一個通過小組件構(gòu)成的大組件，每個組件只關(guān)心自己部分的邏輯，彼此獨立。
評論界面
React 認為一個組件應(yīng)該具有如下特征：
- 可組合（Composeable）：一個組件易于和其它組件一起使用，或者嵌套在另一個組件內(nèi)部。如果一個組件內(nèi)部創(chuàng)建了另一個組件，那么說父組件擁有它創(chuàng)建的子組件，通過這個特性，一個復(fù)雜的 UI 可以拆分成多個簡單的 UI 組件
- 可重用（Reusable）：每個組件都是具有獨立功能的，它可以被使用在多個 UI 場景中
- 可維護（Maintainable）：每個小的組件僅僅包含自身的邏輯，更容易被理解和維護
下面我們來看看 React 中到底是如何實現(xiàn)組件的復(fù)用的，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>React 組件的嵌套</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<script src="lib/react.js"></script>
<script src="lib/react-dom.js"></script>
<script src="lib/browser.min.js"></script>
<script type="text/babel">
var Search = React.createClass({
render: function () {
return (
<div>
{this.props.searchType}: <input type="text" />
<button>Search</button>
</div>
);
}
});
var Page = React.createClass({
render: function () {
return (
<div>
<h1>Welcome</h1>
<Search searchType="Title" />
<Search searchType="Content" />
</div>
);
}
});
ReactDOM.render(<Page />, document.getElementById('app'));
</script>
</body>
</html>
在這里我們創(chuàng)建了一個 Search 組件，然后又創(chuàng)建了一個 Page 組件，然后我們在 Page 組件中調(diào)用 Search 組件，并且調(diào)用了兩次，這里我們通過屬性 searchType 傳入值。
