React基础语法速览

一、项目创建

npm create vite

这里选择react即可，如图：

二、基本文件说明

react函数式编程时，用的是JSX语法进行开发的，这里注意，return时只能有一个根标签；

三、React核心语法

1.插值功能

        插值可以使用的位置有标签内容和标签属性处（相当于vue的：语法和{{}}语法）

效果：

 2.条件渲染

效果：

 

3.列表渲染

import { Fragment } from "react/jsx-runtime"

function App() {

  const list = [
    {
      name: '小吴',
      id: 1
    },
    {
      name: '小王',
      id: 2
    },
    {
      name: '小张',
      id: 3
    }]

  const listContent = list.map((item) => {
    return (
      <Fragment key={item.id}>
        <li>{item.name}</li>
        <li>-------------------------</li>
      </Fragment>
    )
  })

  return (
    <>
      <ul>
        {listContent}
      </ul>
    </>
  )
}

export default App

效果：

 

这里要注意：list.map中返回的也是一个JSX语法的字符串，所以要求也必须要有一个根标签，且列表渲染时要注意根标签上必须有一个key值，此时我们就可以使用Fragment来帮助我们，它等价于<></>（类型于vue中的template）.

4.事件触发

import { useState } from "react"


function App() {

  const [content, setContent] = useState('标签的默认内容')

  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    console.log('点击了',e)
    setContent('按钮被点击了')
  }

  return (
    <>
      <div>{content}</div>
      <button onClick={handleClick}>按钮</button>
    </>
  )
}

export default App

效果：

注意：这里只有用useState才可以进行响应式操作（相当于get/set方法）

对对象的操作：

import { useState } from "react"


function App() {

  const [data, setData] = useState({
    title: 'Hello React',
    content: '这是一个按钮'
  })

  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    console.log('点击了',e)
    setData({
      title: 'Hello React!',
      content: '点击了按钮'
    })
  }

  return (
    <>
      <div title={data.title}>{data.content}</div>
      <button onClick={handleClick}>按钮</button>
    </>
  )
}

export default App

注意：这里如果感觉对象属性过多，可以使用展开运算符来方便操作（可以只修改一部分）

对数组进行操作：

import { Fragment, useState } from "react"


function App() {

  const [list,setList] = useState([
    {
      name: '小吴',
      id: 1
    },
    {
      name: '小王',
      id: 2
    },
    {
      name: '小张',
      id: 3
    }])

  const listData = list.map((item: any) => {
    return (
      <Fragment key={item.id}>
        <li>{item.name}</li>
      </Fragment>
    )
  })

  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    console.log('点击了',e)
    const temp = list.filter(item => item.id !== 3)
    temp.push({
      name: '小刘',
      id: 4
    })
    setList([
      ...temp,
      {
        name: "小乔",
        id: 5
      }
    ])
  }

  return (
    <>
      <div>{listData}</div>
      <button onClick={handleClick}>按钮</button>
    </>
  )
}

export default App

效果：