关于 react 中 jsx 深入了解

原始javascript 模板插入要将html 代码的内容转化为字符串，其中若遇到一些特殊字符则需要进行转义，例如" 要变成 \" ,而且这样做代码可读性差，所以这种方法并不适合生产开发。jsx 的出现就解决了以上问题，react 中用jsx 直接返回 html 代码，也能在浏览器上显示出来，那么jsx 到底是什么？

jsx 是fackbook为react框架开发的一个语法糖，其中x为xml, 其实它本质还是会被解析成js,因为只有这样浏览器才能识别出来，之所以要写成jsx是为了代码的可读性和可维护性。下面来看看react 官网jsx 的写法

 1 var Hello = React.createClass({
 2   render: function() {
 3     return <div>Hello {this.props.name}</div>;
 4   }
 5 });
 6 
 7 ReactDOM.render(
 8   <Hello name="World" />,
 9   document.getElementById('container')
10 );

可以看到代码第三行直接return 一行 html 标签，这在原始javascript 并不可行，实际上它非jsx写法是以下样子：

 1 var Hello = React.createClass({
 2   displayName: 'Hello',
 3   render: function() {
 4     return React.createElement("div", null, "Hello ", this.props.name);
 5   }
 6 });
 7 
 8 ReactDOM.render(
 9   React.createElement(Hello, {name: "World"}),
10   document.getElementById('container')
11 );

如果想要使用jsx的话，除了引入react库文件外，还要有相关的解析，官方推荐用npm 安装相关文件,如果不想用npm的可以下载官网相关的压缩包，然后引入html中

1 <script src="./react-15.2.1/build/react.js"></script>
2     <script src="./react-15.2.1/build/react-dom.js"></script>
3     <script src="./react-15.2.1/build/browser.min.js"></script>

来源：https://www.cnblogs.com/benstos/p/5970598.html

标签

react

jsx