React基础知识

说明：react版本为 18.3.1

React是什么

React由Meta公司研发，是一个用于构建Web和原生交互界面的库。（开发基于浏览器的web应用和基于mac和android的移动应用）

React的优势

1.相较于传统基于DOM开发的优势：组件化的开发方式、不错的性能。
2.相较于其他前端框架的优势：丰富的生态、跨平台支持。

开发环境搭建: 使用create-react-app快速搭建开发环境

create-react-app是一个快速创建React开发环境的工具，底层由Webpack构建，封装了配置细节，开箱即用。
执行命令：`npx create-react-app react-basic`
1. npx： Node.js工具命令，查找并执行后续的包命令
2. create-react-app 核心包（固定写法），用于创建React项目
3. react-basic React项目的名称（可以自定义）

其他创建方式：https://zh-hans.react.dev/learn/start-a-new-react-project

JSX

什么是JSX

概念：JSX是JavaScript和XML(HTML)的缩写，表示在js代码中编写HTML模板结构，它是React中编写UI模板的方式。
优势：1.HTML的声明式模板写法2.JS的可编程能力

JSX的本质

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

JSX中使用JS表达式

在JSX中可以通过大括号语法`{}`识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等。
1. 使用引号传递字符串
2. 使用JavaScript变量
3. 函数调用和方法调用
4. 使用JavaScript对象

const name = 'macy'function getName () {return name;
}function App() {return (<div>hello react{/*使用引号传递字符串*/}{'======'}{/*识别js变量*/}{name}{/*函数调用*/}{getName()}{/*方法调用*/}{new Date().getFullYear()}{/*使用js对象*/}<div style={{color: 'red'}}>看看</div></div>);
}

JSX实现列表渲染

const list = [{id: 1, name: '张三', age: 32},{id: 2, name: '李四', age: 30},{id: 3, name: '王五', age: 28},
]function App() {return (<div>{/*列表渲染*/}<ul>{list.map(item => <li key={item.id}>{item.name}</li>)}</ul></div>);
}

JSX实现条件渲染

语法：在React中，可以通过`逻辑与运算符&&`、`三元表达式（?:）`实现基础的条件渲染。
1. `逻辑与运算符&&`：{flag && <span>xxx</span>}
2. `三元表达式（?:）`：{flag ? <span>xxx</span> : <div>yyy</div>}

const loading = true;function App() {return (<div>{/* 条件渲染*/}{loading && <span>加载中</span>}{loading ? <span>加载中</span> : <span>加载成功！</span>}</div>);
}

JSX实现复杂的条件渲染

多if语句

const type = 1; // 类型 0, 1 ,2function getTempByType(type){if(type === 0){return <div>天气：晴🌤</div>}else if(type === 1){return <div>天气：雨🌧</div>}else if(type === 2){return <div>天气：雪🌨</div>}
}function App() {return (<div>{/* 复杂的条件渲染*/}{getTempByType(type)}</div>);
}

React中的事件绑定

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

function App() {const change = () =>{console.log('---点击按钮' )}return (<div><button onClick={change}>按钮</button></div>);
}

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

function App() {const change = (e) =>{console.log('---点击按钮',e )}return (<div><button onClick={change}>按钮</button></div>);
}

2.传递自定义参数，语法：事件绑定的位置改造成箭头函数的写法，在执行实际处理业务函数的时候传递实参(注意：不能直接写成函数调用，这里事件绑定需要一个函数引用)

function App() {const change = (name) => {console.log('---传递的参数：',name)}return (<div><button onClick={() => change('macy')}>按钮</button></div>);
}

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

function App() {const change = (name,e) => {console.log('---传递的参数：',name,e)}return (<div><button onClick={(e) => change('macy',e)}>按钮</button></div>);
}

React组件

组件是什么（组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用）
概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次
在react中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染组件只需要把组件当成标签书写即可

//1.定义组件
// function MyComponent() {
//     return <div>这是自定义组件内容</div>
// }
// 或者箭头函数方式
const MyComponent = () => {return <div>这是自定义组件内容</div>
}
function App() {return (<div>{/* 2.使用组件/渲染组件*/}{/*自闭和*/}<MyComponent />{/*    成对标签*/}<MyComponent></MyComponent></div>);
}

