React学习笔记
关注
分享
扫一扫
文章平均质量分 79
React学习笔记
家里有蜘蛛
未来可期
展开
-
简单分析react中的虚拟dom和diff算法
虚拟DOM的作用首先我们要知道虚拟dom的出现是为了解决什么问题的，他解决我们平时频繁的直接操作DOM效率低下的问题。那么为什么我们直接操作DOM效率会低下呢？比如我们创建一个div，我们可以在控制台查看一下这个div上自带或者继承了很多属性，尤其是我们使用js操作DOM的时候，我们的DOM本身就很复杂，js的操作也会占用很多时间，但是我们控制不了DOM元素本身，因此虚拟DOM解决的是js操作DOM这一层面，其实解决的是减少了操作dom的次数简单实现虚拟DOM虚拟DOM，见名知意，就是假的DOM原创 2021-04-16 21:23:04 · 649 阅读 · 3 评论 -
react学习笔记--搜索用户+pubsubjs（组件间通信）
react学习笔记–搜索用户index.jsimport React from 'react';import ReacDOM from 'react-dom';import App from './components/app';import './index.css';ReacDOM.render(<App/>, document.getElementById('roo...原创 2019-09-24 23:25:29 · 211 阅读 · 0 评论 -
vue和react两家对比之--组件之间的通信
vue和react两家对比之–组件之间的通信文章目录vue和react两家对比之--组件之间的通信Vue 组件通信vue 中子组件获取父组件的属性vue中父组件获取子组件的属性React 组件通信react 中子组件获取父组件的属性react中父组件调用子组件的属性Vue 组件通信vue 中子组件获取父组件的属性需要在组件标签中 加入自定义属性，然后再子组件中使用props接收这个传过来的...原创 2020-05-04 17:35:29 · 1628 阅读 · 0 评论 -
对比vue、react、小程序三家中循环的差异
对比vue、react、小程序三家中循环的差异文章目录对比vue、react、小程序三家中循环的差异vue小程序react为什么要对比这三家，因为比较像，而且现在这三家都很火。vuevue里面提供的循环种类还是挺多的，不仅可以遍历数组，还能循环对象里面的每个属性以键值对的形式展现，v-for迭代数字。 用法就是在标签中使用 v-for = " (item, index) in xxxx "...原创 2020-04-17 22:05:28 · 722 阅读 · 0 评论 -
antd+react项目总结（二 未完待续）
1.包装成路由组件withRouter2. this.props.location.pathname获取路由链接3. 这种模式只是模糊匹配 如果要精准匹配需要 exact = true，如下面写法<Route path = '/user' exact = {true} component = {Admin}/> 4.this.porps.history.replace(...原创 2020-01-18 19:43:06 · 504 阅读 · 0 评论 -
react-ui（antd-mobile库 按需加载）
react-ui（antd-mobile库）最流行的开源React UI组件库1.material-ui(国外) 官网: http://www.material-ui.com/#/ github: https://github.com/callemall/material-ui2 ant-design(国内蚂蚁金服) PC官网: https://ant.design...原创 2019-10-02 16:40:47 · 572 阅读 · 0 评论 -
react路由（react-router）
react路由react实现路由要借助库，我这里使用的是react-router，专门用来实现spa应用，而且很多项目都会使用到这个库。SPA: 单页Web应用（single page web application，SPA） 整个应用只有一个完整的页面 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求 当点击路由链接时, 只会做页面的局部更新 数...原创 2019-09-30 22:05:13 · 206 阅读 · 0 评论 -
react学习笔记--使用axios和fetch（实现Ajax）
react学习笔记–使用axios和fetch这个案例是再github上查询到star数量最多的指定的repository。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width...原创 2019-09-23 22:42:10 · 525 阅读 · 0 评论 -
react学习笔记--评论回复
react学习笔记–评论回复使用react 实现 在网页中的评论回复的功能如图这个小功能是基于脚手架上开发的，目的是熟悉一下脚手架的用法。图中的样式是直接使用的bootstrap样式。图中这个功能可以拆分为 4个组件分别为app.jsx 父组件、comment-add.jsx添加评论组件、comment-list 显示评论组件、comment-item.jsx 动态添加每一条评论组件。...原创 2019-09-22 19:27:37 · 1395 阅读 · 0 评论 -
react学习笔记--组件__收集表单数据（受控组件和非受控组件）
react学习笔记–组件__收集表单数据下面为效果图在输入时收集表单的数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...原创 2019-09-17 21:31:47 · 248 阅读 · 0 评论 -
react学习笔记--生命周期+实例
react学习笔记–生命周期+实例下面是一张生命周期图具体使用会在实例中介绍到<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...原创 2019-09-19 10:41:04 · 235 阅读 · 0 评论 -
react学习笔记--组合组件使用__交互
react学习笔记–组合组件使用__交互这个是效果图，点击add把文本框的内容添加到下面的list中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width...原创 2019-09-17 19:26:03 · 276 阅读 · 0 评论 -
react学习笔记--组件和state的简单使用（二）
react学习笔记–组件和state的简单使用（二 、点击字体改变部分文字）点击前和点击后的文字发生了改变，同时右侧的state勾选也发生了改变。详细如下代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </...原创 2019-09-15 10:32:06 · 167 阅读 · 0 评论 -
reaat学习笔记--组件（一）
reacat学习笔记–组件（一）分为简单组件和复杂组件1.简单组件使用function2.复杂组件使用class<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body>...原创 2019-09-15 10:22:43 · 394 阅读 · 0 评论 -
react学习笔记--jsx和原始方法
react学习笔记–jsx和原始方法<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="test1"></div> &l...原创 2019-09-15 09:54:42 · 209 阅读 · 0 评论 -
react学习笔记--Hello Worlld
react学习笔记–Hello Worlld!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head><body> <div id="text2"></div> <...原创 2019-09-15 09:26:39 · 177 阅读 · 0 评论