![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 54
记录React的学习过程
要写注释啊
这个作者很懒,什么都没留下…
展开
-
异步action以及redux中间件——thunk和promise的使用
一、什么是异步action通俗的说,同步action:返回一个对象;异步action:返回一个函数二、什么时候使用异步action从Redux官网中原创 2022-02-22 16:45:21 · 755 阅读 · 0 评论 -
nrm的使用
一、什么是nrmnrm 是一个 npm 源管理器,可以帮助我们快速地在 npm源之间切换二、为什么要使用nrmnpm的默认下载仓储地址是: https://registry.npmjs.org/,这是外国的网站,当使用npm来安装一些包时,往往速度会比较慢,大多数时候会配置国内的淘宝镜像cnpm。但是有些时候,又需要切换回来,这时使用nrm,就可以帮助我们实现快速地在 npm 源间切换,避免记忆仓储url地址的麻烦。三、nrm的用法1.安装npm install -g nrm2.查看所有仓储原创 2022-02-15 20:35:36 · 1032 阅读 · 0 评论 -
十二、npm包serve的使用
当前端打包好包后,想在服务器上部署,看一下运行效果,但是此时,若是去特地运用node或java去搭建服务器,又过于麻烦,此时可以借助npm包serve原创 2021-03-10 09:37:37 · 1773 阅读 · 0 评论 -
十、react-redux中共享数据状态
一、案例:定义一个Person组件,和Count组件通过redux共享数据为Person组件编写reducer和actionreducers/person.jsconst initState = [{id:'001',name: 'Tom', age: 18}]export default function personReducer(prestate=initState, action) { const {type, data} = action switch(type) {原创 2021-03-09 15:30:09 · 258 阅读 · 0 评论 -
九、react-redux的使用
一、什么是react-redux?react-redux是react的一个插件库,这点和redux不一样,react-redux是专门用来简化react中使用redux二、react-redux原理图三、react-Redux将所有组件分成两大类UI组件:只负责 UI 的呈现,不带有任何业务逻辑通过props接收数据(一般数据和函数)不使用任何 Redux 的 API一般保存在components文件夹下容器组件负责管理数据和业务逻辑,不负责UI的呈现使用 R原创 2021-03-09 14:33:58 · 118 阅读 · 0 评论 -
八、异步action编码时报错:Error: Actions must be plain objects. Use custom middleware for async actions.
一、什么是同步action?什么是异步action?同步action,就是指action的值为Object类型的一般对象异步action,就是指action的值为函数,异步action中一般都会调用同步action,异步action不是必须要用的。那么什么时候使用异步action呢?想要对状态进行操作,但是具体的数据靠异步任务返回异步action不是必须要写的,完全可以自己等待异步任务的结果了再去分发同步action二、异步action的具体编码编码时报错:Error: Actions m原创 2021-03-08 14:45:35 · 1288 阅读 · 0 评论 -
七、redux基础知识
安装npm install reduxAPIstore.getState()——获取状态store.dispatch()——通知reducer工作store.subscribe()——专门用来订阅reducer中状态是否变化原创 2021-03-08 11:09:27 · 125 阅读 · 0 评论 -
使用create-react-app创建项目时报错
报错内容:You are running `create-react-app` 4.0.2, which is behind the latest release (4.0.3).We no longer support global installation of Create React App.Please remove any global installs with one of the following commands:- npm uninstall -g create-reac原创 2021-03-01 17:32:33 · 1837 阅读 · 0 评论 -
七、React中UI组件库的使用——antd
基于React封装UI组件库,其中Ant Design是比较常用的安装:npm install antd使用:注意:引入样式后,样式才能生效import 'antd/dist/antd.css'原创 2021-02-28 17:24:53 · 424 阅读 · 1 评论 -
六、React中有关路由内容
一、路由的使用安装npm install react-router-dom在原生中使用a标签实现跳转,在react中根据路由连接实现切换组件App标签的最外层包裹一个BrowseRouter或者HashRouter标签import { Link,Route } from 'react-router-dom'<Link className="list-group-item" to="/home">Home</Link><Link className="l原创 2021-02-27 21:14:12 · 161 阅读 · 0 评论 -
三、React中处理跨域的两种方法
方法一安装axiosnpm install axiosclient端口为3000,server端口为5000client向server发送请求:axios.get('http://localhost:5000/xxxxxx').then( response => {console.log('成功了',response.data);}, error => {console.log('失败了',error);})注意:由于client和server的端口不一样,此时存原创 2021-02-23 22:27:07 · 565 阅读 · 0 评论 -
四、React中利用发布订阅机制(PubSub)来解决组件之间的数据传递
一、关于父子组件之间的通信父组件给子组件传递数据:利用props子组件给父组件传递数据:父组件先通过props 给子组件传递一个函数,要求子组件执行这个函数,同时传递一个参数,此时父组件中的函数可以拿到这个参数存在问题:操作数据的部分全部放在共同的父组件中兄弟之间传递数据需要借助共同的父组件,过于繁琐二、发布订阅机制用途:适用于任何组件之间的通信,避免了借助共同父组件用法:在需要接受数据的组件中订阅消息,传递数据的组件中发布消息(先订阅,再发布)。当订阅者和发布者订阅的消息名一原创 2021-02-23 22:25:57 · 603 阅读 · 0 评论 -
二、DOM中的diffing算法(Vue/React中绑定的key)
问题:Vue/React中绑定的key是什么?有什么作用?key是虚拟DOM对象的标识,在数据的更新显示中起到非常重要的作用。当页面中的数据发生变化时,react会根据“新数据”生成“新的DOM”,但是当数据只有部分发生变化时,React是否会一次性更新页面中的所有DOM呢?答案是否定的。那么React又是如何辨别哪些是重复DOM,哪些是“新的DOM”呢?此时利用的就是这个key值了。实现过程:若在旧虚拟DOM找到了与新虚拟DOM中相同的key:(1)若虚拟DOM中内容没变,则直接使用之原创 2021-02-23 16:00:36 · 173 阅读 · 0 评论 -
一、React初学笔记
一、React的特点采用组件化模式、声明式编码,提高了开发效率及组件的重复率在React Native中可以使用React语法进行移动端的开发使用虚拟DOM+Diffing算法,尽量减少与真实DOM的交互<body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- react核心库 --> <script src="../js/react.developmen原创 2021-02-18 22:10:31 · 145 阅读 · 0 评论