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中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
随机推荐
- 88. Merge Sorted Array (Array)
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note: Y ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- 文件后缀与mime类型对应表
//文档文件类型的 .ai application/postscript .eps application/postscript .exe application/octet-stream ...
- Hibernate一对多操作
--------------------siwuxie095 Hibernate 一对多操作 以客户和联系人为例,客户是一,联系人是多 即 一个客户里面有多个联系人,一个联系人只能属于一个客户 注意: ...
- 764. Largest Plus Sign最大的dfs十字架
[抄题]: 求挖掉一些区域后,能允许出现的最大十字架 In a 2D grid from (0, 0) to (N-1, N-1), every cell contains a 1, except t ...
- linux环境下搭建osm_web服务器二(Mapnik及apache2mod_tile配置):
Mapnik及apache2mod_tile配置 上一篇,我们配置好了PostgreSQL服务器,导入了测试数据.今天,我们来配置 mapnik2 + apache2 + mod_tile 的WMS服 ...
- ubuntu如何安装samba
1.samba安装sudo apt-get install samba2.修改smb.confsudo gedit /etc/samba/smb.conf 文件最后增加如下代码:[share] pat ...
- 修改ubuntu密码
https://www.linuxidc.com/Linux/2016-05/131256.htm
- monkeyrunner小结
上次说到已经配好了MonkeyRunner的运行环境,现在讲解怎么进行简单的MonkeyRunner测试.这个拖了很久才有时间和心情总结一下.真是计划赶不上变化啊. 就不说废话了.http://dev ...
- (转)Linux下安装Android的adb驱动-解决不能识别的问题(国产板子)
注:本文不涉及怎么安装adb等工具.本方法通用.到目前为止已经解决rk3188和展讯SC6820(波导T9500)的识别问题. 以前调试的Android板子,都是直接用的Google的usb设备id, ...