react组件化设计

1，组件是React 开发框架中，最重要的设计概念。这也是React能够 帮助我们简单容易的开发复杂用户界面的有效利器。假定我们最终开发的网页应用如图所示，它的界面右1系列复杂的 控件元素组合而成。原有的设计思想是，把这些复杂的控件组合当做一个单一整体来开发，由于控件间需要相互通讯，因此不同组件间 耦合度很多，开发1个控件时，你需要考虑这个控件与其他控件的 相互联系，这样一来设计思路会变得非常复杂

2，React 的做法是，把这个界面不断的分解，一个大而复杂的控件 分解成多个小控件的相互组合，小控件还可以继续往下分割，分成 更小的更简单的控件间的组合，这种切分不断进行，直到不可以 再往下细分为⽌止。我们从图中可以看到，原来整合在一起的大块界面被虚线分解 成了多个小控件，有些小控件里面还可以再切分成多个更小控件 的组合。
组件化的本质，其实就是面向对象的设计思想。组件化可以对应于 一个类，每个类都对外输出不变的接⼝，只要接⼝不变，类与类间 的通讯可以根据接⼝进行，由此不同组件间的耦合度就降低了。 同时复杂的类可以通过若干个简单的类组合而成，这样一来，不但 可以提高组件的重用性，同时通过组合的思想来设计复杂的控件， 也极大的降低了复杂控件的设计难度

,

3，组件与函数很类似，我们先看假定我们想计算一个矩形的面积。 那么我们需要把高和宽相乘才能得到结果。

在没有函数之前，我们计算一次面积，就要把宽和高相乘一次。 计算两次面积就得相乘两次，有了函数就不一样了，函数能够把计算面积的逻辑包装起来，每次 计算面积时，不用再把计算步骤走一遍，只要把相关参数输入函数 就可以了。复杂的函数还可以通过调用多个简单的函数来实现。组件与函数的 思想是一样的，组件把界面绘制的逻辑包装起来，通过给组件传入不同的参数，进而改变组件最终显示的形态，同时复杂的组件可以 转换成多个简单组件的组合，通过不同组件的相互组合，我们能 创造出无数多个复杂的复合组件

接下来我们要构建一个Hello World组件，这个组件的功能是在 界面上打印一句话：Hello World!

要想在界面上绘制信息，我们需要 调用React 框架的render API,也就是代码要这么写

接下来，我们要通过组件化的方式实现上面的功能，我们先使用React API createClass 来创建组件对象。我们要创建一个 Hello World 组件的话，我们可以使用下面代码：

每一个组件都要导出一个接⼝叫render, React将会调用组件的 render接⼝，把它绘制到界面上。由于我们的组件是在界面上 输出语句 ：Hello World，因此组件的render内容如下

大家看到，在ReactDOM.render中，我们直接把上面生成的组件 输入，React框架会自动调用HelloWorld组件的render函数， 然后解读它返回的JSX对象，接着在DOM中添加相应元素，于是 最终语句“Hello World!" 就出现在界面上了

我们以前强调 JSX 与html 是不同的，在这里就显示了他们两者 的不同，因为在html里面是没有HelloWorld标签的，同时在JSX 中，一个标签往往对应着一个组件，在html中，是没有组件的概念 的。

组件的一大特点是可重用性，我们可以对组件进行多次调用，从而实现在界面上打印多条语句：

组件的参数化 就像函数，当输入不同的参数时，函数可以根据输入 参数，返回不同的运算结果。同样组件也可以输入参数，根据 不同输入参数，在组件绘制到界到时，显示出不同的形态。我们把组件输出的那条语句转变为组件的参数，这样输入不同 参数，组件就能在界面上显示不同语句，代码修改如下

在调用组件的同时，把参数内容输入：

由此，组件在界面上输出的内容将不再是同一条语句，而是根据 输入参数的内容而显示不同内容。

组件的孩子JSX 所代表的组件跟html标签有一个相似之处，那就是组件内部 可以再包含其他组件。那么如果一个组件包含了另一组件的话， 内部被包含的组件可以称之为外面组件的孩子，

结论： 使用React 框架开发网页运用时，使用组件是必不可免的。正是 因为组件化的设计思想，我们才能在React基础上，快速开发出 高效可重用的界面控件