学习react心得及总结
注意学习这个在D盘:小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说且文字 react生命周期及其它注意事件
/*
* react中组件里的render函数可以找到组件的this
* 在render方法里调用函数时函数是可以找到this的,react中组件里的方法函数里不能找到组件的this需要在render中绑定this,具体应该是点击事件里的函数
* react中状态管理放在组件的constructor里管理
* setState()设置state的,就会重新渲染render方法重新渲染
* 插值不能用for和if,可以用map
* 组件中必须继承react中的component,组件的首字母必须是大写的
* 生命周期分三个阶段,一个挂载阶段,一个是更新阶段,一个是卸载阶段
* 挂载阶段:constructor()构造函数,在创建组件的时候调用一次
* 挂载:componentWillMount()在组件即将被挂载的时候调用一次
* 一些组件启动的动作,包括像 Ajax 数据的拉取操作、一些定时器的启动等,就可以放在 componentWillMount 里面进行,例如 Ajax:
* 挂载:render()渲染
* 挂载:componentDidMount()在组件被挂载完成的时候调用一次,可以在这里使用refs,例如动画的启动
* 卸载阶段:(组件从页面中移除)
* componentWillUnmount即将卸载没有卸载完成,组件对应的 DOM 元素从页面中删除之前调用
* 更新阶段:(注意:组件一但建成进入更新阶段后不会再走constructor方法里了)
* “更新阶段”。说白了就是 setState 导致 React.js 重新渲染组件并且把组件的变化应用到 DOM 元素上的过程,这是一个组件的变化过程。
* React.js 当中可以直接通过 setState 的方式重新渲染组件,渲染的时候可以把新的 props 传递给子组件,从而达到页面更新的效果。
* componentWillReceiveProps(nextProps)组件从父组件接收到新的 props 之前调用。,父组件的更新会触发子组件的这个函数,nextProps父组件更新的时候带来的数据
* shouldComponentUpdate(nextProps,nextState),你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。是否需要重新渲染,Return false/true
* componentWillUpdate(nextProps,nextState),即将更新,组件开始重新渲染之前调用。
* render渲染
* componentDidUpdate(prevProps,PrevState)完成更新,组件重新渲染并且把更改变更到真实的 DOM 以后调用
* 尽量不要在render里去改状态(setState),尽量在相应的生命周期里去改
*
*
* */
react的redux共分几个部分各个部分的原理如下:
provider : 它做的事情就是与context建立联系,把传进来的store放到context里,并把所有组件当成自己的子组件,这样所有组件都可以经过connect之后都可以取到react-redux里的值( Provider
做的事情也很简单,它就是一个容器组件,会把嵌套的内容原封不动作为自己的子组件渲染出来。它还会把外界传给它的 props.store
放到 context,这样子组件 connect
的时候都可以获取到。)
store: 它就像是一个指挥部,会暴漏出来所有供外使用的方法,里面会写好各方法的处理逻辑,及调用顺序( getState, dispatch, subscribe)
dispatch: 它是处理state数据,也就是你传进来的想要改变的state里的值也就是形参action,它会把你传进来的action交给reducer去处理,reducer处理后调用渲染方法根据最新数据渲染页面(要改哪些数据以及指令类型)
reducer:它是根据action(也是你的指令的类型,它根据你传的类型去判断 它要干啥,要改哪个数据)去判断哪此数据需要更新(把要更新的数据复制出来一份去替换旧的,这样对象地址就不一样了,可以判断旧数据是否更新),从而反回最新的数据,也就是根据浅拷贝的原因,把想改变的数据用新对象替换,如果不用新对象替换引用类型地址没有变视为不更新
subscribe:渲染页面,也就是里面调用的setState,调用它后,就会调用render方法重新渲染,根据最新的数据
connect(高阶组件):通过高阶组件与原生的context通信,它就是将最新的数据绑定要传进来的组件上,使被传进来的组件可以取到最新的state数据,也就是所谓的被包装组件
Connect
会去 context 里面取出 store。把 store 里面的数据取出来通过 props
传给 传进来的函数
connect
connect中
mapStateTopProps参数的作用:(高阶组件的入参)
mapStateTopProps
相当于告知了Connect
应该如何去 store 里面取数据,然后可以把这个函数的返回结果传给被包装的组件,还需要告诉高级组件我们需要什么数据,高阶组件才能正确地去取数据。
connect中mapDispatchToProps参数的作用:
来告诉它我们的组件需要如何触发dispatch
。我们把这个参数叫mapDispatchToProps
2018年9月12日 学习react总结
1、在setState里更改state里的值,如何在当前组件,当前方法里取到最新的值:
(1)setState里加入第二个参数,为回调函数,在此回调内可以取到最新值
(2)在render生拿周期里直接取值
(3)加setTimeOut
2、不能在子组件里直接改props里的值,解决办法可以存在变量里,或在父组件里改
3、使用map之前进行非空判断以防报错
4、写行间样式用鸵峰式写法
5、在子组件使用props里的值时要先定义下初始值
学习react心得及总结的更多相关文章
- 从0开始学习react(一)
本人前端小菜鸡一枚,因为公司要重构网站,打算用用react,毕竟一切为了学习(装B)嘛!!! 在学习react之前,看了许多资料,博客,官方文档之类的,可我这记吃不记打的记性,还是需要在这里记录一下, ...
- 正式学习React(五) react-redux源码分析
磨刀不误砍柴工,咱先把react-redux里的工具函数分析一下: 源码点这里 shallowEqual.js export default function shallowEqual(objA, ...
- 正式学习React (七) react-router 源码分析
学习react已经有10来天了,对于react redux react-redux 的使用流程和原理,也已经有一定的了解,在我上一篇的实战项目里,我用到了react-route,其实对它还只是 停留在 ...
- 正式学习React(一) 开始学习之前必读
为什么要加这个必读!因为webpack本身是基于node环境的, 里面会涉及很多路径问题,我们可能对paths怎么写!webpack又是怎么找到这些paths的很迷惑. 本文是我已经写完正式学习Rea ...
- 正式学习 react(三)
有了基础的webpack基础,我们要对react的基本语法进行学习. 我这个教程全部用es6 实现.可能会忽略一些最基本的语法讲解,这些你在官网上或者其他别的地方都比我讲的全. 今天我要讲一下reac ...
- 学习react,动手实现一个小demo(仿知乎问答)
学习react也有一周的时间,最近自己做了个仿知乎问答的小demo,项目源码在github上:https://github.com/yang302/reactQa 使用技术:bower+gulp+re ...
- 五分钟学习React(三):纯HTML代码搭建React应用
上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...
- 五分钟学习React(一): 什么是React
在前端的世界里,我们要处理的文件不是太多,而是太少.每天开发项目将html.css.js.图片.字体文件都像大杂烩一般加载都网页上.当应用变得越来越臃肿的时候,会发现js用了那么多全局变量,css的继 ...
- 学习React Native必看的几个开源项目
学习React native ,分享几个不错的开源项目,相信你学完之后,一定会有所收获.如果还没有了解RN的同学们可以参考手把手教你React Native 实战之开山篇<一> 1.Fac ...
随机推荐
- unittest测试框架详谈及实操(五)
测试报告——生成HTML格式的测试报告 前面的实例输出的所有测试结果都是以命令行日志的方式展示,不止于难看,但也不适合直接把那样的测试结果截图发给相关人员,尤其是领导.这时需要更加友好的测试结果,既能 ...
- FileInputStream和FileOutStream的使用——文件字节输入/输出流
最近又退回到java EE的学习,这篇博客就来讲解一下字节流中最重要的两个类FileInputStream和FileOutputStream的用法: FileInputStream:全称是文件字节输入 ...
- windows7下安装MySQL-5.6.34
下载安装包"mysql-5.6.34-winx64.zip",放到某个文件夹中,解压安装包,重命名文件夹名为"mysql-5.6.34" 修改"m ...
- 在Android模拟器里安装apk
[原文]http://Android.tgbus.com/android/tutorial/201104/349532.shtml 1.运行SDK Manager,选择模拟器,并运行模拟器. 2.将需 ...
- [LeetCode 题解]: Count and Say
The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 111221, ...
- DEV 之 有些控件不允许拖动。
DEV 之 有些控件不允许拖动. 设置一个参数即可解决问题
- MongoDB复制集与Raft协议异同点分析
此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 一.日志复制流程: a.raft leader节点在接收client请求后,先将请求写到日志中,再将日志通过 ...
- eclipse installer 安装的新版本 eclipse 导入旧版本 eclipse 插件
打开旧版本eclipse,选择File -> Export... -> Install -> Installed Software Items to File,点击Next 点击Se ...
- Mysql内置功能《一》流程控制
delimiter // CREATE PROCEDURE proc_if () BEGIN declare i int default 0; if i = 1 THEN SELECT 1; ELSE ...
- 16、xtrabackup 增量备份及恢复
备份命令如下 备份命令如下 全量备份 # innobackupex -p123123 /backup # ls /backup 2017-04-08_13-36-11 增量备份或差量备份 # inn ...