一、组件类里面的函数尽可能写成箭头函数的形式,方便绑定this

上面的箭头函数是好的,写面的不好,他需要在用的时候绑定this,或者在constructor绑定,如下:

如上用的时候绑定this是不好的,每次render都会重新绑定,比这种好的是在constructor里面绑定,如下:

因此绑定this有两种方法,用箭头函数,或者在constructor里面绑定,推荐箭头函数

二、从state或者props取值赋值给变量的时候,用解构赋值、给默认值、容错处理

三、通过prop-types给组件的配置参数加上类型验证,你也可以在任何 PropTypes 属性后面加上 ’isRequired‘后缀,这样如果这个属性父组件没有提供时,会打印警告信息。虽然 propTypes 帮我们指定了参数类型,但是并没有说这个参数一定要传入,事实上,这些参数默认都是可选的。可选参数我们可以通过配置 defaultProps,让它在不传入的时候有默认值

具体的Proptypes用法如下:

四、在父、子、孙,三级,从父级传回调函数给孙,在每个子、孙配置PropTypes传参类型,和defaultProps之后,不要用if来判断有没有传回调函数,作为中间的子,直接将函数传下去,不要在写一个函数了,如下:

下面这个不好:

下面这样好:

五、组件间的调用用下划线做函数名

Todolist总结的更多相关文章

  1. Vue.js基础篇实战--一个ToDoList小应用

    距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...

  2. 重写官方TodoList,对于初学react+redux的人来说,很有好处

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  3. [vue案例的知识点]todo-list

    文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储, ...

  4. 用vuejs实现一个todolist项目

    用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <te ...

  5. 基于angular写的一个todolist

    对于新手来说,使用angularjs写一个todolist可以快速入门

  6. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  7. jquery实现TODOList

    html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. Android程序ToDoList增加配置项页面

    本文要做的事情就是在前面做的简单的ToDoList程序上增加一个配置项页面(Reference).这个Reference页面也非常简单: 这个ToDoList现在有两个页面,主页面能填写待办事项,然后 ...

  9. Android程序ToDoList

    本文的目的是创建一个简单的ToDoList列表. 这个应用的功能是记录我的代办事项,简单到不需要本地存储,所有的代办事项都只是存储在内存中,就是只有程序打开的时候可以增加查看代办事项,当程序关闭的时候 ...

  10. ToDoList:一款非常优秀的任务管理软件 —— 工具类

    ToDoList是一款非常优秀的任务管理软件,用户可以方便地组织和安排计划.这是一个开源的项目,很多细节都考虑到了,推荐大家使用~ ToDoList 帮你把要做的事情列出来,一项一项,类似思维导图. ...

随机推荐

  1. BZOJ_3786_星系探索_splay维护出栈入栈序

    BZOJ_3786_星系探索_splay维护出栈入栈序 Description 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为 ...

  2. MongoDB 2.6复制集单节点部署(三)

    MongoDB在单节点中也可以做复制集,但是仅限于测试实验,最大的好处就是部署方便快速,可以随便添加新节点,节省资源.在这里我使用的是MongoDB 2.6版本进行复制集实验(但MongoDB配置文件 ...

  3. 17.for循环语句

    for循环: 语法: for(表达式1;表达式2;表达式3){ java语句; } 表达式1是最初始化表达式:最先执行,只执行一次 表达式2必须是boolean 类型的表达式.结果为ture或者fal ...

  4. Ubuntu 安装Guake

    一款代替终端的软件, 只需按F12就可以调出终端, 再按就消失, 附上Github链接. https://github.com/Guake/guake 一开始没安装上去, 后来成功, 现在用着还不错, ...

  5. ViewerJS 一个在浏览器上查看 PDF 和电子表格的 JavaScript 库

    Viewer.js简介 http://viewerjs.org/ 下载Viewer.js压缩包,解压后将ViewerJS文件夹放在网站根目录下 在浏览器地址栏中输入网址http://172.16.8. ...

  6. codevs-2235

    2235 机票打折 题目描述 Description .输入机票原价(3到4位的正整数,单位:元),再输入机票打折率(小数点后最多一位数字).编程计算打折后机票的实际价格(单位:元.计算结果要将个位数 ...

  7. jQuery EasyUI API 中文文档 - Tree树使用介绍

    用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节 ...

  8. 关于window 查看端口命令

    今天小R又知道了一个新的小常识,个人觉得还是蛮实用的,可能对于有些新手来讲应该也不知道吧. 如:大家都知道window查看命令是用  “netstat -an”   , 如图显示一大推打开的端口. 但 ...

  9. 计算机图形学之扫描转换直线-DDA,Bresenham,中点画线算法

    1.DDA算法 DDA(Digital Differential Analyer):数字微分法 DDA算法思想:增量思想 公式推导: 效率:采用了浮点加法和浮点显示是需要取整 代码: void lin ...

  10. C++类静态变量的一种使用特例

    不同进程里的数据默认情况下是互不影响的. 静态变量是属于类本身的,它的所有实例可以共享这个静态变量,但是有个先天条件就是在同一个进程的情况下!!