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对象

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实现列表渲染

javascript 复制代码

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>}

javascript 复制代码

const loading = true;

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

JSX实现复杂的条件渲染

多if语句

react 复制代码

const type = 1; // 类型 0, 1 ,2

function 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。

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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

React组件

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

javascript 复制代码

//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的参数将作为初始值

javascript 复制代码

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

修改状态的规则

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

javascript 复制代码

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类名控制

css 复制代码

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

javascript 复制代码

//导入样式
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

代码片段：

javascript 复制代码

    {/*引入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

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

javascript 复制代码

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

demo:

javascript 复制代码

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钩子函数，分为两步：

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

javascript 复制代码

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>
    );
}