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)。

react基础UI组件设计构建_第1张图片

 

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

单一职责原则

1.每个组件只做一件事

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

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

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

 

 

 

 

你可能感兴趣的:(前端开发,react)