react基础UI组件设计构建

 

前端组件化

从早期的jquery组件化，到ng1的driective再到ng2的components，react的components，以及 W3C Web Components 标准和其他的框架或者类库，  无一不是前端组件化的一种实现和探索。所以在前端组件化横行，三大框架一手遮天的今天，组件构建显得更为重要。

在传统的jquery组件化开发时，jq组件是结构，样式和交互分离的，分别对应html，css和js，调用时就引入组件，传人参数进行数据过滤，进行相对应的操作。交互上基本是以操作dom为主，操作哪里改变哪里。当面对高阶组件，逻辑等一旦复杂，容易产生大量的dom操作，对效率和后期的开发维护造成困难。

react的组件化

react 的核心思想：通过构建可复用组件来构建用户界面。也就是说，react的一切都是基于组件的，是面向组件编程，通过定义基础组件，然后在其他组件中可以像标签一样引用。说的白话一点，就是组件其实就是自定义的各种标签，整个react架构的项目就是一层层的组件套组件。

那么什么是react组件呢？按照 W3C Web Components 标准的理解来说，就是由属性（props）+ 状态（state）+ 生命周期  来得到一个 组件（view）。

 

所以一个组件的状态会有两种，一个外部传入的属性（props），一个内部维护的状态（st ate），配和生命周期，共同构成了一个组件及其所处的状态。其中的数据流是单向绑定的，即外部的数据一定是通过props传入，组件（view）内部发生了变化若想被外部探知，一定是由组件（view）内部暴露出。

单一职责原则

1.每个组件只做一件事

2.复杂组件拆分成小组件

3.组件尽量无状态，数据通过props 外部传入

   组件尽可能的小，能将组件的复杂度降低，提高组件的性能，譬如复杂组件props改变时，只改变对应小组件的状态，局部刷新，从而提高性能。