JSX基础

# JSX基础

什么是JSX

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

const message = 'this is message'

function App(){

  return (

    <div>

      <h1>this is title</h1>

      {message}

    </div>

  )

}

优势：

1. HTML的声明式模版写法

2. JavaScript的可编程能力

JSX的本质

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

 JSX高频场景-JS表达式

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

1. 使用引号传递字符串

2. 使用JS变量

3. 函数调用和方法调用

4. 使用JavaScript对象

//项目的根组件，一切组件的根基

// APP--index.js--->pubilc/index.html ---><div id="root"></div>
const count = 100

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


    </div>
  )
}

export default App;

:::warning

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

 JSX高频场景-列表渲染

> 在JSX中可以使用原生js种的`map方法` 实现列表渲染

//项目的根组件，一切组件的根基

// APP--index.js--->pubilc/index.html ---><div id="root"></div>
const list = [
  {id:1001, name:'Vue'},
  {id:1002, name: 'React'},
  {id:1003, name: 'Angular'}
]

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

export default App;

注意事项：加上一个独一无二的key，字符串或者number id，key的作用：react框架内部使用，提升更新性能

JSX高频场景-条件渲染

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

//项目的根组件，一切组件的根基

// APP--index.js--->pubilc/index.html ---><div id="root"></div>
const islogin = true
function App() {
  return (
    <div className="App">
      {/* 逻辑与 && */}
      {islogin && <span>this is span</span>}

      {/* 三元运算 */}
     {islogin ? <span>jack</span> :<span> looding.... </span>}    
    </div>
  )
}

export default App;

JSX高频场景-复杂条件渲染

需求：列表中需要根据文章状态适配三种情况，单图，三图，和无图三种模式 解决方案：自定义函数 + if判断语句

//项目的根组件，一切组件的根基

// 定义文章的类型
const articleType =1

// 定义核心函数（根据文章类型返回不同的jsx模板
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;