React 工作思路和设计封装的一些思考

文档中的代码仅仅是示意

一、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其实实现的功能就是对传统的已经实现的功能的封装。