ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
## 方法顺序遵循生命周期放在前面, `render()` 方法放在最后 在 `react` 组件内部,方法的顺序如下: 1. 生命周期方法(按照时间先后顺序依次为: `getDefaultProps`, `getInitialState`, `componentWillMount`,`componentDidMount`, `componentWillReceiveProps`, `shouldComponentUpdate`, `componentWillUpdate`,`componentDidUpdate`, `componentWillUnmount` ) 2. 其他的方法 3. `render` 方法 ## 事件处理函数的命名 采用 "handle" + "EventName" 的方式来命名 Example: ~~~ <Component onClick={this.handleClick} onLaunchMissiles={this.handleLaunchMissiles} /> ~~~ ## 事件函数作为属性时的命名 为了跟 `react` 的事件命名保持一致: `onClick`, `onDrag`, `onChange`, 等等,采用如下格式: ~~~ <Component onLaunchMissiles={this.handleLaunchMissiles} /> ~~~ ## 元素跟 `return` 放在同一行 为了节约空间,采用下面的写法: ~~~ return <div> ... </div>; ~~~ 而不是: ~~~ return ( // "div" 与 "return" 不在同一行 <div> ... </div> ); ~~~ ## 对HTML的属性进行对齐和排序 如果属性不是太多,那就放在同一行,否则就把每一个属性都单独写一行: ~~~ <div className="highlight" key="highlight-div"> <div className="highlight" key="highlight-div" > <Image className="highlight" key="highlight-div" /> ~~~ 而不是: ~~~ <div className="highlight" // 属性没有在单独行 key="highlight-div" > <div // 闭合便签不在单独的行 className="highlight" key="highlight-div"> <div // 属性没有排序(一般重要的属性写在前面) key="highlight-div" className="highlight" > ~~~ ## 一个文件只导出一个 react 类 每一个 `.jsx` 应该只能导出单独的 `react 类`。这样有利于测试,因为这些测试框架要求一个文件导出的就是一个函数。 *注意:你依然可以在一个文件中定义多个类,只要保证导出的只有一个即可。*