資訊專欄INFORMATION COLUMN
4.1 react 代碼規(guī)范書籍完整目錄
關(guān)于
基礎(chǔ)規(guī)范
組件結(jié)構(gòu)
命名規(guī)范
jsx 書寫規(guī)范
eslint-plugin-react
關(guān)于在代碼的設(shè)計(jì)上，每個團(tuán)隊(duì)可能都有一定的代碼規(guī)范和模式，好的代碼規(guī)范能夠提高代碼的可讀性便于協(xié)作溝通，好的模式能夠上層設(shè)計(jì)上避免不必要的 bug 出現(xiàn)。本節(jié)會參考社區(qū)提供一些 React 的規(guī)范和優(yōu)秀的設(shè)計(jì)模式。
基礎(chǔ)規(guī)范統(tǒng)一全部采用 Es6
組件文件名稱采用大駝峰命名
組件結(jié)構(gòu)總體規(guī)則： stateless(Function) 優(yōu)先于 Es6 Class 優(yōu)先于 React.createClass；
書寫規(guī)則： 規(guī)范組件內(nèi)部方法的定義順序
Es6 class 定義規(guī)范:
static 方法
constructor
getChildContext
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
clickHandlers + eventHandlers 如 onClickSubmit() 或 onChangeDescription()
getter methods for render 如 getSelectReason() 或 getFooterContent()
render methods 如 renderNavigation() 或 renderProfilePicture()
render
以 Es6 Class 定義的組件為例；
const defaultProps = {
name: "Guest"
};
const propTypes = {
name: React.PropTypes.string
};
class Person extends React.Component {
// 構(gòu)造函數(shù)
constructor (props) {
super(props);
// 定義 state
this.state = { smiling: false };
// 定義 eventHandler
this.handleClick = this.handleClick.bind(this);
}
// 生命周期方法
componentWillMount () {},
componentDidMount () {},
componentWillUnmount () {},
// getters and setters
get attr() {}
// handlers
handleClick() {},
// render
renderChild() {},
render () {},
}
/**
* 類變量定義
*/
Person.defaultProps = defaultProps;
/**
* 統(tǒng)一都要定義 propTypes
* @type {Object}
*/
Person.propTypes = propTypes;
命名規(guī)范
組件名稱：大駝峰
屬性名稱：小駝峰
事件處理函數(shù)：handleSomething
自定義事件屬性名稱：onSomething={this.handleSomething}
key: 不能使用數(shù)組 index ，構(gòu)造或使用唯一的 id
組件方法名稱：避免使用下劃線開頭的命名
jsx 書寫規(guī)范自閉合
// bad// good
屬性對齊
// bad// good // if props fit in one line then keep it on the same line
返回
// bad
render() {
return
;
}
// good
render() {
return (
);
}
// good, when single line
render() {
const body = hello;
return {body} ;
}
eslint-plugin-react
規(guī)范可以使用 eslint-plugin-react 插件來強(qiáng)制實(shí)施，規(guī)則和配置可查看
https://github.com/yannickcr/eslint-plugin-react
更多 react 代碼規(guī)范可參考 https://github.com/airbnb/javascript/tree/master/react
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79800.html
摘要：需要提醒讀者的是，的很多例子都是通過來寫的，但這并不是語法，后面我們會有單獨(dú)的一小節(jié)講解的基本語法，不過目前為止我們先將跟多精力放在上。 書籍完整目錄 1.2 JSX 語法 showImg(https://segmentfault.com/img/bVvKLR); 官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html ...
摘要：單向數(shù)據(jù)流應(yīng)用的核心設(shè)計(jì)模式，數(shù)據(jù)流向自頂向下我也是性子急的人，按照技術(shù)界的慣例，在學(xué)習(xí)一個技術(shù)前，首先得說一句。然而的單向數(shù)據(jù)流的設(shè)計(jì)讓前端定位變得簡單，頁面的和數(shù)據(jù)的對應(yīng)是唯一的我們可以通過定位數(shù)據(jù)變化就可以定位頁面展現(xiàn)問題。 書籍完整目錄 1.1 React 介紹 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...
摘要：無狀態(tài)組件除了可以通過來創(chuàng)建組件以外，組件也可以通過一個普通的函數(shù)定義，函數(shù)的返回值為組件渲染的結(jié)果。這就是為什么要有屬性，屬性能夠幫助定位與數(shù)組元素的關(guān)系，在重渲染的時候能夠?qū)崿F(xiàn)渲染優(yōu)化。 書籍完整目錄 1.3 React 組件 showImg(https://segmentfault.com/img/bVvLOW); 1.3.1 React 組件介紹 在 React 中組件是第一元...
閱讀 3107·2021-10-15 09:41
閱讀 3179·2021-09-22 16:05
閱讀 2419·2021-09-22 15:19
閱讀 2883·2021-09-02 15:11
閱讀 2458·2019-08-30 15:52
閱讀 846·2019-08-30 11:06
閱讀 1010·2019-08-29 16:44
閱讀 1265·2019-08-23 18:18
