文档中的代码仅仅是示意
一、xml可标记语言是个大的进步
极端来说,一个纯静态html文件,就是一堆xml标签,之所以当我们用浏览器打开页面能看到各种按钮,图表,那是因为浏览器是一个专门解析并可视化xml标准标签的工具软件而已,就像word能打开doc文件。同样xml在内存中也是一个树结构,即有子节点。
二、js以及样式只不过是通过documents对象对xml形成的树对象属性的修改,自然浏览器展示出来的也是变化的
三、而react只是为了简化用户对dom树的操作,根本不写html代码,模仿浏览器,使用js,借助json对象建立了react自己的dom树。
当然上边的描述自然需要代码api实现,react本身就是js写的,只是提供了几个api,只说重要的。
1.创建一个标签元素
毕竟,浏览器只认识html标签元素
<div id="name">
我是谁
</div>
封装了个react. creatElements()api来创建上边的div,即react. creatElements(“div”,{id:name},“我是谁”,…)。这样我们就可以使用react来写页面元素了。
2、把react元素放到浏览器的dom上
然而,然而,我们在js中写了很多react元素,启动html后。显然是看不到自己写的这些react元素的。
reactdom.render()函数,用来将react元素,嵌入到html中的某个标签下。
如:var myreact=react. creatElements(“div”,{id:name},“我是谁”,…)。
reactdom. render(myreact,"#app")。这个app标签是html页面中的一个xml标签。这个render函数,就是获取浏览器对象dom后,把react自己创建的元素,递归的插入点浏览器dom的对应位置,前边讲了,浏览器就是渲染内存中的xml dom树对象数据结构而已,那reactdom找到并更新了这个dom后,自然能在页面上看到react写的元素。
注意:这就要求所有的react有一个根元素
理论上讲,只要这两个api就创建了一个react前端框架,但要想流行,必须书写方便,渲染性能高,为了书写方便引入了jsx,为了渲染性能,引入了状态管理等生命周期函数。
3.jsx便捷的语法
要是像creatElements这样,创建多个嵌套的页面元素结构,程序员会疯掉,因为程序员更习惯于像xml标签那样,通过包含关系就完成了嵌套。所以react创建了jsx语法,也就是在js文件中写xml标签
上边的这句就要被改装了,
var myreact=react. creatElements(“div”,{id:name},“我是谁”,…),改装后的
jsx语法格式写法
const myreact = <div id="name">我是谁</div>;
这种写法,想嵌套那还不是一样简单,想使用变量,在jsx中使用{}即可引入外部变量了。
这样就解决了写法的便捷性问题。
插播一句:react的jsx这种写法,在浏览器中是不支持的,因为这玩意压根就是react自己搞的写法,但他很聪明,他自己写了babel工具,遍历读取js文件,碰见jsx这种咱自家的写法的时候,使用babel自动解析为creatElements这种写法,而这个方法是react的js api而已。
4.render函数的更新时机,实现渲染性能控制
就像三维数据可视化引擎一样,所有的渲染器,对性能的优化,很大程度上依赖于对是否触发更新的控制。
传统的opengl引擎,创建对象,绑定数据,渲染循环。渲染循环中也是判断数据是否有变化,才触发显卡更新绘制,osg也是一样。那么react呢,其实也一样,像osg判断实体对象的数据有没有更新,react是判断组件的状态值有没有更新,什么是组件,就是个js对象而已,有属性值,有方法函数,奥,像极了一个类class。好了,react组件内置了一个变量state,只要这个值有变化就更新渲染,用代码代表这句话就是
this.setState({text:“我是谁”}){
this. state ={text:“我是谁”};
this. render();
}
this. render(){
const myreact = <div id="name">{this.state.text}</div>;
return myreact;
}
其中this. setState在react的组件基类中component。render方法需要每个组件类自己重载,(1)那么显然就有无状态组件,写个function对象,里面扔个render函数就行了。
function mycom(){
render:function(){
const myreact = <div id="name"> “我是谁” </div>;
return myreact;
}
}
(2)有状态组件
继承react基类components传入状态属性值即可
四、mbox回想之前写react项目
用了好多action,好多store这些其实是一种模式,使上边说的对状态的更新更可控而已。你想吧,我们代码里压根没调用过setState函数,那是因为我们在store中的变量上加了发布订阅注解,这个注解的作用就是封装的setState,自然store的变化触发了渲染,而约定俗成的我们通过action函数来更新store。
明白了这个react的设计及工作思路,那么对衍生出来的各个便捷库就容易理解了,其实就是对几个基本api的封装。
每一个框架,就是几个基本的Api。api其实实现的功能就是对传统的已经实现的功能的封装。