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存在的目的就是让组件来改变。
关于组件的生命周期和后续知识,见下篇(正在努力整理。。。)