在做好第一个需求之后,我接到了一个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的一些思考的更多相关文章

  1. React使用的思考总结

    1.事件处理中的this指针问题 在 react 中,用 class 声明一个组件,调用 class 中的方法时,如果该方法中有 this 且没有手动绑定 this 指针,则会发生 this 指向 u ...

  2. Facebook的Web开发三板斧:React.js、Relay和GraphQL

    2015-02-26 孙镜涛  InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨 ...

  3. 从省市区多重级联想到的,react和jquery的差别

    在我们的前端项目里经常会用到级联的select,比如省市区这样.通常这种级联大多是动态的.比如先加载了省,点击省加载市,点击市加载区.然后数据通常ajax返回.如果没有数据则说明到了叶子节点.   针 ...

  4. React官方中文文档【安装】

    https://reactjs.org/docs/getting-started.html  //React官方文档地址 1.入门 此页面是React文档和相关资源的概述. React是一个用于构建用 ...

  5. 草珊瑚的redux使用方式

    前言 阮大师写入门教程能力一流. 首推它的Redux三篇入门文章. http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_bas ...

  6. 二刷Redux笔记

    关于react的一些思考 所有的数据全部先要发送给容器,然后容器负责接受数据单后再分发数据给他下面的组件,通过props来传递,一个页面就可以相当于一个容器,容器之中就会有很多子组件,一般组件只负责接 ...

  7. 超硬核 Web 前端学霸笔记,学完就去找工作!

    文章和教程 Vue 学习笔记 Node 学习笔记 React 学习笔记 Angular 学习笔记 RequireJS 学习笔记 Webpack 学习笔记 Gulp 学习笔记 Python 学习笔记 E ...

  8. React.js入门笔记(续):用React的方式来思考

    本文主要内容来自React官方文档中的"Thinking React"部分,总结算是又一篇笔记.主要介绍使用React开发组件的官方思路.代码内容经笔者改写为较熟悉的ES5语法. ...

  9. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

随机推荐

  1. ubuntu 重启显卡报错 nvidia

    1.我装玩显卡以后重启报错了 解决了5个小时才解决,先贴个当时报错的图 第一个图是没有加nomodeset 出先的 当你出现第二个图片的时候证明你离成功不远了 从头开始: 1.开机,出现 ubuntu ...

  2. make: *** No rule to make target `build', needed by `default'. Stop.

    [root@xx nginx-1.8.0]# makemake: *** No rule to make target `build', needed by `default'.  Stop. [ro ...

  3. 669. Trim a Binary Search Tree修剪二叉搜索树

    [抄题]: Given a binary search tree and the lowest and highest boundaries as L and R, trim the tree so ...

  4. vmware workstation环境下虚拟机固定ip的设置

    一.准备 (1)vmware workstation (2)centOS 6.5 二.配置 采用nat模式对虚拟机进行固定ip配置,nat模式相当于在windows的操作系统下构建了一个独立的内部局域 ...

  5. java基础知识汇总(持续更新中....)

    1.java四大特性:抽象.继承.封装,多态 构造函数: http://blog.csdn.net/qq_33642117/article/details/51909346 2.java数据基本类型: ...

  6. 【转】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 ...

  7. C语言cJSON库的使用,解析json数据格式

    C语言cJSON库的使用,解析json数据格式 摘自:https://www.cnblogs.com/piaoyang/p/9274925.html 对于c语言来说是没有字典这样的结构的,所以对于解析 ...

  8. [欣赏代码片段] (JavaScript) 你使用过getComputedStyle没有

    (function() { // IE8 ployfill for GetComputed Style (for Responsive Script below) if (!window.getCom ...

  9. Android新增的注解

    环境 使用Android注解前需要导入相关的包 compile 'com.android.support:support-annotations:latest.integration' 注意:如果我们 ...

  10. 试题 B: 不同子串 蓝桥杯

    [问题描述]一个字符串的非空子串是指字符串中长度至少为 1 的连续的一段字符组成的串.例如,字符串aaab 有非空子串a, b, aa, ab, aaa, aab, aaab,一共 7 个.注意在计算 ...