【React】一、JSX的使用

文章目录

1、react环境搭建
2、JSX
- [2.1 JSX中使用JS表达式](#2.1 JSX中使用JS表达式)
- [2.2 JSX中实现列表渲染](#2.2 JSX中实现列表渲染)
- [2.3 JSX中实现条件渲染](#2.3 JSX中实现条件渲染)
- [2.4 JSX中实现复杂条件渲染](#2.4 JSX中实现复杂条件渲染)

1、react环境搭建

create-react-app是一个快速创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用：

java 复制代码

npx create-react-app 项目名

// npx Node.js工具命令，查找并执行后续的包命令
// create-react-app 核心包(固定写法)，用于创建React项目

运行效果：

react项目的其余创建方式：https://zh-hans.react.dev/learn/start-a-new-react-project

2、JSX

JSX，JavaScript和XML（HTML）的缩写，表示在JS代码中，写HTML。JSX是React中编写UI模板的方式，优势：

HTML的声明式模板写法
JS的可编程能力

JSX是JS语法的扩展，浏览器本身并不能识别，需要通过解析工具做解析之后才能在浏览器中运行：

2.1 JSX中使用JS表达式

在JSX中，通过大括号{ } 识别JavaScript中的表达式，可做：

使用引号传递字符串
使用JavaScript变量
函数调用和方法调用
使用JavaScript对象

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

javascript 复制代码

const count = 100

function getName() {
    return "jack";
}

function App() {
  return (
    <div className="App">
     this is App
        {/*使用引号传递字符串*/}
        {'this is message'}
        {/*识别JS变量*/}
        {count}
        {/*函数调用*/}
        {getName()}
        {/*方法调用*/}
        {new Date().getDate()}
        {/*使用JS对象*/}
        <div style={{color: 'red'}}>this is div</div>
    </div>
  );
}

运行：

2.2 JSX中实现列表渲染

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

以上，需要注意，如果写成了：

javascript 复制代码

const list = [
    {id: 1001, name: "Vue"},
    {id: 1002, name: "React"},
    {id: 1003, name: "Angular"},
]

<ul>
    {list.map(item => <li>{item.name}</li>)}
</ul>

console中就会看到有报错：

需要修改为：

javascript 复制代码

<ul>
    {list.map(item => <li key={item.id}>{item.name}</li>)}
</ul>

这是因为JSX中，用JS原生map进行遍历渲染，需要做一个key绑定，这个key是react框架内部用，用于提升更新性能的，和开发者关系不大。总之，使用map遍历渲染时：

明确循环哪个结构，return哪个结构，如上面遍历list，return一个 li 标签
记得加上独一无二的key，这个key可以是一个字符串或者数字

2.3 JSX中实现条件渲染

实现条件渲染，可通过：

逻辑与运算&&
三元表达式？：

javascript 复制代码

const isLogin = true;

function App() {
  return (
    <div className="App">
        {isLogin && <span>欢迎登录</span>}
        {isLogin ? <span>欢迎登录</span> : <span>请登录</span>}
    </div>
  );
}

效果：

2.4 JSX中实现复杂条件渲染

当条件较多时，使用上面的三元表达式就很不方便，此时，可以通过自定义函数+IF判断

需求：列表中需要根据文章状态适配三种情况，单图，三图，和无图三种模式

javascript 复制代码

const articleType = 1 // 0 1 3

/*根据articleType返回不同的渲染模式，这里以div模拟*/
function getArticleTem() {
    if(articleType === 0) {
        return <div>我是无图文章</div>
    } else if (articleType === 1) {
        return <div>我是单图模式</div>
    } else {
        return <div>我是多图模式</div>
    }
}

function App() {
  return (
    <div className="App">
        {getArticleTem()}
    </div>
  );
}

效果：