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中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
随机推荐
- 系统性能信息模块之psutil模块
一.psutil模块介绍 官方网址:https://pypi.org/ psutil模块安装:https://github.com/giampaolo/psutil/blob/master/INSTA ...
- CS API 测试3
//添加二级存储 http://192.168.150.16:8080/client/api? command=addSecondaryStorage& zoneId=7e34afc4-6 ...
- Boost智能指针使用总结
内存管理是一个比较繁琐的问题,C++中有两个实现方案: 垃圾回收机制和智能指针.垃圾回收机制因为性能等原因不被C++的大佬们推崇, 而智能指针被认为是解决C++内存问题的最优方案. 1. 智能指针定义 ...
- Linux系统巡检常用命令-乾颐堂
Linux系统需要定期巡检,以检查服务器软硬件使用情况,相当于对人的体检,确保可以及时发现问题.解决问题,降低损失,常用的巡检命令如下: # uname -a # 查看内核/操作系统/CPU信息 # ...
- 【转】Comprehensive learning path – Data Science in Python
Journey from a Python noob to a Kaggler on Python So, you want to become a data scientist or may be ...
- MyBatis 3(中文版) 第四章 使用注解配置SQL映射器
本章将涵盖以下话题: l 在映射器Mapper接口上使用注解 l 映射语句 @Insert,@Update,@Delete,@SeelctStatements l 结果映射 一对一映射 一对多映射 l ...
- ping别的电脑出错
原因ifconfig 电脑1:172.31.45.101 电脑2:172.31.188.232 http://ask.csdn.net/questions/178358 如何防止别人ping自己的电脑 ...
- Java中一对多映射关系
通过栗子,一个人可以有多辆汽车 定义人 这个类 人可以有很多辆汽车,类中车属性用数组 class Person{ private String name; private String phone ...
- Android开发之深入理解NFC(一)
深入理解NFC NFC(Near field communication,近场通信)也叫做近距离无线通信技术. 从原理来说,NFC和wifi类似,二者都利用无线射频技术来实现设备之间的通信. 但是,和 ...
- Amobea读写分离
Amoeba的中文意思是变型虫,Amoeba是一个以MySQL为底层数据存储,并对应用提供MySQL协议接口的proxy.它集中地响应应用的请求,依据用户事先设置的 规则,将SQL请求发送到特定 ...