React 前端代码规范，前端规约指引，分为【强制】、【推荐】、【参考】三个等级

【强制】：必须遵守。项目开发中必须遵守的代码规范。
【推荐】：尽量遵守。推荐的代码规范，用则有助于系统稳定性和团队开发效率的提升。
【参考】：充分理解。根据团队需要可选的前端代码规范

编码风格

1.缩进

1.1【强制】JSX 语法使用 2 个空格缩进，不要使用 4 空格或者 tab 缩进。

2.空格

2.1【强制】自闭合标签的斜线前面保留一个空格

2.2【强制】JSX 标签与属性，属性与属性之间仅保留一个空格

2.3【强制】JSX 属性的花括号内部两侧无空格

//bad
<Demo name={ name }>

//good
<Demo name={name}>

2.4【强制】不要在 JSX 属性的等号两边加空格

3.引号

3.1【强制】JSX 属性使用双引号，不要使用单引号

为什么？HTML 属性通常使用的是双引号而不是单引号，因此 JSX 属性沿用了这种约定，其他 JS 使用单引号。

4.小括号

4.1【强制】多行的 JSX 标签必须用小括号包裹

//bad
const Demo = ()=>{
    return <div>
        <p>11111</p>
        <p>22222</p>
    </div>
}

// good
const Demo = ()=>{
    return (
        <div>
            <p>11111</p>
            <p>22222</p>
        </div>
    );
}

5.标签

5.1【强制】无子元素的标签写成自闭合的标签

5.2【强制】标签属性的换行遵循以下规则：

（1）标签名和他的属性可以写在一行，前提是不超过单行最大 100 字符的限制。

（2）如果标签有多个属性，且存在换行，那么每个属性都应该单占一行，且开始标签和结束标签也单占一行。

5.3【强制】禁止在有子节点的组件或者 DOM 元素中使用 dangerouslySetInnerHTML 属性。

5.4【推荐】不要使用危险属性，React 中的危险属性是指那些已知会引起应用程序漏洞的属性。这些属性命名为 dangerouslyName 已经清楚的表明他们是危险的，应该尽量避免使用，例如：dangerouslySetInnerHTML。

5.5【强制】JSX 语句的文本节点中不要使用注释字符串，例如：以 // 或 /* 开头。

5.6【强制】标签中禁止出现无意义字符，比如 > : } ' 等。

可用 > 代替。

" 可用 " 或者 “ 或者 " 或者 ” 代替。

' 可用 ' 或者 ‘ 或者 ' 或者 ’ 代替。

} 可用 } 代替。

或者写在表达式中，例如:

<div>{">"}</div>

语言特性

1.类组件

1.1【推荐】不要在JSX小户型中使用.bind()。eslint: react/jsx-no-bind

这不利于组件性能，每次render都会创建一个新的函数。有两种替代方案：

① 在 constructor 中绑定时间处理函数

② 使用 react 的 property initializers 特性或 ES7 autobind decorator

1.2【强制】render方法必须要有返回值。eslint: react/require-render-return

1.3【强制】在扩展 React.PureComponent 时禁止使用 shouldComponentUpdate。eslint: react/no-redundant-should-component-update

定义 React.PureComponent 扩展组件时使用 shouldComponentUpdate 虽然有效，但是扩展 React.PureComponent 就变得没有意义了。

1.4【强制】禁止使用已经废弃的方法。eslint: react/no-deprecated

1.5【强制】不要使用findDomNode,严格模式下已经弃用。eslint: react/no-find-dom-node

2.函数组件

2.1【强制】 只在最顶层调用 hooks,不要在循环、条件和嵌套函数中调用 Hooks。

3.Props

3.1【强制】采用小驼峰命名 prop 。eslint: react/node-unknown-property

3.4【强制】声明的 prop 必须被使用，未使用的 prop 应该删除。eslint: react/no-unused-prop-types

配套工具

eslint-config-ali 是《阿里巴巴前端规约》配套的 ESLint 可共享配置，提供了多套配置文件以支持 JavaScript、TypeScript、React、Vue、Node.js 等多种项目类型。