React
文章平均质量分 51
React学习专栏
吾昂王sun
我想要两颗西柚
I want to see you
展开
-
React进阶 - 路由
SPA理解单页Web应用(single page web application,SPA)整个应用只有一个完整的页面点击页面中的链接不会刷新页面,只会做页面的局部更新数据都需要通过ajax请求获取,并在前端异步展现路由理解路由定义一个路由就是一个映射关系(key:value)key为路径,value可能是function或component路由分类后端路由:理解:value是function,用来处理客户端提交的请求注册路由:router.get(path,functio原创 2022-03-23 14:36:02 · 155 阅读 · 0 评论 -
React进阶 - 配置代理、组件传参
配置代理方式一在package.json文件中添加如下代码"proxy": "http://localhost:8091" // proxy的值替换为需要解决跨域的地址⚠️ 说明:优点:配置简单,前端请求资源时,可以不加任何前缀缺点:只能配置一个地址方式二第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js编写setupProxy.js配置具体代理规则const proxy = require('http-proxy-middleware原创 2022-03-20 17:17:48 · 1302 阅读 · 0 评论 -
React进阶 - React脚手架
创建项目并启动全局安装:npm i -g create-react-app切换到要创建项目的文件夹,使用命令:create-react-app hello-react进入项目文件夹:cd hello-react启动项目:npm start:⚠️上述操作也可以使用yarn进行安装React脚手架项目结构public – 静态资源文件夹favicon.icon – 网站页签图标index.html – 主页面logo192.png – logo图logo512.p原创 2022-03-19 17:23:00 · 317 阅读 · 0 评论 -
React基础 - 虚拟DOM与Diff算法
虚拟DOM原理当Node节点的更新,虚拟DOM会比较两棵DOM树的区别,保证最小化的DOM操作,使得执行效率得到保证。计算两棵树的常规算法是O(n^3)级别,所以需要优化深度遍历的算法。React diff算法的时间复杂度为O(n)。虚拟DOM图解常见面试题react/vue中的key有什么作用?(key的内部原理是什么?)为什么遍历列表时,key最好不要用index?虚拟DOM中key的作用:简单地说:key是虚拟DOM对象的标识,在更新显示时key起着极其重要的作用详细的说原创 2022-03-17 10:33:03 · 265 阅读 · 0 评论 -
React基础 - 生命周期
理解组件从创建到死亡会经历一些特定的阶段React组件中包含一系列钩子函数(生命周期回调函数),会在特定的时刻调用我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作生命周期(旧)初始化阶段:由ReactDOM.render()触发 – 初次渲染constructor()componentWillMount()render():初始化渲染或更新渲染调用componentDidMount():在此钩子中做初始化的事,例如:开启定时器、发送网络请求、订阅消息更新阶段:由原创 2022-03-16 16:23:08 · 1203 阅读 · 0 评论 -
React基础 - 表单及高阶组件
理解受控组件就是可以被 react 状态控制的组件在 react 中,input、textarea 等组件默认是非受控组件(输入框内部的值是用户控制,和React无关)但是也可以转化成受控组件,就是通过 onChange 事件获取当前输入内容,将当前输入内容作为 value 传入,此时就成为受控组件好处:可以通过 onChange 事件控制用户输入,使用正则表达式过滤不合理输入非受控组件代码演示<!-- 引入react核心库 --><script src="../js/r原创 2022-03-13 18:11:21 · 1109 阅读 · 0 评论 -
React基础 - 三大属性
state完整案例<script type="text/babel"> // 创建类组件 class Weather extends React.Component { constructor(props) { super(props); this.state = { isHot: true }; // 解决changeWeather中this指向问题 this.c原创 2022-03-13 16:52:07 · 1265 阅读 · 0 评论 -
React基础 - 简介及基本使用
简介官网中文官网英文官网特点声明式编码组件化编码React Native 编写原生应用高效(优秀的Diffing算法)react高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。DOM Diffing算法, 最小化页面重绘。基本使用相关库react.js:React核心库react-dom.js:提供操作DOM的react扩展库babel.min.js:解析JSX语法代码转为JS代码的库创建虚拟DOM的两种方式纯JS方式(一般不用)原创 2022-03-11 09:47:39 · 116 阅读 · 0 评论