所谓组件，即封装起来的具有独立功能的 UI 部件。React 推荐以组件的方式去重新思考 UI 构成，将 UI 上每一个功能相对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最终完成整体 UI 的构建。
在 React 中，你按照界面模块自然划分的方式来组织和编写你的代码，对于评论界面而言，整个 UI 是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。
评论界面
React 认为一个组件应该具有如下特征：
- 可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有它创建的子组件，通过这个特性，一个复杂的 UI 可以拆分成多个简单的 UI 组件
- 可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个 UI 场景中
- 可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护
下面我们来看看 React 中到底是如何实现组件的复用的，代码如下：
<!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>
在这里我们创建了一个 Search 组件，然后又创建了一个 Page 组件，然后我们在 Page 组件中调用 Search 组件，并且调用了两次，这里我们通过属性 searchType 传入值。
网友评论