![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React相关
React全家桶
多喝热水
0.0
展开
-
自定义react-redux库
目录 安装开发者调试工具 自定义redux库 自定义react-redux库 安装开发者调试工具 Redux DevTools React Developer Tools 下载链接 自定义redux库 ## 1. 理解redux模块 1). redux模块整体是一个对象模块 2). 内部包含几个函数 createStore(reducers) // reducers: function(state, action){ return newState}原创 2021-01-06 17:11:12 · 98 阅读 · 0 评论 -
redux-async评论管理
目录 1.工作流程 2.项目结构 3.源码效果 comment-add.jsx comment-list.jsx comment-item.jsx app.jsx index.js actions.js store.js reducers.js 1.工作流程 redux最核心管理对象store 将actions中state,action与reducer联系在一起的对象 核心方法:getState() / dispatch(action);分发事件(发布)/ subs...原创 2020-12-23 10:37:54 · 118 阅读 · 0 评论 -
react-comment评论管理
目录 1.箭头函数=> 2.项目结构 3.源码效果 index.html index.jsx comment-add.jsx comment-list.jsx comment-item.jsx 1.箭头函数=> 箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。 2.项目结构 这里要注意理解几个组件间,数据传递的过程 3.源码效果 index.html <!DOCTYPE h原创 2020-12-17 15:12:03 · 452 阅读 · 0 评论 -
redux-async计数器
目录 1.redux要点 2.项目结构 3.源码效果 reducers.js store.js index.js app.jsx actions.js counter.jsx actions-types.js 1.redux要点 react-redux 中connect详解 react-redux中的connect用法介绍及原理解析 connect是连接React组件与Redux store,建立组件与store.state和dispatch的映射关系。 连接操作不会改变原来的原创 2020-12-22 10:08:16 · 122 阅读 · 0 评论 -
react-redux计数器
目录 1.组件分类 2.项目结构 3.源码效果 counter.jsx app.jsx actions.js actions-types.js reducers.js index.js store.js react-dedux是一个react插件库,专门用来简化react应用中使用redux 1.组件分类 UI组件 只负责 UI 的呈现,不带有任何业务逻辑 通过props接收数据(一般数据和函数) 不使用任何 Redux 的 API 一般保存在components文原创 2020-12-21 16:52:30 · 132 阅读 · 0 评论 -
redux-counter计数器
0.redux脑图 1.工作流程 2.项目结构 3.源码效果 app.jsx import React, {Component} from 'react' import {INCREMENT, DECREMENT} from '../redux/action-types.js' import * as actions from '../redux/actions' export default class App extends Component { increment = ()原创 2020-12-21 15:28:10 · 177 阅读 · 0 评论 -
react-router
0.react-router脑图 等我学完再做 1.编写路由效果 1.编写路由组件 2.在父路由组件中指定 路由链接<NavLink>或者<Link> 路由<Route> js传参要用特殊单引号`` 2.项目结构 3.源码效果 index.js import React from 'react' import ReactDOM from 'react-dom' import {BrowserRouter, HashRouter...原创 2020-12-18 17:46:46 · 101 阅读 · 1 评论 -
react-ajax
目录 1. 为什么要用Ajax 2. 常用的Ajax请求库 3. Ajax请求实例 1. 为什么要用Ajax React本身只关注于界面, 并不包含发送ajax请求的代码 前端应用需要通过ajax请求与后台进行交互(json数据) react应用中需要集成第三方ajax库(或自己封装) 2. 常用的Ajax请求库 jQuery: 比较重, 如果需要另外引入不建议使用 axios: 轻量级, 建议使用 封装XmlHttpRequest对象的ajax promise风格 可以用在浏.原创 2020-12-17 14:40:53 · 109 阅读 · 0 评论 -
使用react脚手架创建应用
1.下载NPM NPM是随同NodeJS一起安装的包管理工具 安装教程 2.脚手架创建项目并启动过程 npm install -g create-react-app npm root -g create-react-app react_app cd react_app npm start原创 2020-12-16 11:35:33 · 91 阅读 · 0 评论 -
【组件】动态列表展示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 1.显示所有todo列表 2.输入文本,点击按钮显示到列表首位,并清除输入文本 --> <div id="example1"></div> &...原创 2020-12-23 10:52:53 · 221 阅读 · 0 评论 -
【组件】生命周期
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 【--> <div id="example1"></div> <script type="text/babel"> //1.定义组件 cl.原创 2020-12-16 10:15:38 · 70 阅读 · 0 评论 -
【组件】收集表单数据
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 【包含表单的组件分类】 受控组件:表单项输入数据能自动收集成状态 非控组件:需要时才手动读取表单输入框中的数据 --> <div id="example1"></div>.原创 2020-12-15 17:29:17 · 165 阅读 · 0 评论