React.render

// 用于获取createElement或者jsx通过babel编译的虚拟节点

// 指定html的节点渲染

react源码初步分析_react


虚拟节点如上图

在render函数里面进行判断

是否有虚拟节点的内容 属性 标签 子节点

多次加载会对比 上下两次加载的虚拟节点的数据结构 也可以说是书

通过diff算法来对比 一层一层的对比差异,来告诉js最终只要渲染某一个dom

而不是全部加载,移除的时候也可以精准的知道变化

判断渲染的内容 是否是类组件还是函数组件 然后对应处理方法

React.createElement (‘div’,null,child,child) //child指可以嵌套使用

//这个是react原生写法 jsx是react模板写法

const element = < div>123< /div> // 这个是jsx JSX是一种JavaScript的语法扩展,运用于React架构中。

"babel-core": "^6.26.3",
"babel-plugin-transform-react-jsx": "^6.24.1",// 编译jsx
"babel-preset-env": "^1.7.0",

三个核心用于编译react 通常我们使用es6 es7一些老版浏览器支持的不是很好,所以我们通过Babel可以使用高级语法,它会帮我们编译成兼容版本的js

在数据流控制的方面,
react是单向的,异步的,会把多次修改的state,存到数组里面,等一段时间刷新取最新的值
而vue是双向的,通过把数据存到数组里面形成依赖,进行每次变化的监听,来改变依赖数组,从而通知观察者去渲染数组,
get触发依赖收集,set改变依赖变化

react与vue的路由其实都是差不多的监听浏览器的history与hash变化

而vuex是全局的,react-redux却是需要注册到组件里面