React全家桶 - 【React】 - 【1】JSX基础语法、列表渲染、条件渲染、事件绑定及传参前言什么是 JSX？

前言

1、拓展：两种创建 react 元素的方式

✅ 推荐使用 JSX 的方式；

❌ 1.1 `createElement()` 方式创建：（了解即可）

createElement()的缺点：
- 繁琐不简洁；
- 不直观，无法一眼看出所描述的结构；
- 不优雅，用户体验不好；

// 1. 导入两个包；
import React from 'react';
import ReactDOm from 'react-dom';

// 2. 调用 React.createElement(元素名称, 属性, 内容) 方法创建 react 元素；
const el = React.createElement(
  'div',
  { className: 'shopping-list' },
  React.createElement('h1', null, 'Shopping List'),
  React.createElement(
    'ul',
    null,
    React.createELement('li', null, 'Instagram'),
    React.createELement('li', null, 'WhatsApp')
  )
);

// 3. 调用 ReactDom.render() 方法渲染 react 元素到页面上；
ReactDom.render(el, document.getElementById('root'));

✅ 1.2 `JSX`方式创建

<div className="shopping-list">
  <h1>Shopping List</h1>
  <ul>
    <li>Instagram</li>
    <li>WhatsApp</li>
  </ul>
</div>

2、什么是 JSX？

JSX 是 JavaScript 和 XML(HTML) 的缩写，表示在 JS 代码中编写 HTML 结构，它是React中编写UI模板的方式；
优势：
- 声明式语法更加直观、与HTML结构类似（基本完全一样）；
- JS的可编程能力；
- 提升开发效率；
- 降低学习成本；
❗JSX 与 HTML 的区别：
- 只能有一个根元素；
- 每个元素都需要闭合，即使是单元素；
- class ➡️ className；
- style 为 object，属性名有连字符的改成驼峰命名法，首字母小写，多个单词后面每个单词首字母大写；
- label 元素的 for 属性 ➡️ htmlRFor；
- 单个单词属性名字不变，多个单词属性为驼峰命名法；

3、本质

JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行；
编译JSX语法的包为：@babel/preset-react；
🎯 解析工具 - babel；
- 铁子们可以自行去该网站写一些JSX，看解析出来是什么样;
- 点击导航栏的 Try it Out，进去之后需要将左侧的 recat 勾选上；

一、JSX中使用JS表达式

在JSX中可以通过 大括号语法 {} 识别 JavaScript 中的 表达式;
- 变量;
- 函数调用;
- 方法调用等等；
四个高频场景：
- 使用引号传递字符串；
- 使用JS变量；
- 函数调用和方法调用；
- 使用JS对象；

// 项目的根组件
const message = 'React 学习';
const obj = {
  name: '禁止摆烂'
};
const getName = () => obj.name + '_才浅';
function App() {
  return (
    <div>
      <h1>this is title</h1>
      {/* 使用引号传递字符串 */}
      {'好好学习 天天向上'}
      
      {/* 使用JS变量 */}
      {message}
      
      {/* 函数调用和方法调用 */}
      {getName()}
      {new Date().getTime()}
      
      {/* 使用JS对象 */}
      {/* 外层是识别表达式的语法，内层是识别的对象结构 */}
      <div style={{ color: 'red' }}>this is div</div>
    </div>
  );
}

export default App;

❗ 注意：

if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中；

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

React元素的 属性名 必须使用 驼峰命名法；

特殊属性名：

class -> className；

for -> htmlFor(label标签)；

tabindex -> tableIndex；

二、列表渲染

2.1 基本渲染

语法：
- 在JSX中可以使用原生JS中的 map 方法遍历渲染列表；

❗ 注意：

需要添加上一个独一无二的key；

key：string 或者 number；

作用：React内部使用，提升更新性能的；

代码展示：

