React-Native_001 组件拆分

组件拆分，在react中就是将组件尽可能的细分，便于复用和优化。拆分的具体原则：

• 尽量使拆分后的组件更容易判断是否更新

• 尽量使拆分组件的props和state数据扁平化

 

问题描述：

        在目前存在的实例中，代码结构如下图所示：

在App.js中定义了两个输入框和一个按钮，实现如下登录界面：

        因为此时的页面是一整个的组件，所以想将它进行拆分，分解为更小的组件来实现。

解决方法：

        为了实现组建拆分，新建一个pages目录并新建一个js文件，取名为Login.js，然后在此文件里编写页面内容，然后将它引入到App.js文件中即可

a、新建文件：

b、定义组件：

c、引入定义的组件，实现组建拆分：

d、效果：

        与之前并没有区别。

附：

        由上面的步骤已经实现了组件的拆分，将原本一个大的View组件拆分了出来，还可以继续将输入框等细化拆分。

        在pages目录并新建一个Input.js文件：

        然后在Login.js中引入并应用即可：

品略图书馆 http://www.pinlue.com/