weixin_58726419的博客

1、什么是虚拟DOM？ 虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。2、虚拟DOM实现的原理？1)虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象2)状态变更时，记录新树和旧树的差异3)最后把差异更新到真正的dom中3、类组件和函数组件之间的区别是啥？ 类组件可以使用其他特性，如状态 state 和生..

目录创建项目项目目录的变化tsconfig的介绍类型声明文件的使用说明使用场景类型声明-内置类型声明文件类型声明-第三方库的类型声明文件自带类型声明的不带类型声明的类型声明-自定义的文件项目内共享类型为已有 JS 文件提供类型声明如何基于现有的.js提供声明文件?类型声明文件的使用说明创建项目打开终端，执行命令npx create-react-app 项目名称 --template typescript说明：在.

目录项目打包项目本地预览打包体积分析生产环境优化路由懒加载去掉console配置CDN项目打包通过命令对项目进行打包 在项目根目录打开终端，输入打包命令：npm run build 等待打包完成，打包后的内容被放在项目根下的 build 文件夹中 项目本地预览在本地预览打包后的项目 全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务 在项目根目录中执行命令：.

React 路由介绍现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面） 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系 使用 React 路由简单来说就是：配置路径和组件（配对） ...

问题：获取数据时，如何发ajax拿数据，并保存到redux中？方案1：在业务组件中发请求，拿到数据之后，再dispath方案2：在业务组件中直接dispatch，在dispatch中发请求，然后保存redux。redux-中间件-理解中间件：middleware。用来在不损害原功能的前提下，引入额外的代码来拓展功能。Redux 中间件 中间：在 dispatch action 和 到达 reducer 之间 图示没有中间件： disp..

目录ProvideruseSelectoruseDispatchreact-redux-Providerreact-redux-useSelector-useDispatchReducer 的分离与合并-思路Reducer 的分离与合并-实现使用react-redux简化redux在react项目中的使用步骤 安装 npmi react-redux 使用 按redux的要求，创建好store, reducer,action等等 从

redux 是什么?Redux 是 JavaScript 应用的状态容器，提供可预测的状态管理。当遇到如下问题时，建议开始使用 Redux： 你有很多数据随时间而变化 你希望状态有一个唯一确定的来源 你发现将所有状态放在顶层组件中管理已不可维护 redux 和 react 的关系Redux并不只为react应用提供状态管理， 它还支持其它的框架。为什么Rect要用 ReduxReact 是 DOM 的一个抽象层（UI 库），并不是 Web 应用的完整

useContext步骤共3步：1. 导入并调用createContext方法，得到Context对象，导出import { createContext } from 'react'export const Context = createContext()2. 使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据return ( <Context.Provider value={ 这里放要传递的数据 }> <根组件的内...

使用 useRef 操作DOM使用场景：在 React 中进行 DOM 操作时，用来获取 DOM作用：返回一个带有 current 属性的可变对象，通过该对象就可以进行 DOM 操作了。const inputRef = useRef(null)解释： 参数：在获取 DOM 时，一般都设置为 null 返回值：包含 current 属性的对象。 注意：只要在 React 中进行 DOM 操作，都可以通过 useRef Hook 来获取 DOM（比如，获取 DOM.

目录useEffect-基本使用useEffect-设置依赖项useEffect的完整格式useEffect数据持久化useEffect发送请求useEffect-副作用函数的返回值-清理副作用示例-模拟 类组件生命周期useEffect-清理副作用-案例自定义hooks理解副作用副作用（Side Effects；Adverse Reactions）系指应用治疗量的药物后所出现的治疗目的以外的药理作用事物的主要作用之外的，就是副作用。.

hooks是什么？Hooks：钩子、钓钩、钩住。是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。作用： 为函数组件提供状态、生命周期等原本 在Class 组件中才提供的功能 Hooks 只能在函数组件中使用 可以理解为通过 Hooks 为函数组件钩入 class 组件的特性 Hooks 前后，组件开发模式的对比

问题导入export default class App extends Component { state = { n: 1 } hClick = () => { this.setState({n: 100}) console.log(this.state.n) // 1 console.log(document.getElementById('span').innerHTML) // 这会打印 1 } render

目录生命周期钩子函数react类组件的生命周期钩子函数-整体说明组件生命周期-挂载阶段组件生命周期-更新阶段更新阶段的钩子三种触发更新更新阶段能做的事情组件生命周期-卸载阶段生命周期生命周期：一个事物从创建到最后消亡经历的整个过程组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等钩子函数在生命周期的不同阶段，会自动被调用执行的函数，为开发

定义，并默认导出组件import React, { Component } from 'react'export default class Com extends Component { render() { return <div>$2</div> }}导入组件import Com from './Com.js'render(<Com></Com>)注意:组件名采用大驼峰命名法 , 组件文件名与组件名一致...

react 中如何获取表单元素（例如输入框）?初始代码class App extends React.Component { render() { return ( <div> <h1>如何获取input中的值</h1> <p><input type="text" /></p> <button>点击按钮</button> .

组件对特定功能的封装，主要用来对UI进行拆分。内容结构 HTML样式 CSS逻辑 JS特点 独立 可复用 可组合 分类 基础组件：指input、button这种基础标签，以及antd封装过的通用UI组件 业务组件：由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框 区块组件：由基础组件组件和业务组件组合成的UI块 页面组件：展示给用户的最终页面，一般就是对应一个路由规则 React 组件的两

JSX是什么JSX：是 JavaScript XML的缩写 在 JS 代码中书写 XML 结构 注意：JSX 不是标准的 JS 语法，是 JS 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。 React用它来创建 UI（HTML）结构 理解：我们之前用html写页面，现在是用jsx来写页面jsx示例优势 采用类似于 HTML 的语法，降低了学习成本，会 HTML 就会 JSX

目录目标思路使用步骤1.安装eslint插件2.安装eslint的包3. 在项目根目录，运行 npx eslint --init​4. 设置vscode的自动保存格式化环境配置-引入prettier-now1.安装vscode插件prettier-now2. 补充配置目标在react项目中配置eslint，并启用保存自动格式化功能思路 在项目中安装eslint 用eslint的init命令创建eslint配置文件 设置..

脚手架create-react-app官方工具: create-react-app创建方式11.先全局安装脚手架工具包命令：npm i -g create-react-app2.用脚手架工具来创建项目命令：create-react-app 项目名称创建方式2直接使用npx来创建项目命令： npx create-react-app 项目名称解释： npx create-react-app 是固定命令，create-react-app 是 React .