大家好！

本次分享的主题是React组件，当中涉及React的概念和生命周期，以及React组件的开发方式。接下来我们一起看下本次分享的大纲。第一部分是“认识React组件”，当中介绍React组件的概念以及工作原理；第二部分向大家介绍组件化思维和开发方式；第三部分，我带领大家亲手写一个React组件，功能是在AndroidStudio控制台中输出JS代码的日志，并在这个过程中阐述React组件的基本写法和生命周期。

什么是React组件？

开门见山，我先贴上一个React组件的截图，这个组件封装了一个TextView和ImageView组件。这种代码使用的React推荐的JSX语法，实际上就是普通javacript的一层封装。接下来我们去React-native官网看下它们对React组件的介绍。可以看到，React官网上已经提供了很丰富的React-native组件来应对原生应用的UI要求，并且我们相信随着React的不断发展，以及开发人员的丰富，使用React组件开发原生应用将会变得越来越容易。
按照传统组件设计方法论，一个组件(或者说一个对象)对外具有属性、事件、接口，对内有内部属性、状态。对外，我们说这个组件暴露的接口能满足绝大部分UI需求，对内我们通过修改属性来改变她的外观，在事件处理上无论是基于回调还是基于监听都能在特定的输入情况下有特定的表现。
那么相比传统的组件设计，React组件有什么新的设计吗？答案是肯定的。React组件设计中，有两个非常重要的元素，就是状态和属性。React首次将组件的状态提升到了一个新的高度，React规定，状态的改变一定会改变组件的表现，会导致组件的重新渲染 ( 并不一定导致View重新绘制，这里说的表现是指外表和行为)。也就是说，React不仅仅是面向对象的，还是面向状态的。具体什么意思呢？
大部分的组件应该从props属性中获取数据并渲染。但有的时候组件得相应用户输入，同服务器交互，这些情况下会用到state。React的官方说法是：尽可能的保持你的组件无状态化。为了实现这个目标，得保持你的状态同业务逻辑分离，并减少冗余信息，尽可能保持组件的单一职责。

组件化带来了什么？

接下来大家看一张图，这是咱们主项目中的借出概要页面，这个页面随着时间轴变化有十几种不同的变化，复杂的逻辑状态让开发人员苦不堪言。那么，接下来我们看一下React是如何解决这个问题的？首先，我们拿到这样一个原型图，我们需要把这个UI界面拆分因为一个组件数，拆分的原则尽可能的保持你的组件无状态化。尽可能把一个复杂的UI界面尽可能拆分到无法分解的程度，到了组件树的细枝末节不存在复杂UI逻辑，而是一个个最简单的组件。其次，我们根据模块进行组件开发，每一个组件都能根据输入的数据展示出特定的UI效果。最后，我们把这一个个组件拼接起来，传递数据流，我们的工作就完成了。

听起来很棒！事实上，这项技术技术的革新也带来了开发方式的变革。单个组件是一个状态机，特定输入对应特定的输出，也就决定了单个组件的逻辑变得简单许多。第二，组件和组件之间几乎完全解耦，护卫黑盒。第三，跨平台。一单学会了React开发，也就是iOS，Android，web段的前段需求，你都可以接了。

组件的生命周期？

一个事物总有创建和消逝的过程，React组件也是一样。