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

  constructor(props){
...
this.handleInputChange=this.handleInputChange.bind(this);
}
render() {
return (
...
<input onChange={this.handleInputChange}/>
...
);
}

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

handleDelete(){
const {handleDeleteItem,index}=this.props;
handleDeleteItem(index)
}

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

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

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

5.用prevState而不是this.state。

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

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. iBinary C++STL模板库关联容器之map/multimap

    目录 一丶关联容器map/multimap 容器 二丶代码例子 1.map的三种插入数据的方法 3.map集合的遍历 4.验证map集合数据是否插入成功 5.map数据的查找 6.Map集合删除元素以 ...

  2. MVC Scaffolding SmartCode-Engine 更新

    概述 通过扩展visual studio.net scaffolding组件,添加了一套功能完善的代码模板,包括Controller,Model,View,Businessd等各种功能的代码,配合En ...

  3. 【测试工程师面试】 记录XX银行面试

    LZ在一个18线小城市做测试,近来想走出自己的舒适区,去做一点不一样的测试工作. 18线地区,测试工作并不多.最好的差不多就是LZ目前待着的公司了.遂决定去魔都闯荡几年,对一个在魔都无房无车无户口的人 ...

  4. Perl IO:简介和常用IO模块

    三篇Perl IO基础类文章: Perl的IO操作(1):文件句柄 Perl的IO操作(2):更多文件句柄的模式 Perl文件句柄相关的常见变量 IO对象和IO::Module家族模块 无论是哪种高级 ...

  5. JavaScript_01简介,基本语法,运算符

    JavaScript(不是JScript和scriptease) 1.js分为内部引用和外部引用,无论是内部引用还是外部引用,都可以放在html(除标签内)的任意位置,但是定义的位置会影响执行的顺序 ...

  6. java Calendar的学习分享

    前言: 在我们的日常生活中,常常能看见时间.如:在我们的手机里,在一些网站上也能随处看到时间.那我们在项目的开发中,也常常涉及到时间的处理,对于我们经常会遇到和处理的问题.Java中专门为我们处理时间 ...

  7. 事件绑定on与hover事件

    今天项目中UI设计了一个鼠标划入和划出的效果,本来这个小效果是非常简单的!可是在实际的生产环境中就出现了一点点问题!因为在实际的环境中,数据全部是用ajax异步加载进去的,这样就造成了hover方法不 ...

  8. WEB前端学习代码片段记录

    1.JS设计模式片段 Function.prototype.addMethod = function (name,fn) { this.prototype[name] = fn; return thi ...

  9. SAP QA32 做使用决策系统报错:分类数据的不一致性=>交易终止

    SAP QA32 做使用决策系统报错:分类数据的不一致性=>交易终止 QA32,对如下检验批做处理,系统报错, 试图使用MSC3N去显示这个批次主数据,同样报错, 原因在于批次的分类数据产生后, ...

  10. WebService访问oracle数据库本地调试

    WebService访问oracle数据库本地调试-一步一个坑 上篇文章提到我们额数据库挂了,重装了数据库,然后呢我需要在本地调试WebService,看看那些数据结构缺失,迁移到新数据库中去.踩坑之 ...