1.方法绑定this,统一写在consrtructor()里。

  1. constructor(props){
  2. ...
  3. this.handleInputChange=this.handleInputChange.bind(this);
  4. }
  5. render() {
  6. return (
  7. ...
  8. <input onChange={this.handleInputChange}/>
  9. ...
  10. );
  11. }

2.子组件获取父组件的值,用解构的形式。

  1. handleDelete(){
  2. const {handleDeleteItem,index}=this.props;
  3. handleDeleteItem(index)
  4. }

3.JSX里不要写过多的逻辑代码,应该拆分出来。

4.让setState返回一个函数而不是对象。

  1. this.setState(()=>({
  2. inputValue:value
  3. }));

5.用prevState而不是this.state。

  1. this.setState((prevState)=>{
  2. const list=[...prevState.list];
  3. list.splice(index,1);
  4. return {list};
  5. });

React-代码规范的更多相关文章

  1. 4.1 react 代码规范

    关于 基础规范 组件结构 命名规范 jsx 书写规范 eslint-plugin-react 关于 在代码的设计上,每个团队可能都有一定的代码规范和模式,好的代码规范能够提高代码的可读性便于协作沟通, ...

  2. React Native开发的一种代码规范:Eslint + FlowType

    [这篇随笔记录的很简单,没有涉及具体的Eslint规则解释以及FlowType的类型说明和使用等,只是链接了所需的若干文档] js开发很舒服,但是代码一多起来就参差不齐,难以阅读了.所以加上一些代码规 ...

  3. 在Git上如何强推代码规范

    引言 最近参加了“前端规范制定topic”小组,小组成员一起制定了html.css.js.es6.vue和react等规范,但规范制定好了怎么进行推广去强制执行呢,已知我们的项目都是用git做管理的, ...

  4. JavaScript必备:Google发布的JS代码规范(转)

    [翻译]关于Google发布的JS代码规范,你需要了解什么? 翻译 | WhiteYin 译文 | https://github.com/WhiteYin/translation/issues/10 ...

  5. 中小型前端团队代码规范工程化最佳实践 - ESLint

    前言 There are a thousand Hamlets in a thousand people's eyes. 一千个程序员,就有一千种代码风格.在前端开发中,有几个至今还在争论的代码风格差 ...

  6. eslint+prettier+husky+lint-staged 统一前端代码规范

    eslint+prettier+husky+lint-staged 统一前端代码规范 遵循编码规范和使用语法检测,可以很好的提高代码的可读性,可维护性,并有效的减少一些编码错误. 1.终极目标 团队中 ...

  7. iOS代码规范(OC和Swift)

    下面说下iOS的代码规范问题,如果大家觉得还不错,可以直接用到项目中,有不同意见 可以在下面讨论下. 相信很多人工作中最烦的就是代码不规范,命名不规范,曾经见过一个VC里有3个按钮被命名为button ...

  8. 谈谈PHP代码规范

    [转] http://www.syyong.com/php/Talk-about-PHP-code-specification.html 我向往这样一个php世界,里面没有代码规范之争.你我都一样,都 ...

  9. 2016 正确 sublime安装PHPcs PHPcodesniffer代码规范提示插件,修正网上部分不详细描述

    对你有助请点赞,请顶,不好请踩------送人玫瑰,手留余香!-------------------14:37 2016/3/212016 正确 sublime安装PHPcs PHPcodesniff ...

  10. C#与Java对比学习:类型判断、类与接口继承、代码规范与编码习惯、常量定义

    类型判断符号: C#:object a;  if(a is int) { }  用 is 符号判断 Java:object a; if(a instanceof Integer) { } 用 inst ...

随机推荐

  1. 做了2个多月的设计和编码,我梳理了Flutter动态化的方案对比及最佳实现

    背景 在端上为了提升App的灵活性, 快速解决万变的业务需求,开发者们探索了多种解决方案,如PhoneGap ,React Native ,Weex等,但在Flutter生态还没有好的解决方案.未来闲 ...

  2. haroopad 預覽區樣式

    body { color:red; font-family:'Microsoft YaHei'; } html,body{ font-family: "微軟雅黑" !importa ...

  3. 史上最全python面试题详解(四)(附带详细答案(关注、持续更新))

    python高级进阶-网络编程和并发(?道题详解) 1.简述 OSI 七层协议. OSI是Open System Interconnection的缩写,意为开放式系统互联. OSI七层协议模型主要是: ...

  4. Building QGIS from source - step by step(随笔3)

    依赖包安装 在编译QGIS前分别需要利用cygwin和OSGeo4W 安装网站上的依赖库.分别需要安装的依赖库可以参考官网,此外对应版本的ygwin和OSGeo4W 也可以在网站上找到下载链接. ht ...

  5. iOS----------APP怎样做更安全

    1 网络请求的安全方案 1.1 https请求,最好有安全交互平台. 1.2 对重要的参数请求进行加密(推荐AES,ERSA加密). 1.3 服务器返回数据时,对重要数据进行加密. 1.4 不要把密钥 ...

  6. 关于Xcode9.0版本模拟器Reset重置操作变更

  7. Android Picasso最详细的使用指南

    Picasso 是Square 公司开源的Android 端的图片加载和缓存框架.Square 真是一家良心公司啊,为我们Android开发者贡献了很多优秀的开源项目有木有!像什么Rerefoit . ...

  8. Redis进阶学习笔记

    Redis是什么这里不用再说了吧?下面是官方的解释 Redis is an open source (BSD licensed), in-memory data structure store, us ...

  9. linux 按行分割文件

    $ sudo awk 'NR%2==1{close(p".txt");++p}{print > p".txt"}' test.txt $ sudo spl ...

  10. 彻底删除mysql服务(清理注册表)

    由于安装某个项目的执行文件,提示要卸载MySQL以便它自身MySQL安装,然后我禁用了MYSQL服务,再把这个文件夹删除后,发现还是提示请卸载MYSQL服务. 解决步骤: 1.以管理员身份运行命令提示 ...