React学习（二）——JSX基础

学习目标：了解JSX的基础用法，包括{JS表达式}，条件渲染、列表渲染等

目录

一、JSX是什么

二、JSX中使用JS表达式

1、语法：{  JS表达式  }

2、例子

3、注

三、JSX列表渲染

1、实现：使用map方法

2、例子

四、JSX条件渲染

1、实现方式一：三元表达式

2、实现方式二：逻辑与（&&）运算符

五、JSX样式

1、方式

2、例子

3、总结

---

一、JSX是什么

全称为：JavaScript XML，是一种语法扩展，、使界面的构建更加直观和易于理解，同时也便于与JavaScript逻辑进行交互。虽然它们的实现和语法不同，但它们的主要目标相似：

1. 声明式界面构建： JSX和模板语法都旨在让开发人员能够以一种类似于HTML的方式构建界面。这使得界面的构建过程更加直观和易于理解。

2. 数据绑定： 两种方法都支持数据绑定，使开发人员能够将数据和UI组件关联起来，实现动态更新。在JSX中，你可以在花括号{}中嵌套JavaScript表达式，而在模板语法中，你可以使用双花括号{{ }}来实现数据绑定。

3. 条件渲染和循环渲染： JSX和模板语法都提供了条件渲染和循环渲染的机制，使开发人员能够根据条件显示或隐藏特定的UI元素，以及在列表中渲染多个相似的元素。

4. 事件处理： 两种方法都允许开发人员将事件处理函数绑定到UI元素上，以便响应用户的交互操作。

二、JSX中使用JS表达式

1、语法：{  JS表达式  }

2、例子

const name = "KongKwan"
<span>hi, my name is {name} </span>   //结果：你好，我叫KongKwan

3、注

       和vue中的{{}}一样，里面只能是JS表达式，if语句、变量声明等都不是表达式

三、JSX列表渲染

1、实现：使用map方法

2、例子

function App() {
  const list=[
    {id:1,name:'BillKin'},
    {id:2,name:'PP'}
  ]
  return (
    <div className="App">
        {list.map(item=> <p>{item.name}</p> )}
    </div>
  );
}

export default App;

效果如下：

四、JSX条件渲染

1、实现方式一：三元表达式

function App() {
  const active = true
  return (
    <div className="App">
       {active? <span>这是激活项</span> : <span>这不是激活项</span>}   //结果：这是激活项
    </div>
  );
}
export default App;

2、实现方式二：逻辑与（&&）运算符

function App() {
  const active = true
  return (
    <div className="App">
       {active && <span>这是激活项</span>}  // 结果：这是激活项
    </div>
  );
}
export default App;

        这种方式其实利用的就是&& ,如果前面是true的话，它会继续执行&&后面的，如果是false的话，后面的将不会被执行，所以当active 是 false的时候，是不会渲染出结果的

五、JSX样式

1、方式

行内样式：在元素身上绑定一个style属性即可

类名样式：在元素身上绑定一个className属性即可，不直接使用class可能是因为class是类名组件的一个关键词吧

2、例子

（1）App.js

import './App.css'

function App() {
  const active =true
  const style ={
    fontSize: '25px'
  }
  return (
    <div className="App">
      <p style={style}>Freedom is the oxygen of the soul</p>
      <p className="normal"> normal item </p>
      {/* 样式动态控制 */}
      <p className={active ? 'active': '' }>  active item </p>
    </div>
  );
}
export default App;

（2）App.css

.normal{
    font-style: italic;
}
.active{
    font-size: 18px;
    background-color: black;
    color: white;
}

（3）效果

3、总结

className似乎体验感更好一些，可以使用css写，并且也能够实现动态控制