{"id":17704982,"url":"https://github.com/dwqs/react-style-guide","last_synced_at":"2025-08-20T03:30:53.009Z","repository":{"id":87782419,"uuid":"48369381","full_name":"dwqs/react-style-guide","owner":"dwqs","description":"A mostly reasonable approach to React and JSX","archived":false,"fork":false,"pushed_at":"2023-02-17T15:19:52.000Z","size":19,"stargazers_count":157,"open_issues_count":1,"forks_count":39,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-12-09T21:23:44.236Z","etag":null,"topics":["react","react-style"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dwqs.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-21T11:59:51.000Z","updated_at":"2023-10-17T07:33:38.000Z","dependencies_parsed_at":"2023-11-13T12:50:07.334Z","dependency_job_id":null,"html_url":"https://github.com/dwqs/react-style-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-style-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-style-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-style-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dwqs%2Freact-style-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dwqs","download_url":"https://codeload.github.com/dwqs/react-style-guide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230388131,"owners_count":18217755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-style"],"created_at":"2024-10-24T22:05:44.679Z","updated_at":"2024-12-19T06:09:08.460Z","avatar_url":"https://github.com/dwqs.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React 编程规范(by [Airbnb](https://github.com/airbnb/javascript/tree/master/react))\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [基本规则](#%E5%9F%BA%E6%9C%AC%E8%A7%84%E5%88%99)\n- [命名](#%E5%91%BD%E5%90%8D)\n- [混淆](#%E6%B7%B7%E6%B7%86)\n- [声明](#%E5%A3%B0%E6%98%8E)\n- [对齐](#%E5%AF%B9%E9%BD%90)\n- [Refs](#refs)\n- [引号](#%E5%BC%95%E5%8F%B7)\n- [空格](#%E7%A9%BA%E6%A0%BC)\n- [属性](#%E5%B1%9E%E6%80%A7)\n- [括号](#%E6%8B%AC%E5%8F%B7)\n- [标签](#%E6%A0%87%E7%AD%BE)\n- [方法](#%E6%96%B9%E6%B3%95)\n- [顺序](#%E9%A1%BA%E5%BA%8F)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## 基本规则\n\n* 每个文件只包含一个 React 组件\n  * 不过可以包含多个 [Stateless 或 Pure 组件](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions)。 eslint 规则：[react/no-multi-comp](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md#ignorestateless)\n* 使用 `JSX` 语法\n* 除非是从一个非 `JSX` 文件中初始化 app，否则不要使用 `React.createElement`\n\n**Class vs React.createClass**\n\n* 如果需要管理内部状态或 `refs`，优先使用 `class extends React.Component`。eslint 规则：[react/prefer-es6-class](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md), [react/prefer-stateless-function](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md)\n\n```js\n// bad\nconst Listing = React.createClass({\n  render() {\n    return \u003cdiv /\u003e;\n  }\n});\n\n// good\nclass Listing extends React.Component {\n  render() {\n    return \u003cdiv /\u003e;\n  }\n}\n```\n\n反之, 则优先使用普通函数(不建议使用箭头函数)。\n\n```js\n// bad\nclass Listing extends React.Component {\n  render() {\n    return \u003cdiv\u003e{this.props.hello}\u003c/div\u003e;\n  }\n}\n\n// bad \nconst Listing = ({ hello }) =\u003e (\n  \u003cdiv\u003e{hello}\u003c/div\u003e\n);\n\n// good\nfunction Listing({ hello }) {\n  return \u003cdiv\u003e{hello}\u003c/div\u003e;\n}\n```\n\n## 混淆\n* [不要使用混淆](https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html)\n\n\u003e 为什么? Mixins 会增加隐式的依赖，导致命名冲突，并且会以雪球式增加复杂度。在大多数情况下Mixins可以被更好的方法替代，如：组件化，高阶组件，工具模块等。\n\n## 命名\n\n* **扩展名:** 使用 `jsx` 作为 React 组件的扩展名\n* **文件名:** 文件命名采用帕斯卡命名法，如：`ReservationCard.jsx`\n* **引用名:**  组件引用采用帕斯卡命名法，其实例采用驼峰式命名法。eslint rules: [react/jsx-pascal-case](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md)\n\n```\n// bad\nconst reservationCard = require('./ReservationCard');\n\n// good\nconst ReservationCard = require('./ReservationCard');\n\n// bad\nconst ReservationItem = \u003cReservationCard /\u003e;\n\n// good\nconst reservationItem = \u003cReservationCard /\u003e;\n```\n* **组件命名:**  使用文件名作为组件名。例如：`ReservationCard.jsx` 组件的引用名应该是 `ReservationCard`。然而，对于一个目录的根组件，应该使用 `index.jsx` 作为文件名，使用目录名作为组件名。\n\n```\n// bad\nconst Footer = require('./Footer/Footer.jsx')\n\n// bad\nconst Footer = require('./Footer/index.jsx')\n\n// good\nconst Footer = require('./Footer')\n```\n\n* **高阶组件命名:** 如果是新生成的模块，其模块名的 `displayName` 应该为高阶模块名和传入模块名的组合. 例如, 高阶模块 `withFoo()`, 当传入一个 `Bar` 模块的时候， 新的模块名 `displayName` 应该为 withFoo(Bar).\n\n\u003e 为什么？一个模块的 `displayName` 可能会在开发者工具或者错误信息中使用到，因此有一个能清楚的表达这层关系的值能帮助我们更好的理解模块发生了什么，更好的Debug.\n\n```js\n// bad\nexport default function withFoo(WrappedComponent) {\n  return function WithFoo(props) {\n    return \u003cWrappedComponent {...props} foo /\u003e;\n  }\n}\n\n// good\nexport default function withFoo(WrappedComponent) {\n  function WithFoo(props) {\n    return \u003cWrappedComponent {...props} foo /\u003e;\n  }\n\n  const wrappedComponentName = WrappedComponent.displayName\n    || WrappedComponent.name\n    || 'Component';\n\n  WithFoo.displayName = `withFoo(${wrappedComponentName})`;\n  return WithFoo;\n}\n```\n\n* **属性命名:** 避免使用 DOM 属性为组件的属性命名.\n\n\u003e 为什么？对于 `style` 和 `className` 这样的属性名会默认代表一些含义，在你的应用中使用这些属性来表示其他的含义会使你的代码更难阅读，更难维护，并且可能会引起bug。\n\n```js\n// bad\n\u003cMyComponent style=\"fancy\" /\u003e\n\n// bad\n\u003cMyComponent className=\"fancy\" /\u003e\n\n// good\n\u003cMyComponent variant=\"fancy\" /\u003e\n```\n\n## 声明\n\n* 不要通过 `displayName` 来命名组件，通过引用来命名组件\n\n```js\n// bad\nexport default React.createClass({\n  displayName: 'ReservationCard',\n  // stuff goes here\n});\n\n// good\nexport default class ReservationCard extends React.Component {\n}\n```\n\n## 对齐\n\n* 对于 `JSX` 语法，遵循下面的对齐风格。eslint rules:  [react/jsx-closing-bracket-location](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)，\n[react/jsx-closing-tag-location](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md)\n\n```js\n// bad\n  \u003cFoo superLongParam=\"bar\"\n       anotherSuperLongParam=\"baz\" /\u003e\n\n  // good\n  \u003cFoo\n    superLongParam=\"bar\"\n    anotherSuperLongParam=\"baz\"\n  /\u003e\n\n  // if props fit in one line then keep it on the same line\n  \u003cFoo bar=\"bar\" /\u003e\n\n  // children get indented normally\n  \u003cFoo\n    superLongParam=\"bar\"\n    anotherSuperLongParam=\"baz\"\n  \u003e\n    \u003cSpazz /\u003e\n  \u003c/Foo\u003e\n```\n\n## 引号\n\n* 对于 `JSX` 使用双引号，对其它所有 JS 属性使用单引号。eslint：[jsx-quotes](https://eslint.org/docs/rules/jsx-quotes)\n\n\u003e为什么？因为 JSX 属性[不能包含被转移的引号](http://eslint.org/docs/rules/jsx-quotes)，并且双引号使得如 `\"don't\"` 一样的连接词很容易被输入。常规的 HTML 属性也应该使用双引号而不是单引号，JSX 属性反映了这个约定。\n\n```js\n // bad\n  \u003cFoo bar='bar' /\u003e\n\n  // good\n  \u003cFoo bar=\"bar\" /\u003e\n\n  // bad\n  \u003cFoo style={{ left: \"20px\" }} /\u003e\n\n  // good\n  \u003cFoo style={{ left: '20px' }} /\u003e\n```\n\n## 空格\n\n* 在自闭和标签之前留一个空格。eslint: [no-multi-spaces](https://eslint.org/docs/rules/no-multi-spaces), [react/jsx-tag-spacing](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-tag-spacing.md)\n\n```js\n// bad\n\u003cFoo/\u003e\n\n// very bad\n\u003cFoo                 /\u003e\n\n// bad\n\u003cFoo\n /\u003e\n\n// good\n\u003cFoo /\u003e\n```\n\n* 不要在JSX `{}` 引用括号里两边加空格. eslint: [react/jsx-curly-spacing](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md)\n\n```js\n// bad\n\u003cFoo bar={ baz } /\u003e\n\n// good\n\u003cFoo bar={baz} /\u003e\n```\n\n## 属性\n\n* 属性名采用驼峰式命名法\n\n```js\n// bad\n\u003cFoo\n  UserName=\"hello\"\n  phone_number={12345678}\n/\u003e\n\n// good\n\u003cFoo\n  userName=\"hello\"\n  phoneNumber={12345678}\n/\u003e\n```\n\n* 属性值为 `true`，可以忽略赋值。eslint: [react/jsx-boolean-value](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)\n\n```js\n// bad\n\u003cFoo\n  hidden={true}\n/\u003e\n\n// good\n\u003cFoo\n  hidden\n/\u003e\n\n// good\n\u003cFoo hidden /\u003e\n```\n\n* `img` 标签要添加 `alt` 属性或者 `role=\"presentation\"`。 eslint: [jsx-a11y/alt-text](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/alt-text.md)\n\n```js\n// bad\n\u003cimg src=\"hello.jpg\" /\u003e\n\n// good\n\u003cimg src=\"hello.jpg\" alt=\"Me waving hello\" /\u003e\n\n// good\n\u003cimg src=\"hello.jpg\" alt=\"\" /\u003e\n\n// good\n\u003cimg src=\"hello.jpg\" role=\"presentation\" /\u003e\n```\n\n* 不要在 `img` 标签的 `alt` 属性中使用 \"image\", \"photo\", 或 \"picture\" 一类的单词。eslint：[jsx-a11y/img-redundant-alt](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/img-redundant-alt.md)\n\n\u003e 为什么? 屏幕助读器已经将 img 作为图片了，所以没必要再在 alt 属性中进行说明\n\n```js\n// bad\n\u003cimg src=\"hello.jpg\" alt=\"Picture of me waving hello\" /\u003e\n\n// good\n\u003cimg src=\"hello.jpg\" alt=\"Me waving hello\" /\u003e\n```\n\n* 只是用正确且具体的 [ARIA 属性](https://www.w3.org/TR/wai-aria/roles#role_definitions)。eslint：[jsx-a11y/aria-role](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/aria-role.md)\n\n```js\n// bad - not an ARIA role\n\u003cdiv role=\"datepicker\" /\u003e\n\n// bad - abstract ARIA role\n\u003cdiv role=\"range\" /\u003e\n\n// good\n\u003cdiv role=\"button\" /\u003e\n```\n\n* 不要在元素上使用 `accessKey` 属性。eslint：[jsx-a11y/no-access-key](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-access-key.md)\n\n\u003e 为什么？屏幕助读器在键盘快捷键与键盘命令时造成的不统一性会导致阅读性更加复杂。\n\n```js\n// bad\n\u003cdiv accessKey=\"h\" /\u003e\n\n// good\n\u003cdiv /\u003e\n```\n\n* 避免使用数组的 `index` 来作为属性 `key` 的值，推荐使用唯一ID([为什么?](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318))\n\n```js\n// bad\n{todos.map((todo, index) =\u003e\n  \u003cTodo\n    {...todo}\n    key={index}\n  /\u003e\n)}\n\n// good\n{todos.map(todo =\u003e (\n  \u003cTodo\n    {...todo}\n    key={todo.id}\n  /\u003e\n))}\n```\n\n* 对于组件所有的非必要属性需在 `defaultProps` 中定义。\n\n\u003e 为什么？propTypes 也是一种文档形式，提供 defaultProps 定义更有利于其他人阅读你的代码，并且能省略一些类型检查\n\n```js\n// bad\nfunction SFC({ foo, bar, children }) {\n  return \u003cdiv\u003e{foo}{bar}{children}\u003c/div\u003e;\n}\nSFC.propTypes = {\n  foo: PropTypes.number.isRequired,\n  bar: PropTypes.string,\n  children: PropTypes.node,\n};\n\n// good\nfunction SFC({ foo, bar, children }) {\n  return \u003cdiv\u003e{foo}{bar}{children}\u003c/div\u003e;\n}\nSFC.propTypes = {\n  foo: PropTypes.number.isRequired,\n  bar: PropTypes.string,\n  children: PropTypes.node,\n};\nSFC.defaultProps = {\n  bar: '',\n  children: null,\n};\n```\n\n* 尽量少用扩展运算符\n\n\u003e为什么？除非你很想传递一些不必要的属性。对于React v15.6.1和更早的版本，你可以给[DOM传递一些无效的HTML属性](https://doc.react-china.org/blog/2017/09/08/dom-attributes-in-react-16.html)\n\n例外情况：\n\n  * 使用了变量提升的高阶组件\n  ```js\n  function HOC(WrappedComponent) {\n    return class Proxy extends React.Component {\n      Proxy.propTypes = {\n        text: PropTypes.string,\n        isLoading: PropTypes.bool\n      };\n\n      render() {\n        return \u003cWrappedComponent {...this.props} /\u003e\n      }\n    }\n  }\n  ```\n\n  * 很清楚扩展运算符是用于对象时。在使用 Mocha 测试组件的时扩展运算符就非常有用\n  ```js\n  export default function Foo {\n    const props = {\n      text: '',\n      isPublished: false\n    }\n\n    return (\u003cdiv {...props} /\u003e);\n  }    \n  ```\n\n  注意：使用时要尽可能过滤不必要的属性。使用 [prop-types-exact](https://www.npmjs.com/package/prop-types-exact)能预防 bug。\n\n  ```js\n  //good\n  render() {\n    const { irrelevantProp, ...relevantProps  } = this.props;\n    return \u003cWrappedComponent {...relevantProps} /\u003e\n  }\n\n  //bad\n  render() {\n    const { irrelevantProp, ...relevantProps  } = this.props;\n    return \u003cWrappedComponent {...this.props} /\u003e\n  } \n  ```\n\n## Refs\n\n* 使用 ref callbacks。eslint：[react/no-string-refs](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-string-refs.md)\n\n```js\n// bad\n\u003cFoo\n  ref=\"myRef\"\n/\u003e\n\n// good\n\u003cFoo\n  ref={(ref) =\u003e { this.myRef = ref; }}\n/\u003e\n```\n\n## 括号\n\n* 当组件跨行时，要用括号包裹 JSX 标签。eslint: [react/wrap-multilines](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/wrap-multilines.md)\n\n```\n/// bad\n  render() {\n    return \u003cMyComponent className=\"long body\" foo=\"bar\"\u003e\n             \u003cMyChild /\u003e\n           \u003c/MyComponent\u003e;\n  }\n\n  // good\n  render() {\n    return (\n      \u003cMyComponent className=\"long body\" foo=\"bar\"\u003e\n        \u003cMyChild /\u003e\n      \u003c/MyComponent\u003e\n    );\n  }\n\n  // good, when single line\n  render() {\n    const body = \u003cdiv\u003ehello\u003c/div\u003e;\n    return \u003cMyComponent\u003e{body}\u003c/MyComponent\u003e;\n  }\n```\n\n## 标签\n\n* 没有子组件的父组件使用自闭和标签。eslint: [react/self-closing-comp](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md)\n\n```\n// bad\n  \u003cFoo className=\"stuff\"\u003e\u003c/Foo\u003e\n\n  // good\n  \u003cFoo className=\"stuff\" /\u003e\n```\n* 如果组件有多行属性，闭合标签应写在新的一行上。eslint: [react/jsx-closing-bracket-location](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md)\n\n```\n// bad\n  \u003cFoo\n    bar=\"bar\"\n    baz=\"baz\" /\u003e\n\n  // good\n  \u003cFoo\n    bar=\"bar\"\n    baz=\"baz\"\n  /\u003e\n```\n\n## 方法\n\n* 使用箭头函数来访问本地变量\n\n```js\nfunction ItemList(props) {\n  return (\n    \u003cul\u003e\n      {props.items.map((item, index) =\u003e (\n        \u003cItem\n          key={item.key}\n          onClick={() =\u003e doSomethingWith(item.name, index)}\n        /\u003e\n      ))}\n    \u003c/ul\u003e\n  );\n}\n```\n\n* 在构造函数中绑定需要在 `render` 方法使用的事件处理函数(绑定 `this`)。eslint：[react/jsx-no-bind](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md)\n\n\u003e为什么？在组件每次 `render` 时, 每次 bind 调用都会创建新的函数\n\n```js\n// bad\nclass extends React.Component {\n  onClickDiv() {\n    // do stuff\n  }\n\n  render() {\n    return \u003cdiv onClick={this.onClickDiv.bind(this)} /\u003e;\n  }\n}\n\n// good\nclass extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.onClickDiv = this.onClickDiv.bind(this);\n  }\n\n  onClickDiv() {\n    // do stuff\n  }\n\n  render() {\n    return \u003cdiv onClick={this.onClickDiv} /\u003e;\n  }\n}\n```\n\n* 不要对 React 组件的内置方法使用 `underscore` 前缀\n\n\u003e为什么？`_` 前缀在某些语言中通常被用来表示私有变量或者函数，但在原生 JavaScript 不支持所谓的私有变量，所有的变量函数都是共有的。在变量名之前加上下划线并不会使这些变量私有化，并且所有的属性都应该被视为是共有的。相关 issue：[#1024](https://github.com/airbnb/javascript/issues/1024) / [#490](https://github.com/airbnb/javascript/issues/490) 。\n\n```\n// bad\nReact.createClass({\n  _onClickSubmit() {\n    // do stuff\n  }\n\n  // other stuff\n});\n\n// good\nclass extends React.Component {\n  onClickSubmit() {\n    // do stuff\n  }\n\n  // other stuff\n});\n```\n\n* 确保 `render` 方法中有返回值。eslint: [react/require-render-return](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/require-render-return.md)\n\n```js\n// bad\nrender() {\n  (\u003cdiv /\u003e);\n}\n\n// good\nrender() {\n  return (\u003cdiv /\u003e);\n}\n```\n\n## 顺序\n\n* 继承 React.Component 的类的方法遵循下面的顺序\n\n1. constructor\n2. optional static methods\n3. getChildContext\n4. componentWillMount\n5. componentDidMount\n6. componentWillReceiveProps\n7. shouldComponentUpdate\n8. componentWillUpdate\n9. componentDidUpdate\n10. componentWillUnmount\n11. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()\n12. getter methods for render like getSelectReason() or getFooterContent()\n13. Optional render methods like renderNavigation() or renderProfilePicture()\n14. render\n\n* 怎么定义 propTypes，defaultProps，contextTypes 等等...\n\n```\nimport React, { PropTypes } from 'react';\n\nconst propTypes = {\n  id: PropTypes.number.isRequired,\n  url: PropTypes.string.isRequired,\n  text: PropTypes.string,\n};\n\nconst defaultProps = {\n  text: 'Hello World',\n};\n\nclass Link extends React.Component {\n  static methodsAreOk() {\n    return true;\n  }\n\n  render() {\n    return \u003ca href={this.props.url} data-id={this.props.id}\u003e{this.props.text}\u003c/a\u003e\n  }\n}\n\nLink.propTypes = propTypes;\nLink.defaultProps = defaultProps;\n\nexport default Link;\n```\n\n* 使用 React.createClass 时，方法顺序如下：\n\n1. displayName\n2. propTypes\n3. contextTypes\n4. childContextTypes\n5. mixins\n6. statics\n7. defaultProps\n8. getDefaultProps\n9. getInitialState\n10. getChildContext\n11. componentWillMount\n12. componentDidMount\n13. componentWillReceiveProps\n14. shouldComponentUpdate\n15. componentWillUpdate\n16. componentDidUpdate\n17. componentWillUnmount\n18. clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()\n19. getter methods for render like getSelectReason() or getFooterContent()\n20. Optional render methods like renderNavigation() or renderProfilePicture()\n21. render\n\neslint: [react/sort-comp](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/sort-comp.md)\n\n## isMounted\n* 不要再使用 `isMounted`. eslint: [react/no-is-mounted](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-is-mounted.md)\n\n\u003e 为什么？[isMounted 是一种反模式](https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html)，在 ES6 classes 中不可用。官方未来将会删除改属性。·\n\n### Related Resource\n·\n* [Vue Component Style Guide](https://github.com/pablohpsilva/vuejs-component-style-guide)\n* [Node Style Guide](https://github.com/dwqs/node-style-guide)\n* [React Developer Roadmap](https://roadmap.sh/react)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Freact-style-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdwqs%2Freact-style-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdwqs%2Freact-style-guide/lists"}