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. PE知识复习之PE的各种头属性解析

    PE知识复习之PE的各种头属性解析 一丶DOS头结构体 typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; // M ...

  2. Perl一行式:选择行输出、删除、追加、插入

    perl一行式程序系列文章:Perl一行式 对于Perl的一行式perl程序来说,选择要输出的.要删除的.要插入/追加的行是非常容易的事情,因为print/say决定行是否输出/插入/追加/删除.虽然 ...

  3. babel版本兼容报错处理:Plugin/Preset files are not allowed to export objects

    原文地址: https://www.cnblogs.com/jiebba/p/9618930.html 1.为什么会报错 ? 这里抱着错误是因为 babel 的版本冲突. 多是因为你的 babel 依 ...

  4. SQL Server表名为添加中括号[]执行出错

    执行SQL语句: Update Check Set EOBTypeID=102 where E0BID='123344' 结果竟然报错,给表名添加中括号,写成这样: Update [Check] Se ...

  5. [PHP]命令执行函数的区别

    <?php $cmd="ps aux|grep php-fpm"; $res=exec($cmd,$o); var_dump($o);//数组形式返回,每行一个元素 var_ ...

  6. Selenium自动化-调用Mysql数据库

    上几篇博客发布了几篇Selenium入门知识和进阶, 现在附上如何 从数据库中取值 能够逐行取值,并且返回二维数组 import java.io.FileInputStream; import jav ...

  7. 统计字符串中字符出现的次数(||和&&的区别)

    var str = "ProsperLee"; // || 返回第一个为真的表达式的值,若全为假则返回最后一个表达式的值 // && 返回第一个为假的表达式的值,若 ...

  8. 【AO笔记】有关TIN数据集的常用介绍

    写论文查了很多TIN的接口和属性,特此来记录一下. 转载请注明出处:博客园@秋意正寒,B站同名. 未完待续 1. Tin数据集在ArcGIS中的描述 Tin数据集在磁盘中,被ArcGIS以文件夹形式管 ...

  9. vue实现表计监测界面

    已经好几个月没有更新博客了,因为最近太忙,忙得连写博客的时间都没有.上班赶项目开启996模式,下班要去练车考驾照,一边还在赶书稿,一边还接了私活.不由得感叹:年纪大了,再也经不起那么折腾..... 每 ...

  10. Dubbo开发,利用项目模拟提供者和消费者之间的调用--初学

    开发工具:IDEA,虚拟机 VMware Workstation 预备工作:安装好zookeeper的虚拟机,电脑jdk更换为1.7,本地tomcat启动,能够访问以下页面即可进行开发 2.建立以下s ...