Jsx Virtual Dom

发表于 | 分类于

  换了项目组，用react做东西也有段时间了，是时候记录一下学习使用中的遇到的一些问题。

jsx

  首先，最开始使用react就有的疑惑，render()函数里面return的很像html又不是html的东西是啥？react官网上面告诉我们这东西叫做jsx，并且推荐我们使用jsx来描述UI(其实react中也不大可能用其他方式来描述了吧..)。所以呢是事实上render()里面return的其实不是原生的html，而是react团队设计的一个描述语言。

  但是又有一点很怪，我为啥不设计的更加贴近html，jsx里面所要传递的所有props都是小驼峰形式，即使是类似于margin-top之类，原生的html的属性，也要用marginTop来指定。

  其实呢，jsx本质上是类xml语法的JavaScript扩展，jsx是React.createElement(component, props, …children)的语法糖。component满足React.Component或者ReactHtml的定义的类型(typescript 中会有@types/react可以在这里面查看)，props是一个object，不用说children肯定是close tag里面的子组件。

  这下好说了，既然jsx的props本质上该是个object，那object里面的属性就该是小驼峰命名，而且html里面的class属性在JavaScript里面是保留字，就变成了className了。如下写法可能更直观一点

1
2
3
4
render(){
  const props = {props1: value,props2: value2}
  return(<Mycomponent {...props}/>)
}

  当然了，为了不让新手一开始就迷惑，最开始的tutorial肯定不可能是这么写的。

virtual dom

  好了，第一个疑惑解决，第二个问题是，我为啥不是直接return的html，然后里面内置一些模板语法，就像以前的theamleaf，angular.js一样，完全够用啊，没必要就搞个jsx。

  因为在react设计里面，有个叫virtual dom的东西介于代码和真实dom之间。virtual dom作为UI描述存于内存，真实dom根据virtual dom描述生成。每次数据更新的后重新update virtual dom并与上一次的virtual dom比较，批量更新变化的部分。

  淦，那为啥又要搞个virtual dom？

  网上有很多说法是，直接操作dom的开销大，相比之下virtual dom快。直接操作dom，没有react的用户体验好，原理见如下文章。但是我觉得最大的好处应该是与底层解耦，与底层解耦之后，就可以跨平台。

  virtual dom是对于UI的描述应该是属于元数据，最终生成啥平台的UI完全是不知道的，于是就有了react-native跨平台了。

  最后在浏览器中，virtual dom的优化工作以及原理再以下文章中diff