JSX看着一篇足以入门

JSX 介绍

学习目标： 能够理解什么是 JSX，JSX 的底层是什么
概念： JSX 是 javaScriptXML(HTML) 的缩写，表示在 JS 代码中书写 HTML 结构
作用： 在 React 中创建 HTML 结构（页面 UI 结构）
优势：
 1. 采用类似 HTML 的语法，降低学习成本，会 HTML 就会 JSX
 2. 充分利用 JS 自生的可编程能力创建 HTML 结构
注意： JSX 并不是标准的 JS 语法，是 JS 的语法扩展，浏览器默认是不识别的，脚手架中内置的@babel/plugin-transform-react-jsx 包，用来解析该语法，将声明式的 JSX 解析为命令式的函数调用

JSX 中使用 js 表达式

学习目标： 能够在 JSX 中使用表达式
语法：
{JS 表达式}

function App() {
  // 1.识别常规变量
  const name = '跟着老惠学前端'
  // 2.原生js方法调用
  const age = () => {
    return 25
  }
  //3.三元运算符
  const flag = true

  return (
    <div className="App">
      {name}
      {age()}
      {flag ? '真棒' : '真菜'}
    </div>
  )
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

可以使用的表达式
 1.字符串、布尔值、数值、null、undefined、object([]/{})
 2.算数运算（1+2）、字符串方法（“abcde”.split(’’)）、数组方法（[‘a’,‘b’].join(’-’)）
 3. fn()
特别注意
if 语句/switch-case 语句/变量声明语句，这些叫做语句，不是表达式，不能书写在{}中！！！

// 1.识别常规变量
const name = '跟着老惠学前端'
// 2.原生js方法调用
const age = () => {
  return 25
}
//3.三元运算符
const flag = true
// 其他的自行尝试...
return (
  <div className="App">
    {name}
    <br />
    {age()}
    <br />
    {flag ? '真棒' : '真菜'}
    <br />
  </div>
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

JSX 列表渲染

学习目标： 能够在 JSX 中实现列表渲染

页面的构建离不开重复的列表结构，比如歌曲列表，商品列表等等，Vue 中用的式 v-for 做到这一点，react 中又该如何实现呢？

实现： 使用数组的 map 方法
案例:

// 技术方案：map 重复渲染的是哪个模板 就return那个
// 注意事项：遍历列表时同样需要一个类似number/string不可重复的key 提高diff性能
// key仅仅在内部使用，不会出现在真实的dom结构
const stu = [
  { id: 1, name: '小明', age: 18 },
  { id: 2, name: '李华', age: 19 },
  { id: 3, name: '小红', age: 17 },
  { id: 4, name: '小芳', age: 17 },
]

return (
  <div className="App">
    <ul>
      {stu.map((item) => (
        <li key={item.id}>
          姓名：{item.name},年龄：{item.age}
        </li>
      ))}
    </ul>
  </div>
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

运行结果：

JSX 条件渲染

学习目标： 能够在 JSX 中实现条件渲染
作用： 根据是否满足条件生成 HTML 结构，比如 Loading 效果
实现： 可以使用三元运算符或者逻辑&&（与）运算符
实例：

function App() {
  // 条件渲染
  // 技术方案：1.三元表达式（常用） 2.逻辑&&（与）运算

  const flag = true
  return (
    <div className="App">
      1.三元表达式<br/>
      (1).简单版：
        {flag ? <span>this is span</span>:null}<br/>
      (2).复杂版（可用小括号包裹起来）：
      {
        flag ? (<div>
          <span>this is span2</span>
        </div>) : null
        }
      2.&& (前面为true则显示，false则不显示))<br/>
        {true && <span>this is span</span>}
    </div>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

运行结果：

JSX 模板精简原则

学习目标： 使模板中的逻辑跟简洁
实现： 复杂的多分枝的逻辑收敛为一个函数，通过一个专门的函数来写分支逻辑，模板中只负责调用
实例：

// 有一个状态type有1，2，3三种
// 1 展示 h1
// 2 展示 h2
// 3 展示 h3

const title = (type) =>{
    if(type === 1){
        return <h1>this is h1</h1>
    }
    else if(type === 2){
        return <h2>this is h2</h2>
    }
    else if(type === 3){
        return <h3>this is h3</h3>
    }
}
  return (
    <div className="App">
      {title(1)}
      {title(3)}
      {title(2)}
    </div>
  );
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

运行结果：

JSX 样式处理

学习目标： 能够在 JSX 中实现 CSS 样式处理
 1. 行内样式
实现： 在元素身上绑定一个 style 样式
  - 行内样式 · style

function APP(){
    return (
        <div className="App">
            <div style={{color:'red',fontSize:'10px'}}>this is div</div>
        </div>
    )
}
export default App
1
2
3
4
5
6
7
8

  - 行内样式·style·优化写法

function App() {
  const divStyle1 = {
    color:'blue',
    fontSize:'20px'
  }
  return (
        <div className="App">
            <div style={divStyle1}>this is div</div>
        </div>
    )
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13

 2. 类名样式
实现： 在元素身上绑定一个 className 属性即可
  1. 创建一个 css 样式表文件 app.css

.colors {
  color: peru;
  font-size: 40px;
}
1
2
3
4

  2. JSX 中引入 css 文件

// 使用import引入样式表文件
import './app.css'
1
2

  3. 在元素上用 className 属性绑定 class 样式

    <div className='colors'>类名样式</div>
1

运行结果：

JSX 动态类名控制

学习目标： 根据需求判断是否显示某个类名的样式
实现： 使用三元表达式或逻辑&&运算

import './app.css';
function App() {
  const color1 = true
  const color2 = true
    return (
        <div className="App">
            1. 三元：
            <div className={color1?'colors':''}>类名样式</div>
            2. &&（与）
            <div className={color2 && 'colors'}>类名样式</div>
        </div>
    )
}

export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

运行结果：

JSX 注意事项

学习目标： 掌握 JSX 实际开发过程中的一些注意事项
  1. JSX 必须具有一个根节点，如果没有根节点可以使用<>(幽灵节点)代替根节点将所有元素包裹起来

function App() {
    return (
      <>
        <div className="App">1</div>
        <div className={htmlFor(i in 10)}>2</div>
      </>
    )
}

export default App;
1
2
3
4
5
6
7
8
9
10

  2. 所有标签必须形成闭合(

），成对闭合或者自闭（ ）和都可以
  3. JSX 中的语法更加贴近 JS 语法，属性名采用驼峰命名法 class -> className; for -> htmlFor
  4. JSX 支持多行(换行)，如果需要换行，需使用 ()包裹，防止出现 Bug