react基础语法,模板语法,ui渲染,jsx,useState状态管理

发布于:2024-07-11 ⋅ 阅读:(13) ⋅ 点赞:(0)

创建一个react应用

这里使用create-react-app的脚手架构建项目(结构简洁,基于webpack-cli),

npx create-react-app [项目名称]

使用其他脚手架构建项目可以参考:react框架,使用vite和nextjs构建react项目_vite + react+js项目构建-CSDN博客

 

成功构建后只需要关注两个部分,package.json中的script脚本,start:启动项目

src中的核心文件,index.js: 引入react的依赖,   App.js:根组件

可以先去除多余的文件

index.js

import React from 'react'; // 引入React库
import ReactDOM from 'react-dom/client'; // 引入ReactDOM库
import App from './App'; // 引入App组件


const root = ReactDOM.createRoot(document.getElementById('root')); // 创建根节点
root.render(
  // 严格模式,排错
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

app.js


function App() {
  return (
    <div className="App">
      <h1>react基本语法</h1>
    </div>
  );
}

export default App;

以上是精简后的文件目录和文件内容,可以看出核心的引入库为react和react-dom,整个框架也是完全基于js生成的

模板语法

模板语法就是在html结构中使用js变量渲染数据,

function App() {
  const title = '标题'
  return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
    </div>
  );
}

export default App;

我们在App组件(函数)定义一个变量,并使用{}插入html结构中,{}的功能就是将html环境转换成js环境 ,

 出来再标签外插值,还可以再标签内设置属性,最终都会变成html的结构

function App() {
  const title = '标题'
  const box = 'box'
  return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
      <div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>
    </div>
  );
}

export default App;

组件渲染时要注意的几点:

  • 一个组件中返回的html结构只能有一个外标签,可以使用<div></div>,<></>,它们的区别是一个最终会被div包裹,一个则不会有任何标签再外圈(template)
  • 对标签元素设置类时使用className而不是class(防止和es6的class关键字搞混)
  • 插入对象时使用{{}},这表示{}中插入的时对象,最常用的就是style属性

 列表渲染和条件渲染


function App() {
  const title = '标题'
  const box = 'box'
  const listData = [1, 2, 3, 4, 5]

  const list = listData.map(item=>(
    <li key={item}>{item}</li>
  ))
  return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
      <div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>
      {list}
    </div>
  );
}

export default App;

使用数组中的数据进行列表循环渲染时,使用map方法,map方法有返回值,可以将html的结构返回出来直接插入到组件的渲染结构中(虚拟节点),

function App() {
  const title = '标题'
  const box = 'box'
  const listData = [1, 2, 3, 4, 5]

  const list = listData.map(item=>(
    <li key={item}>{item}</li>
  ))
  
  let show = false
  let content = <span>{show?'这是条件为真的内容':'这是条件为假的内容'}</span>
  
  

  return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
      <div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>
      {list}
      {content}
    </div>
  );
}

export default App;

当show为true和false时,span中的内容会相应发生改变,

可以看出在react中循环和条件都是基于原生js的方法实现的

jsx

        jsx语法是js和XML结合的语法,它允许再js中使用类似Html的标签元素作为值,类似于数字,字符串,要注意jsx的标签并不是字符串,所以复制时不需要添加引号,同时使用return返回jsx的标签时,要使用()包裹,因为不使用()js的语法会认为再return这一行函数就结束了,不会读取到后续内容

let content = <span>{show?'这是条件为真的内容':'这是条件为假的内容'}</span>
 return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
      <div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>
      {list}
      {content}
    </div>
  );

同时你也可以将文件改成jsx后缀,因为react集成了jsx语法,所以使用js也可以成功识别出jsx

状态管理

这里用上了一个hooks钩子函数 ,useState,

const [show, setShow] = useState(false)

它接受一个任意值,返回一个数组,里面包含一个由任意值生成的响应式变量,和这个响应式变量的修改方法,

比如上面修改的show变量,使用useState接受false布尔值,复制给show,同时生成setShow方法用来重新赋值show,因为show是只读的不可被直接修改,

import { useState } from "react"

function App() {
  const title = '标题'
  const box = 'box'
  const listData = [1, 2, 3, 4, 5]

  const list = listData.map(item=>(
    <li key={item}>{item}</li>
  ))
  
  const [show, setShow] = useState(false)
  let content = <span>{show?'这是条件为真的内容':'这是条件为假的内容'}</span>
  function fn() {
    setShow(!show)
  }
  

  return (
    <div className="App">
      <h1>react基本语法</h1>
      <span>{title}</span>
      <div className={box} style={{width: '100px', height: '100px', backgroundColor: 'red'}}></div>
      {list}
      <button onClick={fn}>click</button>
      {content}

    </div>
  );
}

export default App;

此时点击按钮,会改变文字内容

注意:onclick接受一个函数名或者函数体,接受函数名时不能带括号,如果需要传参应该写成函数体的格式

 <button onClick={()=>fn()}>click</button>

到这里react的基本语法就全部展示完了