第一节:如何开始react和了解react的概念
1.React是什么
react是Facebook 开发出来用于促进UI交互,创建带有状态的,可复用的UI组建的UI库!Feacebook的产品广泛运用这技术,Instagram.com(一款图片分享应用)基于react开发出来的。(这里的理解难点在于 带有状态的,可复用的UI组件。也就是一个UI组件,它带有状态属性,并且可重复使用!)
react的最大的卖点就是,react不仅可以在浏览器端使用,还可以在服务端使用,还可以两端一起使用!
react的底层的概念:react运用的是Virtual DOM(虚拟DOM),然后根据UI组件的状态变化,有选择的渲染DOM的节点树!它尽可能的操作最少的DOM来更新UI组件。
2.虚拟DOM是如何工作的?
想象下,你建立一个关于人的对象。这对象拥有人的每一个属性,然后这对象就像镜子一样,映射出一些人中每一个人的所有属性。这就是React与DOM的主要关系。
(我是这么理解的,React的虚拟DOM尽可能的拥有DOM的一切属性,然后在应用中使用虚拟DOM映射出当前应用需要的所有DOM节点!)
现在,如果我们给这个对象,添加一个胡子、一些肱二头肌、Steve Buscemi 的眼睛(给人对象的某个实例添加这些)。在react中,当我们需要这些变化产生,(react)会发生两件事。第一件事,就是react会运行"差异"算法,也就是前跟后发生了哪些变化。第二件事,就是把这种"差异"算法的出的结果更新到DOM上(应该是虚拟DOM)
React的这种运行模式不同于依照变化前的人,然后开始重新把这些变化后的人塑造出来(我是这里理解的,原本的DOM要变化一个节点,需要新建一个节点再把变化加上去,然后再去替换之前的节点。而react的方式,就是在它自己的虚拟DOM上直接把需要变化的地方,变化下OK了)。它只需要换下脸和手臂。这就意味着,如果你想要在input输入框中把一些文本渲染出来,只要输入框的父节点没有安排改变,它将会保持原状!(只修改要变化的,不要变化的保持原状!)
3.开始React的准备
第一步,下载开发包。下载地址:
你也可以用bower安装新版的react。