React基础（1）
煮啵假期也是玩了十几天加上快一个月期末 ，一个多月都没有继续学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;
这就是今天的学习记录哈，谢谢诸位指出错误