解读在React中使用JSX语法 / 开普饭

JSX是JavaScript的一种语法扩展，被应用到React体系结构中，它的格式与模板语言类似，但实际上完全在JavaScript内部实现。组成React应用程序的元素最小单元，JSX用于声明React中的元素，React使用JSX来描述用户界面。

01使用纯JS方式来创建虚拟DOM

在React中提供相应API来创建虚拟DOM对象，对应的API有如下两个。

// 1、创建虚拟DOM
 React.createElement('h1',{id:"xiaojia"}, "XiaoJia love MeiMei"); // 参数1: 要创建的元素类型，字符串，表示元素的名称
 // 参数2: 是一个对象或null，表示当前这个DOM元素的属性
 // 参数3: 子节点（包括其他虚拟DOM获取文本子节点）
 // 参数n：其他子节点

 // 2、使用ReactDOM把虚拟DOM渲染到页面上
 // 参数1: 要渲染的那个虚拟DOM元素
 // 参数2: 指定页面上一个容器
 ReactDOM.render(vDom1, document.getElementById('test1'))123456789101112复制代码类型：[javascript]

虚拟DOM对象最终都会被React转换为真实的DMOM对象

我们编码时基本只需要操作react的虚拟DOM相关数据，React会转换为真实DOM变化而更新界面

完整案例：使用纯JS方式创建虚拟DOM

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>第二天 JSX语法简介</title>
</head>
<body>
 <div id="test1"></div>
 <div id="test2"></div>

 <script src="../lib/react.development.js"></script>
 <script src="../lib/react-dom.development.js"></script>
 <script src="../lib/babel.min.js"></script>

 <script type="text/javascript">
 const msg = 'I love MeiMei'
 const myId = 'xiaojia'

 // 1、创建虚拟DOM
 const vDom1 = React.createElement('h2',{id:myId},msg);
 const vDom2 = React.createElement('h3',
 {id:myId.toLocaleUpperCase()},msg.toLocaleUpperCase());

 // 2、渲染虚拟DOM
 ReactDOM.render(vDom1, document.getElementById('test1'))
 ReactDOM.render(vDom2, document.getElementById('test2'))
</script>

</body>
</html>123456789101112131415161718192021222324252627282930313233复制代码类型：[javascript]

02使用JSX语法来创建虚拟DOM对象

使用纯JS方式来创建虚拟DOM太麻烦了，而且可读性比较差，页面结构不够直观。于是React提供了JSX的语法来书写。

JSX的标签写法既不是字符串，也不是HTML，它是JavaScript的语法扩展，全称叫做JavaScriptXML，用来创建React虚拟DOM对象。

其语法比较简单，标签名可以任意，可以是HTML标签也可以是其他标签，标签属性也可以任意，可以是HTML标签属性或者是其他属性，

基本语法规则

遇到<开头的代码，以标签的语法解析：html同名标签转换为html同名元素，其他标签需要特别解析

遇到以{开头的代码，以JS语法解析：标签中的js代码必须用{}包含

可以带引号，也可以不带引号

babel.js的作用：

浏览器本身不能直接解析JSX语法，我们需要使用babel转译为纯的JavaScript的代码才能运行；

只要使用了JSX，就要加上type="text/babel"来声明需要babel来出来

范例：使用JSX语法

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>第二天 JSX语法简介</title>
</head>
<body>
 <div id="test1"></div>
 <div id="test2"></div>
 <script src="../lib/react.development.js"></script>
 <script src="../lib/react-dom.development.js"></script>
 <script src="../lib/babel.min.js"></script>
 <script type="text/babel">
  const msg = '你好，React'
  const myId = 'xiaojia'
  // 1、创建虚拟DOM
  const vDom3 = <h3 id={myId}>{msg}</h3>
  ReactDOM.render(vDom3, document.getElementById('test2'))
</script>
</body>
</html>123456789101112131415161718192021222324复制代码类型：[javascript]

如果使用webpack的同学，需要配置babel插件。

1、安装babel插件

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D12复制代码类型：[javascript]

2、安装能够识别转换JS语法的包：babel-preset-react

cnpm i babel-preset-react -D1复制代码类型：[javascript]

3、在webpack.config.js中配置所有第三方模块的配置规则

module: {  rules: [
 {
   test: /\.js$|jsx$/,
   use:'babel-loader',
   exclude: /node_modules/
 }
  ]12345678复制代码类型：[javascript]

4、在项目根目录中创建一个.babelsrc

{  "presets": ["env", "stage-0", "react"],  "plugins": ["transform-runtime"]
}1234复制代码类型：[javascript]

03JSX语法练习

1、JSX语法的本质

并不是直接把JSX渲染的页面上，而是内部先转换成了createElement形式，再渲染的；

2、在JSX语法中混合写入JS表达式

在JSX语法中，要把JS代码写到{}之中

范例：循环数组渲染到li中

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport"
 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>第二天 JSX语法练习</title>
</head>
<body>
 <div id="app"></div>

 <script src="../lib/react.development.js"></script>
 <script src="../lib/react-dom.development.js"></script>
 <script src="../lib/babel.min.js"></script>

 <script type="text/babel">
  const languages = ['Java','JavaScript','php','c',
  'c++','Python','R','Rust','Go','Ruby']
  const ul=(
   <ul>
 {languages.map((language, index)=>
  <li key={index}>{language}</li>)}
   </ul>
  )
  ReactDOM.render(ul,document.getElementById('app'))
</script>
</body>
</html>1234567891011121314151617181920212223242526272829复制代码类型：[javascript]

3、Key的作用

这里我们如果不写Key的话，浏览器上会有个红色的警告，警告内容如下

react.development.js:260 Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using <ul>. See https://fb.me/react-warning-keys for more information.
 in li123复制代码类型：[javascript]

如果不指定key，添加元素的时候，不会保存选中的状态。

从昨天我看diff算法的时候，可以看到diff算法判断的时候会判断key。这就是为什么会丢失选中状态的原因。

在什么时候需要指定key

forEach

map

for

在上述方法或循环中直接控制的元素，需要指定key。

4、注意事项

在JSX中写注释：推荐使用{/*这是注释*/}形式

在JSX中创建DOM的时候，所有的节点必须有唯一的根元素进行包裹；

在JSX语法中，标签必须成对出现，如果是单标签，则必须自闭合

解读在React中使用JSX语法

01使用纯JS方式来创建虚拟DOM

02使用JSX语法来创建虚拟DOM对象

03JSX语法练习

相关推荐