useState

useState基础使用

useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果
本质：和普通JS变量不同的是，状态变量一旦发生变化，组件的视图UI也会跟着变化（数据驱动视图）
语法：const [状态变量, 设置状态的函数] = useState(初始值)
例如：cosnt [count, setCount] = useState(0);1.useState是一个函数，返回值是一个数组2.数组中第一个参数是状态变量，第二个参数是set函数用来修改状态变量3.useState的参数将作为初始值

// useState实现一个计数器按钮
import { useState } from "react";
function App() {// 1.调用useState添加一个状态变量// count: 状态变量// setCount: 更新状态变量的函数const [count, setCount] = useState(0);// 2.点击事件回调const handleClick = () => {// 作用：1.用传入的新值修改count 2.重新使用新的count值渲染UIsetCount(count + 1);}return (<div><button onClick={handleClick}>{count}</button></div>);
}

修改状态的规则

状态不可变：在react中，状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新
const handleClick = () => {// 1.不能触发视图更新// count ++// 2.可以触发视图更新setCount(count + 1);
}
修改对象状态
规则：对于对象类型的状态变量，应该始终传给set方法一个全新的对象来进行修改

import { useState } from "react";
function App() {// 1.调用useState添加一个状态变量const [user, setUser] = useState({name: 'macy', gender: '男'});// 2.点击事件回调const handleClick = (gender) => {// 1.错误写法// user.gender = gender// 2.正确写法setUser({...user,gender,})}return (<div><div>{user.name} --- {user.gender}</div><button onClick={() => handleClick('女')}>点击</button></div>);
}

组件的样式处理

组件基础样式方式

react组件基础的样式控制有两种方式：1.行内样式（不推荐）  2. css类名控制

/*index.css文件内容：*/
.my-style{color: green;font-size: 50px;
}
.new-style{color: pink;
}
.foo{font-weight: bold;
}

//导入样式
import './index.css'const style = {color: 'blue',fontSize: '28px'
}
const flag = true
function App() {return (<div>{/* 行内样式控制 */}<div style={{color: 'red',fontSize: '18px'}}>hello react</div><div style={style}>hello react!!!</div>{/* 通过class类名控制*/}<div className="my-style">hello world</div>{/* 通过条件控制类名*/}<div className={`my-style ${flag && 'new-style'}`}>hello world</div></div>);
}

引入classnames库

地址：https://github.com/JedWatson/classnames
代码片段：

    {/*引入classnames库*/}<div className={classNames('my-style', {'new-style':flag, 'foo': flag})}>hello world</div>

受控表单绑定

概念：使用React组件的状态（useState）控制表单的状态React(state) <====> <input/> (value)    1.state绑定到input的value属性2.把input最新的value值设置给state

1. 准备一个react状态值
   const [value, setValue] = useState('')
2. 通过value属性绑定状态，通过onChange属性绑定状态同步的函数

<input type="text" value={value} onChange={(e) => setValue(e.target.value)}/>

demo:

import {useState} from "react";function App() {// 通过value属性绑定react状态const [value, setValue] = useState('');return (<div><p> 状态值：{value}</p>{/*绑定onChange事件，通过参数e拿到输入框最新的值，反向修改到react状态*/}<input type="text" value={value} onChange={(e) => setValue(e.target.value)}/></div>);
}

React中获取DOM

在React组件中获取/操作DOM，需要使用useRef钩子函数，分为两步：

1. 使用useRef创建ref对象，并于jsx绑定
   const inputRef = useRef(null)
   
2. 在DOM可用时，通过inputRef.current拿到DOM对象
   console.log（inputRef.current）

import {useRef} from "react";function App() {// useRef生成ref对象，并绑定到dom标签上const inputRef = useRef(null)// dom可用时，ref.current获取dom// 渲染完毕之后dom生成之后才可用const handleClick = () => {console.dir(inputRef.current)}return (<div><input type="text" ref={inputRef}/><button onClick={handleClick}>点击</button></div>);
}