React 基础（二）：组件的嵌套

2016-10-13 本文已影响844人与蟒唯舞

所谓组件，即封装起来的具有独立功能的 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 传入值。

React 基础（二）：组件的嵌套

猜你喜欢

热点阅读