react
关注
分享
扫一扫
文章平均质量分 53
爱吃囍囍丸子
这个作者很懒，什么都没留下…
展开
-
react-redux数据共享 (多组reducer时 采用对象的方式共同存储在store中)(combineReducers方法合并reducer)
combineReducers (合并组件的reducer 实现组件数据共享)汇总所有的reducer 称为一个总的reducer 存储在一个对象中常见报错小案例的效果总结原创 2021-08-16 23:30:03 · 453 阅读 · 0 评论 -
react -redux api层面的简化
action容器组件与ui组件合并后 仍然是在props中取值原创 2021-08-15 17:21:49 · 174 阅读 · 0 评论 -
react-redux
原创 2021-08-14 22:18:58 · 111 阅读 · 0 评论 -
react路由完整版详解
react中的路由有三种实现方式 前端主要是通过react-router-dom实现在index文件中引入一个 BrowserRouter或者HashRouter 将APP根组件包裹起来 这是两种模式 相当于vue中的hash和history模式 一个带#号一个不带在主页面中引入<Route>//路由标签 用于在展示区进行路径的匹配 component={路由组件名} 例如 <Route path='/Home' component={Home}></Route&g原创 2021-08-12 23:07:16 · 1000 阅读 · 0 评论 -
通过axios实现的一个搜索查询展示案例
代码如下:App.jsimport React, { Component } from 'react'import {Search,List} from './components';export default class App extends Component { //初始化状态 state={ users:[],//users初始值为数组 isFirst:true,//是否为第一次打开页面 isLoading:false,//标识是否处于加载中...原创 2021-08-11 21:28:31 · 1643 阅读 · 0 评论 -
一个简单的代理方式
可以在package.json文件中加入** “proxy”:“http://www.kuwo.cn(这个是请求地址)”**加完必须重启一下项目可以创建一个setupProxy.js文件 必须是此命名代码结构如下const proxy = require('http-proxy-middleware')module.exports = function (app){ app.use( proxy('/api1',{ target:'http:/.原创 2021-08-11 11:56:17 · 149 阅读 · 0 评论 -
TodoList
****index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root'));App.jsimport React, .原创 2021-08-10 23:31:41 · 119 阅读 · 0 评论 -
react中样式组件 styled-components
使用styled-component例如: 创建全局样式组件style.js先在styled-component中解构一个createGlobalStyle出来然后直接使用模板字符串在createGlobalStyle后面书写css样式并传值给一个常量 然后抛出然后在入口文件index.js中引入style.js文件并解构出抛出的GlobalStyle然后在下方render内直接引入这个GlobalStyle标签引入局部创建一个home.js作为局部样式组件,同样的,先在原创 2021-08-09 17:42:43 · 747 阅读 · 0 评论 -
react中DOM的diffing算法
diffing算法渲染dom时会进行判断比较 如果当前标签内容未改变,就不会进行替换,如果改变就只替换改变的标签diffing算法替换的最小单位是标签下列情况 如在h2标签内有个span标签, diffing进行比较时,h2标签中的时间值是一直改变的 所以进行替换但是h2中的input标签并未改变, 所以在替换h2标签内容时 会再检索下一层子标签span检测到只是h2标签内的时间值改变 而子标签内容并未改变,它会只替换时间值,并不替换子标签中的未改变的内容<!DOCTYPE html>.原创 2021-08-09 12:07:59 · 175 阅读 · 0 评论 -
高阶函数和函数柯里化
高阶函数:如果一个函数符合下面两个条件的任何一个,那该函数就是高阶函数 1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数 2.若B函数,调用的返回值仍然是一个函数,那么B就可以称之为高阶函数 常见的高阶函数有:promise. settimeout map等函数的柯里化:可以通过函数调用继续返回函数的方式,实现多次接收参数,最后统一处理的函数编码方式function sum(a){ return(b)=>{原创 2021-08-07 15:04:02 · 189 阅读 · 0 评论 -
一个react-redux的小框架(新手防忘记必备)
初始化入口文件APP.js创建store中的index.js文件创建state创建reducer创建map创建UI组件原创 2021-08-04 22:41:57 · 93 阅读 · 0 评论 -
事件处理 ref使用场景 受控组件与非受控组件
createRef的使用 <!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom 用于支持react操作dom --><script type="text/javascript" src="../js/reac...原创 2021-07-31 17:04:21 · 219 阅读 · 0 评论 -
redux中间件详解
1、redux中间件简介1.1、什么是redux中间件redux 提供了类似后端 Express 的中间件概念，本质的目的是提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。通俗来说，redux中间件就是对dispatch的功能做了扩展。先来看一下传统的redux执行流程：图原创 2021-07-30 11:37:23 · 2263 阅读 · 0 评论 -
react中 hook中的 usestate和useEffect
useStateuseState 的使用非常简单，我们从 React 中拿到 useState 后，只需要在使用的地方直接调用 useState 函数就可以， useState 会返回一个数组，第一个值是我们的 state， 第二个值是一个函数，用来修改该 state 的，那么这里为什么叫 count 和 setCount？一定要叫这个吗，这里使用了 es6 的解构赋值，所以你可以给它起任何名字，updateCount, doCount、any thing，当然，为了编码规范，所以建议统一使用一种命名规.原创 2021-07-30 11:01:59 · 412 阅读 · 0 评论 -
使用redux创建react经典求和案例(精简版)
使用redux创建react小demo(精简版)效果如下使用redux之前要安装一下redux当前项目的黑窗口执行一下该命令先简单介绍一下redux的工作流程对redux的简介redux是一个专门用于状态管理的js库(并不是react插件库)虽然在vue,angular和react项目中都可以使用,但是基本都是用在react项目中作用就是集中管理react应用中多个组件共享的状态应用场景某个组件的状态需其他组件可以随时拿到(共享)一个组件需要改变另一个组件的状态(通信)原创 2021-07-29 23:50:32 · 277 阅读 · 2 评论 -
react中的组件间的通信 (父传子子传父)
原创 2021-07-28 21:57:19 · 111 阅读 · 0 评论 -
Webpack搭建React 和 Es6 开发环境
Webpack搭建React开发环境1、React环境搭建实现React开发的三种方式：（1）使用CDN的方式<script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!-- 生产环境中原创 2021-07-26 20:59:48 · 335 阅读 · 0 评论 -
React基础笔记
ECMAScript61、ES6简介1.1、什么是ES6ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。1.2、ECMAScript和JavaScript的关系一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript原创 2021-07-26 20:56:50 · 588 阅读 · 0 评论