Redux和React
export app class Compo1 extends Component{
}
Compo1.propType = {
a:PropTypes.string,
fn:PropTypes.func.isRequired
}
限制父类组件输入参数的属性
isRequired 必输
生命周期
组件从诞生到消亡,程序提供了各个阶段:
1.上树阶段 Mounting,按顺序调用下列方法:
1)constructor ()构造器
2)componentWillMount() 正在上树
3)render () 显示
4)componentDidMount()这个阶段DOM已经上树,可以对DOM做一些事情
上述四个阶段没有设置参数
2.更新阶段 Updating
props和state的改变 在这个阶段
1)componentWillReceriveProps(nextProps)
当父类传递prop时改变时发生
这个函数里同时可以获取老的和新的参数
新老交替时发生这个函数
2)shouldComponentUpdate(nextProps,nextState)
用于确认是否继续执行Updating的其他生命周期的函数
不光父类改变,其本身改变时也能改变
return ture 时,才能继续执行下去
这个函数可以获取新的prop和state,
也能获取到老的参数
3)componentWillUpdate(nextProps,nextState)
更新之前做的事情,此时视图没有变化,state和props都没有变化
4)render()
5 )componentDidUpdate(prevProps,prevState)
更新之后做的事情,参数里是老的参数
任何生命周期都能拿到老的和新的参数 只是放置的位置不一样
3.下数阶段Unmounting
componentWillUnmount()
将要下树
Redux重要说明:
1)state reducer store 只有允许一组
2) actionCreator 返回action的函数
Redux和React的更多相关文章
- Redux 和React 结合
当Redux 和React 相接合,就是使用Redux进行状态管理,使用React 开发页面UI.相比传统的html, 使用React 开发页面,确实带来了很多好处,组件化,代码复用,但是和Redux ...
- redux在react项目中的应用
今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...
- 使用Redux管理React数据流要点浅析
在图中,使用Redux管理React数据流的过程如图所示,Store作为唯一的state树,管理所有组件的state.组件所有的行为通过Actions来触发,然后Action更新Store中的stat ...
- [Redux] Adding React Router to the Project
We will learn how to add React Router to a Redux project and make it render our root component. Inst ...
- Redux 管理React Native数据
现在让我们看看大致的流程: React 可以触发 Action,比如按钮点击按钮. Action 是对象,包含一个类型以及相关的数据,通过 Store 的 dispatch() 函数发送到 Store ...
- redux【react】
首先介绍一下redux就是Flux的一种进阶实现.它是一个应用数据流框架,主要作用应用状态的管理 一.设计思想: (1).web应用就是一个状态机,视图和状态一一对应 (2).所有的状态保存在一个对象 ...
- react+redux教程(八)连接数据库的redux程序
前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...
- 实例讲解react+react-router+redux
前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
随机推荐
- java利用反射动态加载方法
@参考文章 根据特定字符串加载相应的方法,有人用if else,有人用switch.参数少了或情况少了还好,很多方法真要命,不要紧,java反射拯救你 import java.lang.reflect ...
- 编辑输出“Hello World”
一.新建java项目 执行“文件->新建->项目建立”,打开建立新项目对话框,在编辑框中输入项目名,其他选项为默认值,随后点击“完成”按钮. 二.新建java类 执行“文件->新建- ...
- 最大流当前弧优化Dinic分层模板
最大流模板: 普通最大流 无向图限制:将无向图的边拆成2条方向相反的有向边 顶点有流量限制:拆成2个点,连接一条容量为点容量限制的边 无源汇点有最小流限制的最大流:理解为水管流量形成循环 有源汇点的最 ...
- linux学习第十九天 (Linux就该这么学) 结课了
今天最后一天课程了,结课了,还有点舍不得那,在些也祝 李老师 事业蒸蒸日上,超来超好, 今天内容是部署了 LNMP 部署动态网站环境(linux +nginx+mysql+php) 安装文件挺别多, ...
- git 提交代码操作
1.修改1分支后 git add git commint2.切换到本地分支git checkout local-5.0git remote update 更新远程仓库3.git pull origin ...
- buffer IO和direct IO
最近在看很多框架,redis,kafka等底层都涉及到文件IO操作的效率问题,所以查了些资料,看到这篇文章讲的比较明白些,贴出来留存. 链接地址: https://www.ibm.com/develo ...
- WIN10家庭版的升级到企业版
1.右键点击[此电脑]---->属性 2.点击[激活windows] 3.在左侧点击[激活]--->更改产品密匙 4.然后输入产品密匙:NPPR9-FWDCX-D2C8J-H872K-2Y ...
- vscode+MinGW+cmake设置轻量ide
本地随手写一些题目的时候,发现visual studio非常庞大emmm vscodevscode是一个轻量编辑器 (1)vscode插件与设置自动同步 在两个电脑上,用vscode可以同步插件 ,利 ...
- javascript、JSP、JS有什么区别和联系
js是javascript的缩写.以下是JSP与JS的区别和联系: 名字:JS:JavaScriptJSP:Java Server Pages 执行过程:JSP先翻译,翻译成Servlet执行如: t ...
- C#动态设置webServer路径
using BD.SD_BJXYZY_PRO.WsbxService;using System;using System.Collections.Generic;using System.Linq;u ...