React学习拾遗1

React的绘制思路

1. React是用于构建用户界面的 JavaScript 库。
2. 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默认情况下会压缩到一起进行。此部分看代码。