react杂记

react学习过程中的一些记录~

现在我们已经清楚,React的美妙和本质与浏览器或DOM无关,
我们认为React的真正基础是关于组件和元素的质朴想法:用声明式的方式来描述任何你想渲染的东西。

virtual Dom

virtual Dom

react本身就是帮我们管理view的,它提出了一个virtualdom的概念,在虚拟dom中,react
会去检查它与浏览器dom有什么不同,然后去更新dom树中发生了改变的子节点。

我们编写了react中的render()方法,然后去设置我们需要的一些状态,定义好这个组件后,当组件渲染完成后,组件发生变化,我们只需要修改state,react会替我们更新这些dom到浏览器中,虚拟dom也可以在服务器端渲染。

React的组件使用特定的声明式样式书写,不像jQuery或其它传统JS库,你不与DOM直接交互。当背后的数据改变时,React接管所有的UI更新。

作为开发人员,我们只需要开发组件,然后去管理组件本身的状态。

在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造
是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React当前
整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分
进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环
EventLoop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又
B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复
杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是
极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,
在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体
的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

Component

所谓组件,即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成,
将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体UI的构建。

对于MVC开发模式来说,开发者将三者定义成不同的类,实现了表现,数据,控制的分离。
开发者更多的是从技术的角度来对UI进行拆分,实现松耦合。
对于React而言,则完全是一个新的思路,开发者从功能的角度出发,将UI分成不同的组件,每个组件都独立封装。

在React中,你按照界面模块自然划分的方式来组织和编写你的代码,对于评论界面而言,
整个UI是一个通过小组件构成的大组件,每个组件只关心自己部分的逻辑,彼此独立。

component

React认为一个组件应该具有如下特征:
(1)可组合(Composeable):一个组件易于和其它组件一起使用,或者嵌套在另一个组件内部。
如果一个组件内部创建了另一个组件,那么说父组件拥有(own)它创建的子组件,通过这个特性,一个复杂的UI可以拆分成多个简单的UI组件;
(2)可重用(Reusable):每个组件都是具有独立功能的,它可以被使用在多个UI场景;
(3)可维护(Maintainable):每个小的组件仅仅包含自身的逻辑,更容易被理解和维护;