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

初识React

news 来源：原创 2025/4/29 15:45:14

React由Meta公司研发，是一个用于构建Web和原生交互界面的库

搭建开发环境

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

//执行命令：
npx create-react-app react-basic
npx Node.js    //工具命令，查找并执行后续的包命令
create-react-app     //核心包（固定写法），用于创建React项目
react-basic React 项目的名称 //（可以自定义）

创建React项目的更多方式

启动一个新的 React 项目 – React 中文文档https://zh-hans.react.dev/learn/start-a-new-react-project 先安装node.js

不同系统不同版本有差异，可以用新版的比较好

安装过程就看你对自己环境的熟悉程度了

去某猴上找了篇文章问了问豆包安完了：

哈哈气笑了。

终于解决了。

密码的react你要几把干啥？？？

又有问题了。。。。。

又解决了，已经有心理阴影了别管了

之前不是使用的 create-react-app吗，然后提示我是依赖解析冲突了

豆包给出的解决方案（为什么不用deepseek呢？呵呵呵因为它很忙呵呵）：

方法一是当没看见问题，我最怕潜在的bug了会不知道什么时候给我一脚

方法二需要更多的经验和技术，但由于本人只具备了信息检索能力以及已经和这个包鏖战许久了，否决

方法三直接把问题逃避换一种思路最喜欢了

然后我就用vite了

但是还没学感觉差也差不多。。。

我目前的理解就是需要一个工具去使用react而课程讲的是create-react-app而我换了一种新工具Vite

还不太会用我再看看

但是创建成功了也来看看吧，首先是package.json里面两个核心的包：

"dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },

这是一些可执行的命令：

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

build是打包时候执行的命令

我们就关注核心的依赖和命令就好了

而src是源码目录，我们的工作一般都在这里进行

但是他说最重要的两个东西和Vite里面的不同。

重要的是index.js和App.js

他把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;

解释一下：

//项目入口 从这开始运行
//核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

//导入根组件
import App from './App';

//把App根组件渲染到id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

JSX基础

概念和本质

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

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

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

识别js表达式

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

1. 使用引号传递字符串

2. 使用JavaScript变量

3. 函数调用和方法调用

4. 使用JavaScript对象

呵呵试了一下发现又可以使用了，使用方法就是进入项目目录，然后npm start

好了现在彻底卡住了又连不上了

//项目的根组件
//App -> index.js -> public/index.html(root)
const count =100
function getName(){
  return 'jack'
}
function App() {
  return (
    <div className="App">
      this is App
      {'this is message'}
      {count}
      {getName()}
      {new Date().getDate()}
      <div style={{color: 'red'}}>this is div</div>
    </div>
  );
}

export default App;

事实证明上面四种确实可行

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

实现列表渲染

在JSX中可以使用原生JS中的map方法遍历渲染列表

key是react规定的渲染性能的一个属性

通常会加上一个独一无二的key，使用字符串或者number id

key的作用是react框架内部使用提升更新性能

实现基础条件渲染

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

实现复杂条件渲染

需求：列表中需要根据文章状态适配三种情况，单图，三图，和无图三种模式

解决方案：自定义函数 + if判断语句

事件绑定

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

使用事件对象参数语法：在事件回调函数中设置形参e

怎么传递自定义参数呢？

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

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

  //传递自定义参数
  const handleClick = (name)=>{
    console.log('button被点击了',name)
  }
  return(
    <div>
      <button onClick={()=>{handleClick('jack')}}>click me</button>
    </div>
  )
}
export default App;

注意：不能直接写函数调用，这里事件绑定需要一个函数引用

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

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

  //传递自定义参数
  const handleClick = (name,e)=>{
    console.log('button被点击了',name,e)
  }
  return(
    <div className="App">
      <button onClick={(e)=>{handleClick('jack',e)}}>click me</button>
    </div>
  )
}
export default App;

React组件基本使用

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

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

就像是换装小游戏。。。

4399上现在也有防沉迷了。。而且很多的H5换装小游戏都要看广告，，，给我一种永远回不去的感觉，，，

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

function Button(){
  return <button>click me</button>
}
function App() {
  return (
    <div>
      {/*自闭和*/}
      <Button />
      {/*成对标签*/}
      <Button></Button>
    </div>
  )
}
export default App;

就是先定义后使用

useState

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

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

import {useState} from 'react'
function App() {
  //setCount修改变量的方法
  const [count,setCount] = useState(0)
  //点击事件回调
  const handleClick = ()=>{
    //用传入的新值修改count
    //使用新的count渲染UI
    setCount(count + 1)
  }
  return(
    <div>
      <button onClick={handleClick}>{count}</button>
    </div>
  )
} 
export default App;

修改状态的规则

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

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

直接修改原对象，不引发视图变化，调用set传入新对象用于修改

import {useState} from 'react'
function App() {
  //setCount修改变量的方法
  let [count,setCount] = useState(0)
  //点击事件回调
  const handleClick = ()=>{
    //用传入的新值修改count
    //使用新的count渲染UI
    setCount(count + 1)
  }
  const [form,setForm] = useState({name:'jack'})
  const changeForm=()=>{
      //错误写法：直接修改
      setForm({
        ...form,
        name:'john'
      })

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