reactjs
关注
分享
扫一扫
文章平均质量分 52
reactjs
快乐de馒头
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
十八、react拓展 - setState - 路由组件懒加载 - Hooks - Fragment - Context - PureComponent - 插槽 - 错误边界 - 组件通信方式总结
对象式的setState是函数式的setState的简写方式【语法糖】使用原则如果新状态不依赖于原状态【使用对象方式】如果新状态依赖于原状态 【使用函数方式】如果需要在setState()执行后，获取最新的状态数据，可以在第二个callback函数中读取到异步更新的最新值父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）原创 2022-08-20 20:57:53 · 434 阅读 · 0 评论 -
google浏览器打包扩展程序
扩展程序路径：C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Extensions。打开Google浏览器扩展程序，然后勾选开发者模式。下面的id对应最上面路径中的文件夹名字，对应的是。打包扩展程序，打包就可以了。...原创 2022-08-17 17:17:28 · 774 阅读 · 0 评论 -
十七、redux
store.js：1). 引入redux中的createStore函数，创建一个store2). createStore调用时要传入一个为其服务的reducer3). 记得暴露store对象preState,action，返回加工后的状态reducer有两个作用：初始化状态，加工状态reducer被第一次调用时，是store自动触发的，传递的preState是undefined,在index.js中监测store中状态的改变，一旦发生改变重新渲染.........原创 2022-08-15 19:22:45 · 343 阅读 · 0 评论 -
十六、react UI组件库
其它组件库：饿了么UI。原创 2022-08-15 16:10:10 · 414 阅读 · 0 评论 -
十五、react 路由
一个路由就是一个映射关系(key: value)key为路径,value可能是function或component。原创 2022-08-14 16:03:54 · 395 阅读 · 0 评论 -
十四、Ajax 相关 - axios，配置代理解决跨域问题 -消息订阅/发布机制 - PubSubJS - Fetch - github用户搜索案例
工具库: PubSubJS下载:使用在【接收】数据的组件中【订阅】消息import PubSub from 'pubsub-js' //引入// 订阅PubSub.publish('delete', data) // 发布消息 携带数据设计状态时要考虑全面，例如带有网络请求的组件，要考虑请求失败怎么办。ES6小知识点：解构赋值+重命名//传统解构赋值//连续解构赋值//连续解构赋值+重命名消息订阅与发布机制先订阅，再发布（理解：有一种隔空对话的感觉）适用于任意组件间通信。............原创 2022-08-13 17:42:41 · 327 阅读 · 0 评论 -
十三、TodoList案例
之前用Vue写过这个页面，这次用再写一次，步骤功能都是类似的，就是语法和用法有点区别可以对比着学习一下。原创 2022-08-12 17:57:45 · 447 阅读 · 0 评论 -
十二、React脚手架
1.1. react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件化, 工程化1.2. 创建项目并启动。...原创 2022-08-11 19:42:45 · 3046 阅读 · 0 评论 -
十一、DOM的Diffing算法
代码】十一、DOM的Diffing算法。原创 2022-08-11 15:58:00 · 230 阅读 · 0 评论 -
十、react生命周期钩子（新）
componentDidUpdate(prevProps, prevState, snapshotValue) —— 组件完成更新。由组件内部this.setSate()或父组件重新render触发或强制更新forceUpdate()getDerivedStateFromProps() —— 从props得到一个派生的状态 【新增】shouldComponentUpdate() —— 组件是否应该被更新（默认返回true）render() —— 挂载组件。render() —— 挂载组件。...原创 2022-08-11 15:53:51 · 947 阅读 · 0 评论 -
九、react生命周期钩子（旧）
1. 组件的生命周期1.1 理解组件从创建到死亡它会经历一些特定的阶段。React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。1.2 引入案例需求:定义组件实现以下功能：让指定的文本做显示 / 隐藏的渐变动画从完全可见，到彻底消失，耗时2S点击“不活了”按钮从界面中卸载组件1.3 生命周期的三个阶段（旧）1.3.1 初始化阶段。...原创 2022-08-11 10:05:35 · 170 阅读 · 0 评论 -
八、高阶函数_函数柯里化
代码】八、高阶函数_函数柯里化。原创 2022-08-10 18:41:51 · 116 阅读 · 0 评论 -
七、react中收集表单数据
代码】七、react中收集表单数据。原创 2022-08-10 18:38:38 · 459 阅读 · 0 评论 -
六、react中的事件处理
代码】六、react中的事件处理。原创 2022-08-10 18:34:43 · 295 阅读 · 0 评论 -
五、react三大属性之ref
代码】五、react三大属性之ref。原创 2022-08-09 18:41:11 · 626 阅读 · 0 评论 -
四、react三大属性之props
代码】四、react三大属性之props。原创 2022-08-09 17:05:41 · 178 阅读 · 0 评论 -
三、react三大属性之state
一、复习原生事件绑定类的方法this指向。原创 2022-08-08 17:48:44 · 172 阅读 · 0 评论 -
二、两种定义组件的方法
代码】二、两种定义组件的方法。原创 2022-08-08 17:42:06 · 428 阅读 · 0 评论 -
一、react基础，
使用jsx创建虚拟DOM。使用js创建虚拟DOM。原创 2022-08-08 12:35:58 · 122 阅读 · 0 评论 -
react 使用react-redux重写评论列表
index.jsimport React from 'react'import ReactDOM from 'react-dom'import {Provider} from 'react-redux'import App from './components/app/app'import store from './redux/store'// 定义渲染根组件标签的...原创 2019-12-30 21:46:10 · 178 阅读 · 0 评论 -
纯函数和高阶函数
纯函数一类特别的函数: 只要是同样的输入，必定得到同样的输出 必须遵守以下一些约束 不得改写参数 不能调用系统 I/O 的API 能调用Date.now()或者Math.random()等不纯的方法 reducer函数必须是一个纯函数高阶函数理解: 一类特别的函数 情况1: 参数是函数 情况2: 返回是函数 常见的高阶函数: ...原创 2019-12-30 18:35:00 · 214 阅读 · 0 评论 -
十四、redux
一、学习文档英文文档: https://redux.js.org/ 中文文档: http://www.redux.org.cn/ Github: https://github.com/reactjs/redux https://github.com/camsong/redux-in-chinese二、redux是什么?redux是一个独立专门用于做状态管理的JS库(不是react...原创 2019-12-30 12:40:22 · 196 阅读 · 0 评论 -
十三、React UI组件库
一、最流行的开源React UI组件库1、 material-ui(国外) 官网: http://www.material-ui.com/#/ github: https://github.com/callemall/material-ui2、ant-design(国内蚂蚁金服) PC官网: https://ant.design/i...原创 2019-12-30 11:16:00 · 405 阅读 · 1 评论 -
十二、react-router4
一、react-router的理解react的一个插件库专门用来实现一个SPA应用基于react的项目基本都会用到此库二、SPA的理解1)单页Web应用（single page web application，SPA）2)整个应用只有一个完整的页面3)点击页面中的链接不会刷新页面, 本身也不会向服务器发请求4)当点击路由链接时, 只会做页面的局部更新5)数据都需要通过...原创 2019-12-29 16:19:49 · 267 阅读 · 0 评论 -
十一、ES6常用新语法
ES6常用新语法定义常量/变量: const/let 解构赋值: let {a, b} = this.props import {aa} from 'xxx' 对象的简洁表达: {a, b} 箭头函数: 常用场景 * 组件的自定义方法: xxx = () => {}* 参数匿名函数 优点: * 简洁...原创 2019-12-29 16:13:20 · 502 阅读 · 0 评论 -
十、事件监听理解
一、原生DOM事件绑定事件监听 事件名(类型): 只有有限的几个, 不能随便写 回调函数 触发事件 用户操作界面 事件名(类型) 数据() 二、自定义事件(消息机制)绑定事件监听 事件名(类型): 任意 回调函数: 通过形参接收数据, 在函数体处理事件 触发事件(编码) 事件名(类型): 与绑定的事件监听的事件名一致 ...原创 2019-12-29 16:12:02 · 176 阅读 · 0 评论 -
九、组件间通信
一、组件间通信方式一: 通过props传递共同的数据放在父组件上, 特有的数据放在自己组件内部(state) 通过props可以传递一般数据和函数数据, 只能一层一层传递 一般数据-->父组件传递数据给子组件-->子组件读取数据 函数数据-->子组件传递数据给父组件-->子组件调用函数方式二: 使用消息订阅(subscribe)-发布(publish)机制...原创 2019-12-29 15:42:23 · 141 阅读 · 0 评论 -
react练习，根据关键字查询用户
一、项目中需要请求数据，装axios包npm install axios --save二、拆分组件App * state: searchName/stringSearch * props: setSearchName/funcList * props: searchName/string * sta...原创 2019-12-29 13:11:42 · 533 阅读 · 0 评论 -
八、react 中的ajax请求
一、前置说明React本身只关注于界面, 并不包含发送ajax请求的代码 前端应用需要通过ajax请求与后台进行交互(json数据) react应用中需要集成第三方ajax库(或自己封装)二、常用的ajax请求库jQuery: 比较重, 如果需要另外引入不建议使用 axios: 轻量级, 建议使用 封装XmlHttpRequest对象的ajax promise风格 可以...原创 2019-12-29 11:35:58 · 279 阅读 · 1 评论 -
react 实现评论管理页面
一、把页面拆分组件可以拆分为4个组件，组件文件的后缀名可以是js，也可以是jsx格式。二、主要代码项目结构入口文件 index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './components/app/app';ReactDOM.render(...原创 2019-12-28 19:28:46 · 964 阅读 · 0 评论 -
七、react 用react脚手架创建项目
一、react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置 指定好了所有的依赖 可以直接安装/编译/运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + eslint 使用脚手架开发的项目的特点: ...原创 2019-12-28 14:35:37 · 381 阅读 · 1 评论 -
六、React 虚拟DOM与DOM Diff算法
1、基本原理图2、实例<body><div id="example"></div><br><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascrip...原创 2019-12-28 14:14:25 · 114 阅读 · 0 评论 -
五、react 组件对象的生命周期
1、理解组件对象从创建到死亡它会经历特定的生命周期阶段React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作2、生命周期流程图3、生命周期详述组件的三个生命周期状态: * Mount：插入真实 DOM * Update：被重新渲染 * Unmount：...原创 2019-12-28 13:13:50 · 178 阅读 · 0 评论 -
四、react 收集表单数据
1、理解问题: 在react应用中, 如何收集表单输入数据包含表单的组件分类受控组件: 表单项输入数据能自动收集成状态非受控组件: 需要时才手动读取表单输入框中的数据2、实例需求: 自定义包含表单的组件1. 输入用户名密码后, 点击登陆提示输入信息3. 不提交表单<body><div id="example"></div>...原创 2019-12-28 11:22:55 · 266 阅读 · 0 评论 -
优快云有哪些值得学习的专栏
https://blog.youkuaiyun.com/csdngkk/article/details/103682497?utm_source=bkzx_BWzd原创 2019-12-27 15:04:25 · 221 阅读 · 0 评论 -
三、react 组件
一、模块与组件和模块化与组件化的理解1、模块：理解: 向外提供特定功能的js程序, 一般就是一个js文件为什么: js代码更多更复杂作用: 复用js, 简化js的编写, 提高js运行效率2、组件理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)为什么: 一个界面的功能更复杂作用: 复用编码, 简化项目编码, 提高运行效率3、模块化当应...原创 2019-12-27 14:59:29 · 142 阅读 · 0 评论 -
二、 React JSX
一、虚拟DOMReact提供了一些API来创建一种 `特别` 的一般js对象var element = React.createElement('h1', {id:'myTitle'},'hello')上面创建的就是一个简单的虚拟DOM对象虚拟DOM对象最终都会被React转换为真实的DOM我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DO...原创 2019-12-27 13:22:59 · 202 阅读 · 0 评论 -
一、react介绍
一、简介react 可以开发网站还能开发手机APP，和原生的差不多。可以实现跨平台。既能运行在服务器端也能运行在浏览器上。二、官网英文官网: https://reactjs.org/中文官网: https://doc.react-china.org/三、介绍描述用于构建用户界面的 JavaScript 库(只关注于View)由Facebook开源四...原创 2019-12-26 20:32:42 · 145 阅读 · 0 评论