React---JXS语法

1.createElement()问题

1．繁琐不简洁。
2．不直观，无法一眼看出所描述的结构。

3．不优雅，用户体验不爽。

2.JSX简介

JSX是JavaScript XML的简写，表示在JavaScript代码中写XML ( HTML）格式的代码。

优势:声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率

3. 使用步骤

1.使用JSX语法创建react元素

 2.使用ReactDOM.render()方法渲染react元素到页面中

 在index.js中书写下面代码：

1.  
   //1.导入react
2.  
   import React from 'react'
3.  
   import ReactDOM from 'react-dom'
4.  
   //2.使用JXS创建react元素
5.  
   const title = <h1> 标题 <span>这是span标签</span></h1>
6.  
   //3.渲染react元素
7.  
   ReactDOM.render(title, document.getElementById('root'))

4.小结

1．推荐使用JSX语法创建React元素
2.写JSX就跟写HTML一样，更加直观、友好
3.JSX语法更能体现React的声明式特点(描述UI长什么样子)

4．使用步骤:

 5.为什么脚手架可以使用JSX语法？

1.JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展。
2.需要使用babel编译处理后，才能在浏览器环境中使用。
3. create-react-app脚手架中已经默认有该配置，无需手动配置。
4.编译JSX语法的包为:@babel/preset-react。
 

6.注意点

1. React元素的属性名使用驼峰命名法
2．特殊属性名: class -> className、for -> htmlFor、tabindex -> tablndex 。

const title = <h1 className='titlt'> 标题 </h1>

3．没有子节点的React元素可以用/>结束。

const title = <h1 />

4．推荐:使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱。

7.在JSX中使用JavaScript表达式

1.嵌入JS表达式

数据存储在JS中
语法: {JavaScript表达式}
注意︰语法中是单大括号，不是双大括号!

案例：

1.  
   //1.导入react
2.  
   import React from 'react'
3.  
   import ReactDOM from 'react-dom'
4.  
   //2.使用JXS创建react元素
5.  
   const name = "hsq"
6.  
   const title = <h1>名字:{name}</h1>
7.  
   //3.渲染react元素
8.  
   ReactDOM.render(title, document.getElementById('root'))

 2.注意点：

单大括号中可以使用任意的JavaScript表达式

JSX自身也是JS表达式
注意:JS中的对象是一个例外，一般只会出现在style属性中

注意:不能在{}中出现语句(比如: if/for等)

例子：

1.  
   //1.导入react
2.  
   import React from 'react'
3.  
   import ReactDOM from 'react-dom'
4.  
   // 函数表达式
5.  
   const dv = <div>我是一个div</div>
6.  
   const sayHi = () => 'Hi'
7.  
   const obj = {
8.  
   a: '这是对象属性'
9.  
   }
10.  
    const arr = ['数组内容']
11.  
    const title = <h1>
12.  
    <p>{1}</p>
13.  
    <p>{'a'}</p>
14.  
    <p>{1 7}</p>
15.  
    <p>{3 > 5 ? '大于' : '小于等于'}</p>
16.  
    <p>{obj.a}</p>
17.  
    <p>{arr[0]}</p>
18.  
    <p>{sayHi()}</p>
19.  
    {/* 错误演示 */}
20.  
    {/* <p>{{ a: '对象' }}</p> */}
21.  
    {/* {if(true){ }} */}
22.  
    {/* {for(let i=0;i<10;i ){}} */}
23.  
    {dv}
24.  
    </h1>
25.  
    //3.渲染react元素
26.  
    ReactDOM.render(title, document.getElementById('root'))

 8.JXS的条件渲染

场景: loading效果
条件渲染∶根据条件渲染特定的JSX结构
可以使用if/else或三元运算符或逻辑与运算符来实现

9.JXS的列表渲染 

如果要渲染一组数据，应该使用数组的map()方法
注意︰渲染列表时应该添加key属性，key 属性的值要保证唯一

原则: map()遍历谁，就给谁添加key属性

注意:尽量避免使用索引号作为 key

 10.JSX的样式处理

1.行内样式---style

2.类名---className(推荐) 

 11.总结

1.JSX是React的核心内容。
2.JSX表示在JS代码中写HTML结构，是React声明式的体现。
3.使用JSX配合嵌入的JS表达式、条件渲染、列表渲染，可以描述任意UI
结构。
4．推荐使用className 的方式给JSX添加样式。
5. React完全利用JS语言自身的能力来编写Ul，而不是造轮子增强HTML 功
能。

 

这篇好文章是转载于：学新通技术网