1.1 react简介
react并不是完整的mvm/mvvm框架，专注于提供清晰、简洁的view层解决方案。
传统开发模式，要更新页面需要手动操作dom元素。如图1.1所示，react在dom上封装了一层，把react并不是完整的mvm/mvvm框架，专注于提供清晰、简洁的view层解决方案。
传统开发模式，要更新页面需要手动操作dom元素。如图1.1所示，react在dom上封装了一层，把dom树转化为javascript对象树，即virtual dom,每次数据更新，更新virtual dom，并和之前的virtual dom做对比，对变化部分做批量更新。dom树转化为javascript对象树，即virtual dom,每次数据更新，更新virtual dom，并和之前的virtual dom做对比，对变化部分做批量更新。
图1.1 react dom更新
1.2 jsx语法
在virtual dom树中，创建的虚拟元素分为两类，dom元素和组件元素，分别对应着原生dom元素与自定义元素。
virtual dom其实就是带有描述的json树，通过递归的方式根据每个结点描述进行渲染，得到dom树。
jsx将html语法加入到javascript代码中，再通过编译器如babel转化到纯javascript后由浏览器执行，jsx语法使对组件结构的描述更加简洁，不然自己就得写出json对象树。
在jsx中，html标签首字母小写，对应dom元素，组件元素的首字母大写。在一个组件的子元素位置使用注释要用{}包起来，如{/*xxxxx*/}的形式。
在jsx中，dom元素的属性都是标准规范属性，但由于class和for是js关键字，因此用classname和htmlfor代替。省略bool值，则默认为true,如<checkbox checked>。
react会将所有显示到dom的字符串转义，防止xss。可通过dangerouslysetinnerhtml属性去除。
1.3 react组件
react组件基本由3个部分组成——属性(props)、状态(state)以及生命周期方法。一旦接受到的参数或自身状态有所改变，react组件会执行相应的生命周期方法，最后渲染。
react组件构建上提供3种方法，react.createclass、es6 classes和无状态函数。
1.4 react数据流
把react组件看成函数，它接受prop作为参数，内部由state作为函数的内部参数，返回一个virtual dom的实现。
setstate是异步方法,一个周期内所有的state方法会合并操作。
prop类型：
proptypes可限制prop类型与必须的状态。
1.5 react组件生命周期
react生命周期分为两个过程：当组件在挂载或卸载时；当组件接收新的数据，即组件更新时。
挂载和卸载：
componentwillmount(),componentdidmount(),componentwillunmount()。其中componentwillmount在render方法之前执行，componentdidmount在render方法之后，组件挂载主要做组件状态的初始化。
数据更新过程：
组件自身的state更新时，依次执行shouldcomponent、componentwillupdate、render和componentdidupdate,可以通过在shouldcomponent中返回false阻止渲染。如果组件是由父组件更新props而更新的，在shouldcomponent方法之前会执行componentwillreceiveprops方法。
1.6 reactdom
只有在顶层组件以及由于react模型所限而不得不操作dom的时候才会使用。
finddomnode，返回react组件实例对应的dom结点。
react最终要将渲染的virtual dom渲染到浏览器dom中，就要使用render方法：reactcomponent render(reactelement element,domelement container,[function callback])。
对于dom操作，不仅可以使用finddomnode获得该组件dom，还可以使用refs获得组件内部的dom,例如：
<comp ref=’mycomp’>,可以通过this.refs.mycomp获得引用，对于原生dom,ref获得的是dom结点引用，react 组件元素，获得的是组件实例的引用。为了防止内存泄漏，组件卸载时，记得将所有的refs设为null。
如对本文有疑问， 点击进行留言回复！！
javascript从入门到跑路-----小文的js学习笔记（19）------- js的垃圾回收机制
Agora 开源 | 一个 Demo，帮你快速实现社交直播四大场景
我要评论
网友评论