5分钟快速学会JSX

JSX: 是React引入的新的语法,从名字上我们就能看出,其实JSX的本质还是JS,它是一种 JavaScript 的语法扩展。
依照惯例,我们从一个hello world的demo来开始我们的学习
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="./lib/react.development.js"></script>
  <script type="text/javascript" src="./lib/react-dom.development.js"></script>
  <script type="text/javascript" src="./lib/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel" src="helloWorld.js"></script>
</body>
</html>

JSX代码: (由于JSX的本质还是JS,当然还是要写在JS文件里面)

const element = <h1>Hello, world!</h1>; // 这类似于HTML标签的代码就是JSX
ReactDOM.render(
  element,
  document.getElementById('root')
)

用浏览器打开,我们会看到如下显示:
在这里插入图片描述
说明,JSX代码已经生效了~

const element = <h1>Hello, world!</h1>;// 这就是JSX

接着,我们介绍一些JSX的基本语法,参考下面代码

let fruit = '苹果';
function foo(){
  // JSX本质上是普通对象
  return <div>nihao</div> // 这是返回的虚拟DOM,也是对象
  // return '<div>nihao</div>' // 这是返回字符串
}
let flag = false;
let attrs = {
  className:'active',
  abcHello:'123',
  nihao: 'hello'
}
const element = (
{/*必须有根元素*/}
  <div {...attrs}> {/*JSX可以添加自定义属性,并且属性名才用驼峰式;属性添加可以使用延展运算符*/}
    {/*注释的标准*/}
    <div>
      <ul>
        <li>{fruit}</li> {/*支持变量*/}
        <li>{1+2}</li> {/*支持简单的表达式*/}
        <li>orange</li>
        <li>{foo() + '<div>hi</div>'}</li>
        <li>{flag?'是':'否'}</li>{/*支持三元表达式*/}
        <input type="text"/> {/*标签必须要闭合,否则会报错*/}
      </ul>
    </div>
  </div>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

界面显示如下:
在这里插入图片描述
如图所示,所有的JSX代码都生效了,所以下面我们来总结一下JSX的语法规范

JSX基本语法:

1.JSX元素: 区分于DOM元素,本质上是普通对象,是组件的基本组成单元
2.JSX特性:

元素可以嵌套,但是必须有根元素
标签必须闭合,及时标签中没有内容也需要闭合,例如: img, input

3.JSX嵌入式表达式: 本质也是表达式
4.JSX属性:

JSX可以添加自定义属性,并且属性名才用驼峰式
属性添加可以使用延展运算符

了解了JSX的语法规范,我们来探求一下JSX的本质

JSX的本质:

我们说JSX的本质是JS,这样说是没有问题的,但是JSX到底是怎样实现的呢?请看下面的代码:

let li1 = React.createElement('li',{key:1},'apple');
let li2 = React.createElement('li',{key:2},'orange');
let li3 = React.createElement('li',{key:3},'lemon');
// let element = React.createElement('ul',{className: 'active'},li1,li2,li3); 跟下面一样
let element = React.createElement('ul',{className: 'active'},[li1,li2,li3]);
console.dir(element)
ReactDOM.render(
  element,
  document.getElementById('root')
);

控制台打印element如图:
在这里插入图片描述
从上图我们不难发现element的本质是

React.createElement(type, props,...children)

总结:

JSX的本质就是利用createElement方法创建了element 虚拟DOM的机制

这样理解就容易多了~

5分钟快速学会JSX

5分钟快速学会JSX

JSX基本语法:

JSX的本质:

总结:

JSX的本质就是利用createElement方法创建了element 虚拟DOM的机制

猜你喜欢