02react18-基础篇

什么是JSX

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

优势：

1. HTML的声明式模版写法
2. JavaScript的可编程能力

JSX的本质

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

JSX高频场景

1.JS表达式

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

1. 使用引号传递字符串
2. 使用JS变量
3. 函数调用和方法调用
4. 使用JavaScript对象
   注意：if语句、switch语句、变量声明不属于表达式，不能出现在{}中
案例

const message = 'this is react18'

function getAge(){
  return 18
}

function App(){
  return (
    <div>
      <h1>this is title</h1>
      {/* 字符串识别 */}
      <div>{'this is str'}</div>
      {/* 变量识别 */}
      <div>{message}</div>
      {/* 变量识别 */}
      <div>{message}</div>
      {/* 函数调用 渲染为函数的返回值 */}
      <div>{getAge()}</div>
    </div>
  )
}
export default App

展示效果

image.png

列表渲染

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

const list = [
  {id:1,name:'张三'},
  {id:2,name:'李四'},
  {id:3,name:'王五'},
  {id:4,name:'陈六'}
]
function App(){
  return (
    <div>
       {/* 渲染列表 */}
      {/* map 循环哪个结构 return结构 */}
      {/* 注意事项：加上一个独一无二的key 字符串或者number id */}
      {/* key的作用：React框架内部使用 提升更新性能的 */}
      {list.map(item=><li key={item.id}>{item.name}</li>)}
    </div>
  )
}
export default App

image.png

3.条件渲染

以是否登录成功为例

const isLogin = true

function App () {
  return (
    <div className="App">
      {/* 逻辑与 && */}
      {isLogin && <div>用户名称：zhangsan</div>}
      {/* 三元运算 */}
      {isLogin ? <span>登录成功</span> : <span>登录失败</span>}
    </div>
  )
}

export default App

image.png

4.复杂条件渲染

image.png

需求：列表中需要根据文章的状态适配
解决方案：自定义函数 + 判断语句

// 定义核心函数（根据文章类型返回不同的JSX模版）
function getArticleTem (articleType) {
  if (articleType === 0) {
    return <div>我是无图文章</div>
  } else if (articleType === 1) {
    return <div>我是单图模式</div>
  } else {
    return <div>我是三图模式</div>
  }
}
function App () {
  return (
    <div className="App">
      {/* 调用函数渲染不同的模版 */}
      {getArticleTem(0)}
    </div>
  )
}

export default App

type为0所以是无图模式.png

React的事件绑定

基础实现

React中的事件绑定，通过语法 on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法

1.基础用法

function App(){
  const clickHandler = ()=>{
    alert('button按钮点击了')
  }
  return (
    <button onClick={clickHandler}>click me</button>
  )
}

2.使用事件参数

在事件回调函数中设置形参e即可

function App(){
  const clickHandler = (e)=>{
    console.log('button按钮点击了', e)
  }
  return (
    <button onClick={clickHandler}>click me</button>
  )
}

3.传递自定义参数

语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参
注意：不能直接写函数调用，这里事件绑定需要一个函数引用

function App(){
  const clickHandler = (name)=>{
    console.log('button按钮点击了', name)
  }
  return (
    <button onClick={()=>clickHandler('jack')}>click me</button>
  )
}

4.同时传递事件对象和自定义参数

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

function App(){
  const clickHandler = (name)=>{
    console.log('button按钮点击了', name)
  }
  return (
    <button onClick={()=>clickHandler('jack')}>click me</button>
  )
}

React组件基础使用

组件是什么

概念：一个组件就是一个用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以服用多次

image.png

组件基础使用

在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写即可

// 1. 定义组件
function Button(){
  return <button>click me</button>
}

// 2. 使用组件
function App(){
  return (
    <div>
      {/* 自闭和 */}
      <Button/>
      {/* 成对标签 */}
      <Button></Button>
    </div>
  )
}

组件状态管理-useState

基础使用

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果

和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）

1.状态的修改规则

在React中状态被认为是只读的，我们应该始终替换它而不是修改它, 直接修改状态不能引发视图更新

image.png

import { useState } from "react"
function App () {
  const [count, setCount] = useState(0)
  const handleClick = () => {
    setCount(count+1)
  }
  return (
    <div onClick={handleClick}>{count}</div>
  )
}

export default App

2.修改对象状态

对于对象类型的状态变量，应该始终给set方法一个全新的对象 来进行修改

import { useState } from 'react'

function App () {
  let [count, setCount] = useState(0)

  const handleClick = () => {
    // 直接修改 无法引发视图更新
    // count++
    // console.log(count)
    setCount(count + 1)
  }

  // 修改对象状态
  const [form, setForm] = useState({ name: 'jack' })

  const changeForm = () => {
    // 错误写法：直接修改
    // form.name = 'john'
    // 正确写法：setFrom 传入一个全新的对象
    setForm({
      ...form,
      name: 'john'
    })
  }

  return (
    <div>
      <button onClick={handleClick}>{count}</button>
      <button onClick={changeForm}>修改form{form.name}</button>
    </div>
  )
}

export default App

组件的基础样式处理

React组件基础的样式控制有俩种方式，行内样式和class类名控制

// 导入样式
import './index.css'

const style = {
  color: 'red',
  fontSize: '50px'
}

function App () {
  return (
    <div>
      {/* 行内样式控制 */}
      <span style={style}>this is span</span>
      {/* 通过class类名控制 */}
      <span className="foo">this is class foo</span>
    </div>
  )
}

export default App

image.png