当前位置：首页 > news >正文

React:初识React

news 来源：原创 2025/5/10 8:10:57

React是什么？

React是由Meta公司研发，也就是Facebook的公司（马克扎克伯格这个见人）研发的构建Web和原生交互界面的库

不仅可以写网页，还可以写苹果和安卓上面的app

React的优势：

React也是前端里最流行的一个框架

搭建环境

使用cra快速搭建开发环境，create-react-app是一个快速创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用

首先安装node.jsNode.js安装及环境配置超详细教程【Windows系统】_windows 安装nodejs-CSDN博客

# 安装 nvm（如果尚未安装）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
#输入这个命令记得翻墙

# 重新加载 shell 配置
source ~/.bashrc  # 或者 source ~/.zshrc（如果你使用 zsh）

# 安装最新版本的 Node.js
nvm install --lts

# 或者安装特定版本（例如 v16）
nvm install 16

# 设置默认版本
nvm alias default 16

node -v  # 应该显示 v14 或更高版本
npm -v   # 确保 npm 也更新到最新版本

安装完node.js创建一个react文件

npx create-react-app react-basic

这就代表好了！

好了

启动npm:

npm start

出现这个画面说明你的项目创建成功并且可以启动了

介绍项目

package.json是项目的包文件，里面包括了一些核心包

选中部分为本次项目它依赖的一些核心包

下面这俩是最最最核心的包

"react": "^19.0.0",
    "react-dom": "^19.0.0",

下面这段包含的是可执行的命令，我们刚刚启动npm的命令就来自于这里

常用的命令有start和build，build负责打包

这是src，是我们的源码目录

打开index.js，对里面的文件做清理

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

对App.js做清理

function App() {
  return (
    <div className="App">
   this is App
    </div>
  );
}

export default App;

如果出现这个界面说明清理工作一切正常

index.js是整个项目的入口，下面框出来的是react依赖的两个核心包

这个id为root的节点在public里的index.html里

所以index.js做的事就是把这个项目的根组件以React的方式渲染到public文件里的这个位置上👆

App.js是一切项目的根基，组件是从这个地方往下发散的，它被引入到index.js里，然后渲染到了public里的index.html里叫root的div里

App->index.js->public/index.html(root)

后面的基础语法都在App.js里

JSX基础

概念和本质

JSX:JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML模版结构,它是React中编写

UI模版的方式

下图框出来的地方就是JSX，他书写的地方在函数的内部

优势（经典既要又要）：

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

JSX的本质

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

JSX->babel解析->js函数

使用BABEL转化工具体验一下

高频场景

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

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

export default App;

只能写表达式，不能写语句（if语句、switch语句、变量声明属于语句，不是表达式，不能出现在{}中）

eg:实现列表渲染

循环哪个结构就在App方法里return哪个结构：

key是React里提升框架性能的，独一无二，赋值为字符串或number id

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

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

export default App;

愤怒

又好了嘻嘻

实现基础条件渲染

条件渲染就是根据条件进行渲染，有名字渲染名字，没名字渲染请登录

多种条件渲染的语法：在React中，可以通过逻辑与运算符&&（两种情况）、三元表达式（?:）（多种情况）实现基础的条件渲染

逻辑与&&，短路运算符

如果左侧的值为 true，则返回右侧的值。

如果左侧的值为 false，则直接返回 false，不会计算右侧的值。

const isLogin=true

function App() {
  return (
    <div className="App">
      this is App
    {/* 逻辑与&&，短路运算符 */}
    {isLogin&&<span>this is span</span>}
    </div>
  );
}

export default App;

三元表达式不用多说

const isLogin=false
function App() {
  return (
    <div className="App">
      this is App
    {/* 逻辑与&&，短路运算符 */}
      {isLogin && <span>this is span</span>}
      {/* {三元表达式} */}
      {isLogin?<span>荷叶饭</span>:<span>loading...</span>}
    </div>
  );
}

export default App;

一想到这个玩意在后盾人里的课可能两句话就带过去了我就想笑

实现复杂的条件渲染

复杂的就是当有多种情况需要渲染时，&&和三元表达式不能满足要求

比如新闻渲染的时候有的没有图片，有的一张图片，有的三张图片，单独写一个函数来处理

const articleType = 1//0,1,3
//定义核心函数：根据不同文章类型返回不同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">
      this is App
      {getArticleTem()}
    </div>
  );
}

export default App;

React中的事件绑定

语法： on + 事件名称 = { 事件处理程序 } ，整体上遵循驼峰命名法

function App() {
  const handleClick = () => console.log('button被点击了')
  return (
    <div className="App">
     <button onClick={handleClick}>click me</button>
 </div>
  );
}

export default App;

当事件绑定需要获取事件对象e时，语法：在事件回调函数中设置形参e，和原生js是一样的

function App() {
   const handleClick = (e) => console.log('button被点击了e:',e)
  return (
    <div className="App">
     <button onClick={handleClick}>click me</button>
 </div>
  );
}

export default App;

可以获取事件对象捏

传递自定义参数：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参

需要传递额外的参数，才需要使用箭头函数（如 onClick={() => handleClick('荷叶饭')}）。

function App() {
  const handleClick = (name) => console.log('button被点击了name:',name)
  return (
    <div className="App">
     <button onClick={()=>handleClick('荷叶饭')}>click me</button>    </div>
  );
}
export default App;

这个箭头函数是必须的，如果写成onClick={handleClick('荷叶饭')}，handleClick 函数会在渲染时立即执行，而不是在点击时执行，箭头函数可以延迟函数的执行，直到点击事件发生。

箭头函数的等价写法

<button onClick={function() { handleClick('荷叶饭'); }}>click me</button>

但是不简洁，更推荐箭头函数

如果我们既要有要，既要事件对象e，也要额外参数怎么解决？

箭头函数传参数给普通函数函数再去接收参数

function App() {
  const handleClick = (name,e) => console.log('button被点击了name:',name,'e:',e)
  return (
    <div className="App">
     <button onClick={(e)=>handleClick('荷叶饭',e)}>click me</button>   
 </div>
  );
}

export default App;

组件

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

root是根组件，header是左边的灰块的上部分，main是左侧在主体区域，aside是右边的

main里重复的两块就是article*2，aside里重复的就是item*3

组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用

流程：定义组件->使用组件

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

即可

两种使用方法

//定义组件
function Button() {
  //组件内部逻辑
  return <button>click me!</button>
}

function App() {
  // const handleClick = (name,e) => console.log('button被点击了name:',name,'e:',e)
  return (
    <div className="App">
      {/*使用组件（渲染组件）*/}
      {/*自闭和使用*/}
      <Button />
      {/*成对标签使用*/}
      <Button></Button>
    </div>
  );
}

export default App;

组件其实就是个函数，比较灵活，首字母大写，有两种使用方法：自闭和和成对标签，像标签一样灵活