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

React基础（1）

news 2025/7/22 15:37:26

煮啵假期也是玩了十几天加上快一个月期末，一个多月都没有继续学React了今天跟着进度来听黑马的React天都塌了，好多都忘了怎么写了所以准备每天跟进一下学习笔记后面好复习

创建React项目

创建React项目使用webpack工具这也是工程化的表现。有很多创建方法比如vite（vite使我旋转）

npm create vite@latest 使用run dev启动或者使用CRA(crate-react-app 项目名称) npm start 这里就不一一介绍了

一，基础语法

对于React我们一般使用jsx语法也就是在js里面写html。看看🌰

function App() {const num=100;return (<div>hello{/* 大括号语法使用 */}{/* 1.使用引号输出字符串 */}{'我是一串字符串'}{/* 方法的调用 */}{new Date().getTime()}{/* 变量的输出 */}{num}{/* 使用js对象 */}{/* 外层的大括号是一个识别的作用 可以忽略 */}<div style={{color:'red'}}>nihoa</div>{/* if switch 变量声明 不能出现在大括号里 只有表达式才能出现在大括号里面 */}</div>);
}

从上面的栗子我们可以看到 jsx中的html一般写在return返回部分而逻辑结构一般写在函数里面这就是React的函数式编程（当然也有类组件）在return的部分我们可以使用大括号“{}”语法来输出一些简单的表达式（只有表达式可以被大括号识别并输出但是对于if,switch等“语句“来说是不能被输出的！！！

二，其他语法应用

（1）jsx实现列表渲染

这里我们需要使用数组的map方法

const list=[{id:1,name:'1'},{id:2,name:'2'},{id:3,name:'3'}]
function App(){return (<div><ul>{/* 这里在li标签里面的key属性是用来做标记的 提升React的渲染性能 */}{list.map(item=><li key={item.id}>id:{item.id},name:{item.name}</li>)}</ul></div>)
}
export default App

需要注意的是这里 li 标签有一个key属性这个key就是li的id 可以提升React的运行速度。

（2）jsx实现条件渲染

这里的条件分为复杂条件（就是多条件）和简单条件（两个条件以下）

1.简单条件

我们可以使用&&（逻辑运算符）或是三元运算符来解决来看看栗子


const islogin=true;
function App(){return(// 如果逻辑控制是单一控制就使用&&运算符 // 如果多逻辑控制是同三元运算符<div>{islogin&&<span>已登录</span>}{islogin?<span>已登录</span>:<span>未登录</span>}</div>)
}export default App

原理很简单哈就不说了

2,复杂条件

就是三个或三个以上条件的我们可以使用switch或是if来解决先写一个判断函数然后利用大括号输出函数就行

//使用自定义函数与if语句来处理复杂情况下的渲染
const articleType=1;
function getArticleType(){if(articleType===1){return <div>普通文章</div>;}else if(articleType===2){return <div>无图文章</div>;}else{return <div>未知文章类型</div>;}
}
function App(){return(<div>{getArticleType()}</div>)
}export default App

三，事件绑定

事件绑定也分为几个类型哈 1.不需要参数不需要事件对象 2.需要参数 3.需要参数和事件对象

（1）不需要参数事件

这一类很简单就是在标签上加上onClick属性里面加上自己设置的事件函数

function App(){function handleClick(){console.log(10)        }return(<div><button onClick={handleClick}>点击</button></div>)
}

这就是最简单的事件绑定

(2) 需要参数或者需要事件对象

1.需要参数的

function App(){function handleClick(name){console.log(name)        }return(<div><button onClick={()=>handleClick(name)}>点击</button></div>)
}

2.需要事件对象的

function App(){function handleClick(e){console.log(e)        }return(<div><button onClick={(e)=>handleClick()}>点击</button></div>)
}

(3)两者都需要的

import React, { useState } from 'react';function App() {const [count, setCount] = useState(0);function handleClick(name,e) {setCount(count + 1);console.log(e);console.log(name);}return (<div><button onClick={(e)=>handleClick(can,e)}></button> </div>);
}export default App;

只要在用的时候记住这几种形式就基本不会出错了，我们直接来看useState内容

四，useState

这个hook（钩子api）是React交互的核心用来控制状态变量改变页面的刷新状态的，也就是数据驱动视图

1.基本使用

先引入useState这个钩子（一般会自动引入）直接来看一下怎么使用吧

// useState 就是一个控制状态变量的开关 状态变量可以通过useState来影响页面的渲染
//数据驱动视图
import React, { useState } from "react";function App(){//count 状态变量//setCount 修改count状态变量的函数const[count,setCount]=useState(0);//尽量吧一个组件函数的事件函数写在一个组件函数中function handleClick(){setCount(count+1);}return(<button onClick={handleClick}>点击{count}</button>)
}export default App;

当我点击按钮之后该组件都会刷新这给我们造成了一种错觉就是count是在自增的其实并不是哈这里的count相当于是一个只读属性的常量他是不会自增的，在React中状态默认是只读的我们看到的状态改变是页面重新刷新后重新对状态变量的赋值但为刷新的情况的状态默认是常量。

2.修改复杂数据类型的方法

上个栗子里面我们使用了setcount去修改一个简单数据类型但是对于对象等复杂数据类型想去修改就要在set函数中设置一个新的对象，来看栗子

import React, { useState } from "react";// 复杂数据类型的修改方法
function App(){const[obj,setObj]=useState({name:'张三',age:18});function handleClick(){//使用setObj方法传入一个全新的对象setObj({...obj,name:'李四'})document.write(obj.name+obj.age);}return(<button onClick={handleClick}>点击</button>)
}export default App;

这就是今天的学习记录哈，谢谢诸位指出错误

查看全文

http://www.dtcms.com/a/291532.html