React&JSX 规范

梳理

一、基本规则

• 每个文件只包含一个 React 类组件
  
  • 但是多个函数式组件可以放到一个文件中
• 一般使用JSX/TSX语法
• 除非是在非JSX文件中初始化应用，否则不要使用React.createElement

二、命名规范

• 组件文件名
  如果是组件文件，则使用PascalCase大驼峰式命名，如MyComponent.jsx
  如果组件是一个目录，则组件所在目录以PascalCase大驼峰式命名，而主入口命名为 index，如index.jsx，引用时可如下：

import MyComponent from './MyComponent'

• 引用命名
  如上，React组件使用PascalCase
• 组件属性名
  React DOM 使用小驼峰式命名法来定义属性的名称，例如

<div onClick={this.handler} />

三、Class组件和Functional组件

只允许使用Class Component和Functional Component两种形态来书写组件，建议尽量使用函数式组件配合Hooks来进行开发

四、对齐

遵循以下JSX语法的对齐风格

// 不推荐
<Foo superLongParam='bar'
     anotherSuperLongParam='baz' />
// 推荐
<Foo
    superLongParam='bar'
    anotherSuperLongParam='baz'
/>
// 参数较少可保持一行
<Foo bar='bar' />
<Foo
    superLongParam='bar'
    anotherSuperLongParam='baz'
>
  <Quux />
</Foo>
// 不推荐
{
    showButton &&
        <Button />
}
// 推荐
{showButton && (
    <Button />
)}
{showButton && <Button />}

五、空格

• 自闭合的标签前要加一个空格

<Foo />

• JSX的花括号里不需要加空格

<Foo bar={baz} />

六、属性

• 为所有的非必需属性定义使用 defaultProps 明确的默认值

七、圆括号

当 JSX 标签超过一行时使用圆括号包裹

render () {
    return (
        <MyComponent className='long body' foo='bar'>
            <MyChild />
        </MyComponent>
    )
}

八、标签自闭合

• 没有子元素的标签要自闭合

<Foo className='stuff' />

• 如果组件包含多行属性，在新的一行闭合标签

<Foo
    bar='bar'
    baz='baz'
/>

九、方法

• Class组件内的属性方法应声明为箭头函数以固定上下文
• 类组件的内部方法不要使用下划线前缀
• 确保在 render 方法中存在返回值

十、Hooks规范

• Hooks 只能应用于函数式组件中
• 只在 React 函数最顶层使用 Hooks，不要在循环，条件或嵌套函数中调用 Hook