m0_45877477的博客

Failed to parse source map: 'webpack://antd/./components/icon/style/index.less' URL is not supported

有TabBar的页面使用嵌套路由来实现嵌套路由:路由内部包含路由

1 修改页面标题title2 基础样式调整

1 安装路由npm i react-router-dom@5.2.02 在pages下新建两个文件CityList/index.js和Home/index.js,创建对应的组件3 导入路由 Router、Route、Link4 使用Route组件配置 首页 和 城市选择页面

antd-mobile: 就是一个基于react的UI组件库符合ant design 移动规范的react实现适用于中大型产品的应用

介绍: 一个在线租房项目,实现了类似链家等项目的功能,解决了用户租房的需求.核心业务: 在线找房(地图、条件搜索)、用户登录、房源发布等技术栈: react核心库:react、react-dom、react-router-dom 脚手架: create-react-app 数据请求: axios UI组件库: antd-mobile 其他组件库: react-virtualized、formik+yup、react-spring等 百度地图API............

react路由默认情况下使用的是 模糊匹配模糊匹配规则: 只要pathname(link的to属性/地址栏url的pathname)是以的path属性的值开头,就能匹配成功

默认路由: 进入页面时就会匹配的路由 (一进页面就会展示组件)path是空的: "/" (没有link、没有编程式导航)

编程式导航: 通过js代码来实现页面跳转props.history.push()props.history.go()

Link组件用于指定导航链接(Link组件最终会被编译成a标签)Link组件的to属性的值: 最终会被编译成a标签的href 还表示浏览器地址栏中的pathname

为了使用单页面来管理原来多页面的功能,前端路由应运而生

ReactDOM.render is no longer supported in React 18. Use createRoot instead.

虚拟DOM本身就是一个JS对象,用来描述你希望在屏幕上看到的内容(UI)react更新视图的思想只要state变化了,就重新渲染视图。react是如何做到部分更新的?答虚拟DOM+Diff算法。部分更新,只更新变化的地方。......

问:如何避免不必要的渲染?答:用钩子函数shouldComponentUpdate解决(返回true重新渲染,返回false不重新渲染)为什么要用纯组件?纯组件内部自动实现了shouldComponentUpdate这个钩子函数,不需要手动比较

问: 当一个组件更新之后,会不会对其他组件有影响?答: 会更新自己以及子组件

JXL仅仅是createElement()的简化语法JXL语法 → createElement() → React元素

第二个参数:在状态更新后立即执行某个操作

高阶组件HOCHigher-OrderComponent,是一个函数,接收要包装的组件,返回增强后的组件目的实现状态逻辑复用高阶组件就相当于手机壳,采用包装(装饰)模式。

renderprops模式是做什么的?复用相似的功能→复用组件复用组件的state和操作state的方法。

组件从创建到挂载到页面上运行,再到组件不用时卸载的过程 叫生命周期只有类组件才有生命周期

当组件标签有子节点时,props就会有children属性,children属性的值就是子节点的内容

Context用途: 跨组件传递数据(比如:主题 语言) → 离得比较远的组件之间的通信Context提供了两个组件:Provider组件 和 Consumer组件Provider组件:提供数据的Consumer组件:消费数据的

子组件和父组件相互通信, 兄弟组件之间通信

1 传递数据时,可以传递任意类型的数据2 props是只读的对象,不能修改传过来对象的属性值3 使用类组件时,如果写了构造函数,应该将props传递给super(),否则无法在构造函数中获取到props

组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据.为了实现多个组件之间共享数据,就需要打破组件的独立封闭性,让组件与外界沟通,这个过程就是组件通讯.组件是封闭的,要接收外部数据通过props来实现.......

react简易聊天板

借助于ref,使用原生DOM方式来获取表单元素的值。

html的表单元素是可以输入的,也就是有自己的可变状态而react中的可变状态通常保存在state中,并且只能通过setState()方法来修改于是就发生冲突了那么解决办法是什么呢?react将state与表单元素的value值绑定在一起由state的值来控制表单元素的值受到react控制的表单元素 就叫 受控组件.........

安装react development tools插件(edge浏览器)

react中有很多地方会用到数据，数据在react中被叫做状态，我们需要一个专门管理状态(数据)的方法,于是state就诞生了

语法: on事件名称={事件处理程序}示例: onClick={()=>{}}

一 react组件介绍组件是react的一等公民,使用react就是在使用组件组件表示页面中的部分功能组合多个组件就可以实现完整的页面功能特点:可复用、独立、可组合二 创建组件的两种方式2.1 使用函数创建组件2.2 使用类创建组件 ...

两种方式:1 行内样式style*2 类名 className (推荐)

渲染一组数据,使用数组的map()方法map 遍历谁,就给谁添加key属性

条件渲染:根据条件渲染特定的JXL结构1 if else2 三元运算符3 逻辑与

为什么要嵌入JS表达式?因为数据存储在js中使用{}备注:1 {}可以使用任意的javaScipt表达式2 JXL自身也是javaScipt表达式

JXL:javaScipt xml的简写,在javaScipt中写xml(html)格式的代码JXL 是 react的核心内容JXL优点1 声明式的语法更加直观2 与html结构相同,降低了学习成本3 提升开发效率

react是一个用于构建用户界面(HTML页面)的javaScipt库 react主要用来写html页面,或构建web应用 从MVC的角度看,react仅仅是视图层V → 只负责视图的渲染 react起源于facebook的内部项目,于2013年5月开源 ......

vscode安装