react的一些思考
在做好第一个需求之后,我接到了一个react写的产品,这让我异常的兴奋,终于能写react了
开始做的时候整体框架已经搭建好了,这让我有点小失落,我还以为我要开始搭框架了呢,没事,搭的也挺好的。
有了angular和vue的基础,react上手也不是哥事,但是看了两天的api,感觉还是没入门,直接写项目代码吧,忐忑不安的就这样去写了,果然遇到了大坑。
antdui的坑,form表单必须通过阿里提供的api才能改变input框里的值,用就用吧,但是不能在生命周期里用,因为那样会触发下次的生命周期,会造成死循环。
但是我想在父组件里点击后改变input里的值啊,最初想着可以用props传入,然后在willmount的时候调用,把input框里的值set进去,但是会死循环。
昨天搞到半夜,回家里,晚上做个梦,解决了,为啥要用props传啊,为啥要在生命周期里调用啊,子组件根据form的api提供一个改变input值的方法,然后,父组件调用子组件里的方法不就行了,然后,不用props,不用生命周期。
再然后,我掉入了另一个坑,竟然找不到子组件的方法,查了半天,想起来了,子组件是有生命周期的,直接调用的话,人家还没有加载这个方法所以没有,这就引出了另一个问题,我怎么知道子组件是否渲染完了呢,vue里有this.$nextTick( ()=>{} ),查了react的官方文档,查了半天,没有这个方法,那就自己模仿把,其实很简单,setTimeout就行,promise也行,我用的setTimeout,ok,解决了,完美手工。
ps:关于父组件怎样调用子组件的方法,可以这样做,父组件通过props传递一个function给子组件,子组件将要渲染的时候,调用父组件的方法把子组件的上下文传递给父组件,父组件保存this值,然后在父组件里就可以开心的调用了,这里有个问题,是必须得确保子组件渲染后调用,如果保证不了,是找不到子组件的上下文的。
react的一些思考的更多相关文章
- React使用的思考总结
1.事件处理中的this指针问题 在 react 中,用 class 声明一个组件,调用 class 中的方法时,如果该方法中有 this 且没有手动绑定 this 指针,则会发生 this 指向 u ...
- Facebook的Web开发三板斧:React.js、Relay和GraphQL
2015-02-26 孙镜涛 InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨 ...
- 从省市区多重级联想到的,react和jquery的差别
在我们的前端项目里经常会用到级联的select,比如省市区这样.通常这种级联大多是动态的.比如先加载了省,点击省加载市,点击市加载区.然后数据通常ajax返回.如果没有数据则说明到了叶子节点. 针 ...
- React官方中文文档【安装】
https://reactjs.org/docs/getting-started.html //React官方文档地址 1.入门 此页面是React文档和相关资源的概述. React是一个用于构建用 ...
- 草珊瑚的redux使用方式
前言 阮大师写入门教程能力一流. 首推它的Redux三篇入门文章. http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_bas ...
- 二刷Redux笔记
关于react的一些思考 所有的数据全部先要发送给容器,然后容器负责接受数据单后再分发数据给他下面的组件,通过props来传递,一个页面就可以相当于一个容器,容器之中就会有很多子组件,一般组件只负责接 ...
- 超硬核 Web 前端学霸笔记,学完就去找工作!
文章和教程 Vue 学习笔记 Node 学习笔记 React 学习笔记 Angular 学习笔记 RequireJS 学习笔记 Webpack 学习笔记 Gulp 学习笔记 Python 学习笔记 E ...
- React.js入门笔记(续):用React的方式来思考
本文主要内容来自React官方文档中的"Thinking React"部分,总结算是又一篇笔记.主要介绍使用React开发组件的官方思路.代码内容经笔者改写为较熟悉的ES5语法. ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
随机推荐
- Struts2概述
-------------------siwuxie095 Struts2 概述 1.Struts2 是应用在 Java EE 三层架构中的 Web 层的框架 2.Struts2 是在 Struts1 ...
- SQL Server XML变量转为Json文本
1 -- create function 2 create function [dbo].[fnXmlToJson] (@XmlData xml) 3 returns nvarchar(max) 4 ...
- Python PyInstaller 打包报错:AttributeError: 'str' object has no attribute 'items'
pyinstaller打包时报错:AttributeError: 'str' object has no attribute 'items' 网上查询,可能是setuptools比较老: 更新一下 p ...
- Java工具类之Apache的Commons Lang和BeanUtils
Apache Commons包估计是Java中使用最广发的工具包了,很多框架都依赖于这组工具包中的一部分,它提供了我们常用的一些编程需要,但是JDK没能提供的机能,最大化的减少重复代码的编写. htt ...
- code1214 线段覆盖
贪心 把线段们按终止点b的先后排序,b小的在前面,b一样随便 然后设r为当前最大的b 每加入一条新的线段i,判断是否重合(i.a>=r) 如果重合就舍弃i,否则把i加入,ans++,更新r:r= ...
- 注意for循环中变量的作用域-乾颐堂
1 2 for e in collections: pass 在for 循环里, 最后一个对象e一直存在在上下文中.就是在循环外面,接下来对e的引用仍然有效. 这里有个问题容易被忽略,如果在循 ...
- sql分组获取第一条记录(sql+oracle)
sql版本 select * from (select t.CloseDate,t.ExpiryDate,t.DataTypeLookupID,ROW_NUMBER() over(partition ...
- Spring Boot☞ 使用velocity渲染web视图
效果图: 代码 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF ...
- 研究wireshark遇到的问题
说起来有一些惭愧,研究wireshark有一段时间了,但是对源代码的分析却至今没有什么进展... 最初想要研究wireshark是因为我的开题是基于wireshark来做的. 现在有很多抓包工具,wi ...
- PatternLayoutEncoder 输出格式
ch.qos.logback.classic.encoder.PatternLayoutEncoder ch.qos.logback.classic.PatternLayout ch.qos.logb ...