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值,然后在父组件里就可以开心的调用了,这里有个问题,是必须得确保子组件渲染后调用,如果保证不了,是找不到子组件的上下文的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

UWP 入门教程2——如何实现自适应用户界面

系列文章 UWP入门教程1——UWP的前世今生 如上文所说的,布局面板根据可用的屏幕空间,指定界面元素的大小和位置。例如StackPanel 会水平或垂直排列界...

2245
来自专栏繁花云

11.14学习总结

解决方案:mysqli_set_charset($conn,utf8)

830
来自专栏司想君

React编程思想

能够按照构建的方式来思考web app的实现,是React众多优点之一。在这篇文章中,我们将引导你进行使用React构建可搜索产品数据表的思考过程。

5215
来自专栏Hongten

图片浏览器_js打造_源码开放

源码:http://files.cnblogs.com/hongten/source.zip

1762
来自专栏大前端开发

使用mpvue开发小程序教程(四)

在上一章节中,我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvu...

1052
来自专栏hightopo

快速开发基于 HTML5 网络拓扑图应用1

2762
来自专栏破晓之歌

使用pyinstaller将python脚本打包成exe文件

安装需要用到pip工具,该工具在3.5版本的python中已经自带不用另行安装,但是需要在系统变量中添加python下的Scripts文件夹,如下图: 

2741
来自专栏司想君

React编程思想

在我们团队看来,React是使用JavaScript构建大型、快速的Web apps的首选方式。它已经在Facebook和Instagram项目中,表现出了非常...

4109
来自专栏企鹅号快讯

史上最全的web前端学习教程汇总!

第一阶段:HTML+CSS HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础:js基础教程、js内置对象常用方...

4325
来自专栏Android干货园

Base封装(二)-- 封装属于自己的Library(UI篇)

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/73...

1291

扫码关注云+社区

领取腾讯云代金券