03.JSX基础

认识JSX¶

概念：JSX是JavaScript和XML (HTML)的缩写，表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式

优势：

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

本质：JSX并不是标准的]S语法，它是]S的语法扩展，浏览器本身不能识别，需要通过解析工具（babel）做解析之后才能在浏览器中运行

识别JS表达式¶

JSX中使用JS表达式在]SX中可以通过大括号语法识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等

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

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

Text Only

const count=100;

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

export default App;

实现列表渲染¶

语法:在JSX中可以使用原生]S中的map方法遍历渲染列表

渲染列表

map循环哪个结构，return结构

注意：加上一个独一无二的key，字符串或者number id

key作用：React框架内部使用，提升性能

Text Only

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

function App() {
  return (
   <div className="App">
    {list.map(item=><li key={item.id}>{item.name}</li>)}
   </div>
  );
}

export default App;

实现基础条件渲染¶

语法: 在React中，可以通过逻辑与运算符&&、三元表达式 (?:)实现基础的条件渲染

Text Only

const isLogin=true;

function App() {
  return (
   <div className="App">
    {/* 逻辑&& */}
    {isLogin&&<span>this is span</span>}
    {/* 三元运算 */}
    {isLogin?<span>lucy</span>:<span>loading</span>}
   </div>
  );
}

export default App;

实现复杂条件渲染¶

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

解决方案:自定义函数 + if判断语句

Text Only

const articleType=1;// 013

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>
  );
}

export default App;