React全栈 读书笔记 【第三章 初始React】

React
1.组件：一切基于组件。定义组件，想引用 普通html标签一样引用。
2.jsx：一种支持html与js混写的
3.virtual DOM：使用javasctipt创建类似于Dom树一样的对象，然后通过diff算法算出变更的节点，通过patch方法仅更新改变的真实DOM。

性能：通过javacript对象的diff算法换取频繁操作真实DOM的巨大开销。

JSX：语法
1.html标签第一个字母小写
2.定义的组件 第一个字母大写
3.javascript 中保留或者关键字 替换写法：例如 class =》className
4.省略属性值时，默认为true 。例如 有属性display ，默认为true
5.注释 使用｛/* 注释的内容 */｝
6.属性扩散  使用｛...props｝
7.编译




生命周期
初始化：
1.getDefultProps  初始化调用一次，设置this.props属性  基本不用管理
2.getInitialState 初始化调用一次，设置this.state属性  在ES6中已经被constructor 替代，直接在constructor 中设置初始state属性值
3.componentWillMount  初始化在render之前执行一次 此时没有dom节点，只能设置一些渲染数据处理
4.render （必须方法）初始化执行，不应该有修改state或者交互方法，渲染数据，返回reactElement
5.componentDidMount  初始化render在之后执行一次  此时可以获取dom节点，长用于获取dom节点或者ajax等操作


组件props跟新
1.1.conponentWillReceiveProps（object nextprops） 接受新的props，长与this.props 比较，然后设置this.state 来跟新render
2.shountComentUpdate 返回true ，执行之后的操作；返回false，中断操作。默认返回true
3.compomentWillUpload 在render之前执行
4.render
5.componentDidUpdate 在render之后执行
组件卸载
componentWillUnmount  卸载组件之前调用




无状态函数组件
没有内部的state，不需要生命周期。只是渲染props的数据


state设计原则
1.尽量使用轻量级的json格式定义
2.能在render中计算出来的值就不要定义在state中


DOM操作
1.在需要获取dom的节点元素上使用 ref 标记 例如 ref='age'
2.在方法上使用 this.refs.age 获取指定的dom节点


Viryrul Dom
实质：使用javascript.createElement 创建出一个类似于 dom树的 对象 
     使用ReactDom的render方法将 虚拟dom 插入到真实的dom中去
整体流程：
1.构建Virtual Dom树结构
2.将Virtual Dom插入到真实的
3.变化后生成新的Virtual Dom树
4.通过diff算法算出来两棵树的不同
5.更新变更的dom节点