React
RGirl8080
认真做每一件事,结果不重要
展开
-
React---Redux(三)actionType拆分
为何要将action.type拆分出来呢首先当action.type不拆分的话在组件中的actionType要对应到reducer里的actionType,并且一模一样当你操作时type如果差一个字符是不会执行Reducer的action的 且控制台不会报错。所以要把actionType拆分出来 当做变量引入时,当你输入错误,控制台会报错。这时查找原因会非常容易。首先先将action...原创 2019-05-30 10:58:09 · 2371 阅读 · 0 评论 -
React---Redux(一)
Redux概念Redux=Reducer+Fluxredux把所有数据放在store来管理,组件会自动感应到store的数据变化,从而进行传值Redux工作流首先我们将store比喻成图书管理员 reducers比如成图书馆 或者仓库。当你提出要取哪个变量时stroe要去操作reducers然后返回出一个新的数据信息出来。最后你拿到这个新的state会去做相应的变化...原创 2019-05-29 19:58:41 · 150 阅读 · 0 评论 -
React---动画效果
react中实现一些动画的效果有两种方法第一种:利用变量和css做切换第二种:react-transition-groupGitHub官网相关解释文档既可以单个元素动画 也可以多个元素和组件使用动画效果...原创 2019-05-29 17:19:03 · 340 阅读 · 0 评论 -
React---生命周期函数
生命周期的含义:是指某一个时刻组件会自动调用执行的函数React生命周期分为4个大项一、数据初始化当创建页面时先调用的就是construction这个构造函数 在这个函数中props或state的变量将初始化。但construction是es6中的语法所以它不能当做react的生命周期函数 constructor(props) { super(props);...原创 2019-05-29 15:03:27 · 174 阅读 · 0 评论 -
React--思维模式
当组件的state或者props发生改变时,render函数就会重新被执行。当父组件的render重新被执行时 子组件也会被重新执行一次React的虚拟Dom的含义原创 2019-05-29 11:00:00 · 157 阅读 · 0 评论 -
react-组件之间的传参
父向子传参父组件向子组件传参时用属性的方式传递子组件接收的时候用props调用子组件不能直接改父组件的变量值父组件实例如下:import React,{Component,Fragment}from 'react'import TodoItemList from './TodoItemList'class TodoList extends Component{ const...原创 2019-05-28 20:24:57 · 321 阅读 · 0 评论 -
react-jsx语法细节补充
注释方法render() { return ( // fragment内部封装的站位符 <fragment> { // 注释方式1--多行注释 } {/*注释方式2--单行注释*/} ...原创 2019-05-28 19:01:46 · 136 阅读 · 0 评论 -
react-2
react新的编程思想feacebook 2003年5月推出。react.filber是指16版本后react与vue区别:react更适合复杂度高的vue更好上手 `在这里插入代码片`**组件化定义 import React from 'react'; // function App() { // return ( // <div...原创 2019-05-28 18:34:57 · 196 阅读 · 0 评论 -
React---Redux(八)中间件saga
如何安装使用sage安装命令npm install --save redux-saga当安装好后 先创建一个saga文件,然后按照github官网文档进行引入 先引入redux-saga然后创建sagaMiddleware 接着创建saga文件 并引入redux文件中来。然后让sagaMiddleware运行这个文件创建sage脚本文件时 先引入redux-saga/e...原创 2019-05-30 17:59:04 · 329 阅读 · 0 评论 -
React--Redux(七)中间件的原理
redux中间件的原理其实就是dispatch针对action的类型做处理 ,然后再传给store原创 2019-05-30 16:34:04 · 447 阅读 · 0 评论 -
React---Redux(六)中间件 thunk
为什么使用中间件 thunk呢首先我们在做异步请求时,通常把ajax请求放在生命周期中,缺点是,第一如果请求多会造成代码臃肿,第二是放在生命周期中时,做前端自动化测试时会很麻烦,且不提高性能;例如:使用redux-thunk中间件会有什么好处呢当我们使用redux-thunk时我们可以把异步回调放在actionCreator.js中统一管理 ,这时创建一个方法传递给store可以...原创 2019-05-30 16:27:56 · 186 阅读 · 0 评论 -
React---Redux (五)中间件 thunk的使用
如何使用thunk呢首先先引入thunknpm install redux-thunk然后在store中引入redux的thunk插件 就可以了正常使用了。import { createStore, applyMiddleware } from 'redux';import thunk from 'redux-thunk';import reducer from './re...原创 2019-05-30 16:06:06 · 175 阅读 · 0 评论 -
React----组件优化
在recat中可以将所有页面划分成一个个组件 方便管理和渲染一般组件也分为三大类:- UI组件 - 容器组件 - 无状态组件UI组件又叫做傻瓜组件,一般主要负责页面渲染,不负责数据操作。容器组件 就是只负责数据操作不负责页面渲染无状态组件是指只有render一个生命周期 则可以改为函数来渲染 提高性能。左侧是容器组件 右侧是UI组件。又可以将UI组件转化为...原创 2019-05-30 14:54:51 · 137 阅读 · 0 评论 -
React---Redux(四)
reducer知识补充store是唯一的不可有重复的只有store能更改自己的内容(reducer不能更改state数据)reducer必须是个纯函数纯函数是指 给定固定的输入 就会有固定的输出,而且不会有副作用(固定是指固定值 例如 new Date()就不是个固定值)reducer的APIcreateStore 创建一个storestore.dispatch 组件用来向st...原创 2019-05-30 11:11:32 · 158 阅读 · 0 评论 -
React---Redux(二)
安装Reduxnpm install redux使用Redux的state首先引入redux且引入createStore 创建store。然后创建reducer 存储库 并且赋予给store最后在组件中使用store// 引入redux且引入createStore模块import {createStore} from 'redux'//引入笔记本/存储库impor...原创 2019-05-29 20:47:49 · 123 阅读 · 0 评论