const list = [
  { id: '1000', name: 'jQuery', flag: false },
  { id: '1001', name: 'Vue', flag: true },
  { id: '1002', name: 'React', flag: true },
  { id: '1003', name: 'Angular', flag: false }
];
function App() {
  return (
    <ul>
      {/* map 循环哪个结构 return 哪个结构 */}
      {list.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default App;

2.2 ❗️ 空白条件渲染前置基础

在js中，我们熟悉的假值有以下几个：
- false '' null undefined 0 NaN；
- 这些假值在jsx用作条件渲染的时候，需要注意数字价值（0、NaN）；
0 NaN：在作为条件的时候，是原样显示在也看上的，并不是空白；

2.3 基础条件渲染

在 React 中，可以通过 逻辑运算符(&&)、三元表达式(?:) 实现基础的条件渲染；
逻辑运算符(&&)：
- 控制单个标签的显示隐藏；
三元表达式(?:)：
- 两个标签的切换；

代码展示：

const flag = true;
function App() {
    return (
        <div>
            {/* 逻辑与 */}
            {flag && <span> 开始学习 React </span>}
            
            <br />
            
            {/* 三元运算 */}
            {flag ? <span> 看会小姐姐 </span> : <span> 玩会游戏 </span>}
        </div>
    );
};

❗注意：
- js中的假值在jsx中的渲染；
- null、undefined、''、false 都会显示空白；
- 0、NaN会原样显示出来；
- 在使用 && 或三目元素符做条件渲染的时候，需要注意 0、NaN；

2.4 复杂条件渲染

在实际的开发中，遇到的复杂条件渲染肯定是最多的，就比如下面这张图：
- 这个怎么实现呢？
需求：列表中要根据文章的状态适配三种情况：无图、单图、三图；
解决方案：自定义函数 + if判断语句；

// 文章列表
const articleList = [
  { id: '1000', title: 'React 学习笔记', type: 0, src: [] },
  { id: '1001', title: 'Vue 学习笔记', type: 1, src: [1] },
  { id: '1002', title: 'JS 学习笔记', type: 3, src: [1, 2, 3] }
];

// 定义核心函数 - 根据文章类型返回不同的JSX模板
const getArticleTemplate = (item) => {
  if (item.type === 0) {
    return (
      <div key={item.id} style={{ border: '2px solid red' }}>
        <p>文章内容</p>
      </div>
    );
  } else if (item.type === 1) {
    return (
      <div key={item.id} style={{ display: 'flex', border: '4px solid green' }}>
        <div style={{ flex: 1 }}>
          <p>文章内容</p>
        </div>
        <div style={{ flex: 1 }}>
          <p>单图模式</p>
        </div>
      </div>
    );
  } else {
    return (
      <div key={item.id} style={{ border: '6px solid blue' }}>
        <p>文章内容</p>
        <ul style={{ display: 'flex', justifyContent: 'space-between' }}>
          {item.src.map((item) => (
            <li key={item}>{`第${item}张图`}</li>
          ))}
        </ul>
      </div>
    );
  }
};

function App() {
  return articleList.map((item) => getArticleTemplate(item));
}

export default App;

三、事件绑定

3.1 事件绑定基本语法

语法：
- on + 事件名称 = {事件处理函数}；
- 整体上遵循 驼峰命名法；

代码展示：

function App() {
    const onClick = () => {
        console.log(13);
    };

    return <button onClick={onClick}>React 中的事件绑定</button>;
}

export default App;

3.2 传递自定义参数

语法：
```
<元素 on事件名称={() => 时间处理函数名(实参1, 实参2, 实参n)}/>
```
- 事件绑定的位置改造成 箭头函数 的写法，在执行实际处理业务函数的时候传递实参；
❗ 注意：
- 如果要传递自定义参数，一定是要改写成箭头函数的形式；
- 不能直接写成函数调用，这里事件绑定需要一个 函数引用；

代码展示：

function App() {
    const onClick = (num) => {
        console.log(num, 13);
    };
    
    return <button onClick={() => onClick(10)}>React 中的事件绑定</button>;
}

export default App;

3.3 使用事件对象参数

3.3.1 单纯使用事件对象

语法：
- 在事件回调函数中设置形参 e；

代码展示：

function App() {
    const onClick = (e) => {
        console.log(e);
    };

    return <button onClick={onClick}>React 中的事件绑定</button>;
}

export default App;

3.3.2 同时使用事件对象和自定义参数

语法：
- 在事件绑定的位置传递事件实参e 和自定义参数，在事件处理函数中声明形参，❗ 注意顺序对应；

代码展示：

function App() {
    const onClick = (num, e) => {
        console.log(num, e, 13);
    };

    return <button onClick={(e) => onClick(10, e)}>React 中的事件绑定</button>;
}

export default App;

React全家桶 - 【React】 - 【1】JSX基础语法、列表渲染、条件渲染、事件绑定及传参

前言

1、拓展：两种创建 react 元素的方式

❌ 1.1 createElement() 方式创建：（了解即可）

✅ 1.2 JSX方式创建

2、什么是 JSX？

3、本质

一、JSX中使用JS表达式

二、列表渲染

2.1 基本渲染

2.2 ❗️ 空白条件渲染前置基础

2.3 基础条件渲染

2.4 复杂条件渲染

三、事件绑定

3.1 事件绑定基本语法

3.2 传递自定义参数

3.3 使用事件对象参数

3.3.1 单纯使用 事件对象

3.3.2 同时使用 事件对象 和 自定义参数

❌ 1.1 `createElement()` 方式创建：（了解即可）

✅ 1.2 `JSX`方式创建

3.3.1 单纯使用事件对象

3.3.2 同时使用事件对象和自定义参数