【前端】React笔记

React基础

什么是JSX？

• JavaScripts + XML: 表示在JS代码中编写HTML模版结构,它是React中编写UI模版的方式。
• JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具（BABEL）做解析之后才能在浏览器中运行

在JSX中使用JS表达式

在JSX中可以通过 大括号语法{} 识别JavaScript中的表达式

• 使用引号传递字符串
• 使用JavaScript变量
• 函数调用和方法调用
• 使用JavaScript对象

React 事件绑定

• React 基础事件绑定：on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法
• 使用事件对象参数：在事件回调函数中设置形参e
• 传递自定义参数：事件绑定的位置改造成箭头函数的写法
• 同时传递事件对象和自定义参数：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应

React 组件

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

• 状态不可变

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

• 修改对象状态

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

React 副作用管理

• useEffect

  useEffect是一个React Hook函数，用于在React组件中创s建不是由事件引起而是由渲染本身引起的操作（副作用）, 比 如发送AJAX请求，更改DOM等等

• useEffect依赖说明

  useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现

• 没有依赖项 组件初始渲染 + 组件更新时执行

• 空数组依赖 只在初始渲染时执行一次

• 添加特定依赖项 组件初始渲染 + 依赖项变化时执行

React 路由

npm create-react-app react-router-pro # 使用CRA创建项目
npm i react-router-dom # 安装最新的ReactRouter包
npm run start # 启动项目

路由导航

声明式导航

声明式导航是指通过在模版中通过 组件描述出要跳转到哪里去，比如后台管理系统的左侧菜单通常使用这种方式进行

编程式导航

编程式导航是指通过 useNavigate 钩子得到导航方法，然后通过调用方法以命令式的形式进行路由跳转，比如想在登录请求完毕之后跳转就可以选择这种方式，更加灵活

导航传参

嵌套路由配置

什么是嵌套路由?

在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由，例如：

嵌套路由配置

• 使用 children属性配置路由嵌套关系
• 使用 组件配置二级路由渲染位置

craco

• 配置‘@’全局路径

Mock

前端在没有后端接口支持下进行接口数据模拟

插件

• lodash
• classnames：classnames是一个简单的JS库，可以非常方便的通过条件动态控制class类名的显示
• day.js
• craco
  • 配置‘@’全局路径