代码规范啊

1、引用组件顺序：

先引用外部组件库,再引用当前组件块级组件, 然后是 common 里的公共函数库最后是 css 样式

import * as React from 'react';
import { Dropdown, Menu, Icon } from 'antd';
import Header from './Header';
import toast from 'common/toast';
import './index.less';

2、命名：

• 类名: 大驼峰式风格，字母和数字，例如：AbcTest。禁止汉字、特殊符号，禁止非大驼峰式风格。

• 函数名: 小驼峰式风格，字母和数字，例如：abcTest。禁止汉字、特殊符号，禁止非小驼峰式风格，例如snake_case等。

• 变量名: 同函数名。

• 常量: 全大写风格，大写字母、数字和下划线，单词之间以下划线分隔，例如：ABC_TEST。禁止汉字、特殊符号、小写字母。

• 使用 onXxx 形式作为 props 中用于回调的属性名称。

• 组件内的事件函数使用 handle 开头尾,handleCheckBtn。
• 使用 withXxx 形式的词作为高阶组件的名称。

3、state和props

仅当初始 state 需要从 props 计算得到的时候，才将 state 的声明放在构造函数中，其它情况下使用静态属性声明 state,并且一般情况下不要将 prop 传给 state

4、渲染默认值：

添加非空判断可以提高代码的稳健性,例如后端返回的一些值,可能会出现不存在的情况，应该要给默认值.

还有一种情况，就是本来后端应该返回一个数组，但是数据库取不到数据，可能后端返回了null,然后前端null.length。这样就报错了

this.setState({ 

      status: STATUS.READY, 

      apps: list || [], 

      total: totalCount || 0, 

      page: page

 })

5、对于常用的属性进行缓存：

const { app } = this.props;

const { time } = this.state;

6、 在 componentWillUnmount 里面去除副作用的函数：

清除 EventListener

中止数据请求

清除定时器

7、key：

对于组件中的 key 优化，起到最大化重用 dom（因为react会根据key值对比结果来渲染更改的节点，如果没有key值整个列表树就都会渲染）

this.state.dataAry.map(item => <span key={item.id} />)

8、for-in 中一定要有 hasOwnProperty 的判断（即禁止直接读取原型对象的属性）：

for (key in obj) {

if (obj.hasOwnProperty(key)) {

arr.push(obj[key]);

}

}

9、代码细粒度：

我们在写组件或者函数的的时候，工具函数和业务逻辑抽离，表单校验和业务抽离、事件函数和业务抽离，ajax和业务抽离。

例如有些页面是通过location.href跳转的，我们有些业务逻辑等都是放到didmountMount,但是后期改需求，可能要用react-router进行跳转，可能要改的逻辑就会很多了，所以函数抽离出来，需求更新就少改一点代码。

使用过两次以上的代码，要抽离组件或者函数，两次的可以不用

10、不要使用renderXXX,要使用函数式组件：

为了减少render函数里面的代码量，有人会把一些元素拆分到函数里面，其实更好的办法，是用函数式组件取代在当前组件里面写方法

11、a标签安全问题：

使用a标签打开一个新窗口过程中的安全问题。新页面中可以使用window.opener来控制原始页面。如果新老页面同域，那么在新页面中可以任意操作原始页面。如果是不同域，新页面中依然可以通过window.opener.location，访问到原始页面的location对象

在带有target="_blank"的a标签中，加上rel="noopener"属性。如果使用window.open的方式打开页面，将opener对象置为空。

var newWindow = window.open();

newWindow.opener = null

12、阻止默认行为：

在 React 中不能通过返回 false 来阻止默认行为。必须明确调用 preventDefault 。

13、防止 xss 攻击：

input，textarea 等标签，不要直接把 html 文本直接渲染在页面上,使用 xssb 等过滤之后再输出到标签上