React && Redux 学习笔记（一）

1.react的思想：

react可以用下面的公式表示： UI = render（data）；UI表示用户看到的界面，UI是通过纯函数的render将数据data渲染出来。

react一个比较重要的思想是虚拟DOM（virtual DOM），传统的前端思想：如HTML，每个元素对应一个DOM节点，HTML元素逐级包含，构成了DOM树，浏览器为了渲染HTML格式的网页，就会将HTML文本解析成DOM树，根据DOM树渲染界面给用户，当需要更改界面的时候，直接改变DOM树上的节点。

传统的DOM方法更新界面，虽然仅修改了一条JS语句，但是往往引起浏览器重新对网页进行布局，重新绘制，这样的执行过程比执行一体JS语句慢很多。

所谓虚拟DOM是对DOM树的一种抽象，它不会直接和浏览器打交道，只是仅存在于JS空间的树形结构，每次自上而下渲染react组件的时候，会将本次产生的虚拟DOM与上一次渲染虚拟DOM进行对比（这种对比的diff算法后续会介绍），然后仅渲染不同的地方即可。

2.react组件的数据：

react组件分为两种：prop和state，两者的变化都会引起组件的重新渲染，一般情况：prop组件是对外的接口，state组件是内部状态，对外用prop，对内用state。

其中prop看起来很像HTML的元素的属性，两个的区别：HTML的属性值都是字符串类型，而prop属性的值可以是任意的一种JS数据类型。在JSX中，prop属性值必须用{ }括起来。

prop有propTypes检查，就是让组件声明自己的接口规范：

Xxx.propTypes = {

name : PropTypes.string.isRequired,

value: PropTypes.number

}

上述表明name必须是string类型且必不可好，缺少了会报warning，value的值必须是数值。

react组件不能修改传入的prop的值。

state必须是一个javascript对象，改变内部state，可以通过this.setSate函数修改。

prop和state区别：

1.prop定义外部接口，state用于记录内部的状态；

2. 组件不应该改变prop的值，而state存在的目的就是让组件来改变。

关于组件的生命周期和后续知识，见下篇（正在努力整理。。。）