React的绘制思路
- React是用于构建用户界面的 JavaScript 库。
- React每一帧都是通过虚拟DOM计算生成的。
- 有点像绘制动画。每画一次，输出的都是动画的一帧。render每运行一次，返回的都是一副新的DOM地图。
- 至于具体从虚拟DOM转化为真正的DOM，这件事会由react-dom库自行处理，不用考虑这部分的优化问题。（涉及diff算法）
- React不负责数据的计算（简单说，Vue中的computed/watcher/filter都需要自己写了）
- React只有在主动运行render之后才会更新页面。（所谓：可控。如果数据不合格，你可以不进行此次更新）
React HelloWorld：http://js.jirengu.com/tocuv/edit?html,js
第一组是原生写的，第二组是React，实现了点击按钮改变数字的功能。
作为一个先学Vue的小菜，我觉得这里为什么React不好学的原因。
比如说，想装修房子：
jQuery的习惯是操家伙上，直接改，大不了再改回来；
Vue的习惯是拿原图做标注，图上画个红圈说沙发搬走，它就搬走，不画的地方不看；
React，是拿一个效果图，不管原来长什么样子，反正装完了要跟我效果图一致。。。
React每次进行setState操作，都是当前组件下一帧应该展现出来的形态，与前面的状态无关。
React的组件
React每次绘制都是重新计算。对于想复用的组件，我们通常是写一个构造函数/类，通过这个函数构造一个新对象，这个对象中会有自己的属性。
现在的问题：如果每一个组件都用最简单的function构造，你会发现，被嵌套进去的组件是不会被重新render的。
在每一帧内，React是静态的。
可以看到Box的render不会在点击按钮后运行。
如果说React每次render是横轴，那么指定组件就是纵轴。需要一个机制，将不相连的每一帧之间的规则串联起来。
Vue是按纵轴写，React是按横轴写
组件写法：
React的function组件示例：http://js.jirengu.com/goyuv/edit?html,js,output
React的class组件示例：http://js.jirengu.com/zenah/31/edit?html,js,output
class Box extends React.Component{
// ---------- CONSTRUCTOR ---------- //
constructor(props){
super(props); // super关键字获取属性
this.state = {
number: 0
}
}
// ---------- FUNCTIONS ---------- //
add(){
// this.state.number+=1;
// 这里的this是undefined。。。
// 因为React调用时：onClick.call(undefined, args...);
// React强制将this改成了undefined！！！
// 另外直接改this.state.XXX没用。
this.setState({
number: this.state.number+1
})
}
sub(){
this.setState({
number: this.state.number-1
})
}
// ---------- RENDER ---------- //
render(){
return React.createElement("div", null,
React.createElement("span", null, this.state.number),
// onClick中是两种解决this强制转化为undefined问题的方法：
React.createElement("button", {onClick: this.add.bind(this)}, "+1"),
React.createElement("button", {onClick: ()=>this.sub()}, "-1")
)
}
}
// ---------- MAIN ---------- //
function render(){
ReactDOM.render(React.createElement(Box, null),document.getElementById("root"))
}
render();
- 关键字super用来继承全部props；
- React调用组件内方法时：onClick.call(undefined, args...); 所以组件内方法的this默认为undefined。需要手动重新绑定；
- setState默认情况下会压缩到一起进行。此部分看代码。
