RGirl8080的博客

为何要将action.type拆分出来呢 首先当action.type不拆分的话在组件中的actionType要对应到reducer里的actionType，并且一模一样 当你操作时type如果差一个字符是不会执行Reducer的action的 且控制台不会报错。所以要把actionType拆分出来 当做变量引入时，当你输入错误，控制台会报错。这时查找原因会非常容易。 首先先将action...

Redux概念 Redux=Reducer+Flux redux把所有数据放在store来管理，组件会自动感应到store的数据变化，从而进行传值 Redux工作流 首先我们将store比喻成图书管理员 reducers比如成图书馆 或者仓库。当你提出要取哪个变量时stroe要去操作reducers然后返回出一个新的数据信息出来。最后你拿到这个新的state会去做相应的变化 ...

react中实现一些动画的效果有两种方法 第一种：利用变量和css做切换 第二种：react-transition-group GitHub官网相关解释文档 既可以单个元素动画 也可以多个元素和组件使用动画效果 ...

生命周期的含义：是指某一个时刻组件会自动调用执行的函数 React生命周期分为4个大项 一、数据初始化 当创建页面时先调用的就是construction这个构造函数 在这个函数中props或state的变量将初始化。但construction是es6中的语法所以它不能当做react的生命周期函数 constructor(props) { super(props);...

当组件的state或者props发生改变时，render函数就会重新被执行。 当父组件的render重新被执行时 子组件也会被重新执行一次 React的虚拟Dom的含义

父向子传参 父组件向子组件传参时用属性的方式传递 子组件接收的时候用props调用 子组件不能直接改父组件的变量值 父组件实例如下： import React,{Component,Fragment}from 'react' import TodoItemList from './TodoItemList' class TodoList extends Component{ const...

注释方法 render() { return ( // fragment内部封装的站位符 <fragment> { // 注释方式1--多行注释 } {/*注释方式2--单行注释*/} ...

react新的编程思想feacebook 2003年5月推出。 react.filber是指16版本后 react与vue区别： react更适合复杂度高的 vue更好上手 `在这里插入代码片` ** 组件化定义 import React from 'react'; // function App() { // return ( // <div...

如何安装使用sage 安装命令 npm install --save redux-saga 当安装好后 先创建一个saga文件，然后按照github官网文档进行引入 先引入redux-saga然后创建sagaMiddleware 接着创建saga文件 并引入redux文件中来。然后让sagaMiddleware运行这个文件 创建sage脚本文件时 先引入redux-saga/e...

redux中间件的原理 其实就是dispatch针对action的类型做处理 ，然后再传给store

为什么使用中间件 thunk呢 首先我们在做异步请求时，通常把ajax请求放在生命周期中，缺点是，第一如果请求多会造成代码臃肿，第二是放在生命周期中时，做前端自动化测试时会很麻烦，且不提高性能；例如： 使用redux-thunk中间件会有什么好处呢 当我们使用redux-thunk时我们可以把异步回调放在actionCreator.js中统一管理 ，这时创建一个方法传递给store可以...

如何使用thunk呢 首先先引入thunk npm install redux-thunk 然后在store中引入redux的thunk插件 就可以了正常使用了。 import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import reducer from './re...

在recat中可以将所有页面划分成一个个组件 方便管理和渲染 一般组件也分为三大类： - UI组件 - 容器组件 - 无状态组件 UI组件又叫做傻瓜组件，一般主要负责页面渲染，不负责数据操作。 容器组件 就是只负责数据操作不负责页面渲染 无状态组件是指只有render一个生命周期 则可以改为函数来渲染 提高性能。 左侧是容器组件 右侧是UI组件。 又可以将UI组件转化为...

reducer知识补充 store是唯一的不可有重复的 只有store能更改自己的内容（reducer不能更改state数据） reducer必须是个纯函数 纯函数是指 给定固定的输入 就会有固定的输出，而且不会有副作用（固定是指固定值 例如 new Date()就不是个固定值） reducer的API createStore 创建一个store store.dispatch 组件用来向st...

安装Redux npm install redux 使用Redux的state 首先引入redux且引入createStore 创建store。 然后创建reducer 存储库 并且赋予给store 最后在组件中使用store // 引入redux且引入createStore模块 import {createStore} from 'redux' //引入笔记本/存储库 impor...