记录jsx

前言

最近学习使用了react和vue二者都牵扯使用了jsx，最近要做一个总结,并且理出一个自己的理论体系这里做一些过程记录。

jsx原理

jsx的存在意义

jsx本省是一个协议，存在是为了在js中写xml类似的语法。

jsx中的大小写

jsx中的标签如果是大写字母开头则以函数形式传递,小写字母开头则以字符串传递。

jsx和bable的关系

现在的浏览器支持jsx语法的不多，所以一般把jsx通过Babel转换为javascript语法 编译后的结果类似

<!--有一个很重要的代码块,在vue和react中都有出现-----此例子说明了虚拟树构建过程是个递归过程-->
return (
    "div",
    { className: "greeting" },
    React.createElement("h1React.createElement", { foo: "bar" }, "Hello!"),
    React.createElement("h2", null, "Good to see you ", name)
  );

createElement(
  'div',
  {
  },
  [
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

Babel解析jsx的方式就是分析标签用createElement,React.createElement这类函数处理分析出来的结果所以这类函数是坑定可以替换的babel-preset-react就干这些事。

测试如下

第一组

webpack配置

    {
		test: /[\.jsx|\.js]$/,
		use: [{
			loader: "babel-loader",
			options:{
				compact: false,
				presets:["react","env"]
			}
		}]
	}

输入

<Index>123</Index>

输出

第二组

其他不变 输入改成

/** @jsx foo */  //增加了这行代码
<Index>123</Index>

产生

渲染函数被替换了

测试大小写

const Sum = (...args) => args.reduce((a, b) => a + b, 0);

<Sum a="3" b='4'><div></div></Sum>
/** @jsx calc */
function calc(operation, props, ...args) {
  	return props.a + props.b
}

输出

计算测试

完毕