資訊專欄INFORMATION COLUMN
4.1 react 代碼規(guī)范書籍完整目錄
關(guān)于
基礎(chǔ)規(guī)范
組件結(jié)構(gòu)
命名規(guī)范
jsx 書寫規(guī)范
eslint-plugin-react
關(guān)于在代碼的設(shè)計(jì)上，每個(gè)團(tuán)隊(duì)可能都有一定的代碼規(guī)范和模式，好的代碼規(guī)范能夠提高代碼的可讀性便于協(xié)作溝通，好的模式能夠上層設(shè)計(jì)上避免不必要的 bug 出現(xiàn)。本節(jié)會(huì)參考社區(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
屬性對(duì)齊
// 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 插件來(lái)強(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79800.html
摘要：需要提醒讀者的是，的很多例子都是通過(guò)來(lái)寫的，但這并不是語(yǔ)法，后面我們會(huì)有單獨(dú)的一小節(jié)講解的基本語(yǔ)法，不過(guò)目前為止我們先將跟多精力放在上。 書籍完整目錄 1.2 JSX 語(yǔ)法 showImg(https://segmentfault.com/img/bVvKLR); 官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html ...
摘要：?jiǎn)蜗驍?shù)據(jù)流應(yīng)用的核心設(shè)計(jì)模式，數(shù)據(jù)流向自頂向下我也是性子急的人，按照技術(shù)界的慣例，在學(xué)習(xí)一個(gè)技術(shù)前，首先得說(shuō)一句。然而的單向數(shù)據(jù)流的設(shè)計(jì)讓前端定位變得簡(jiǎn)單，頁(yè)面的和數(shù)據(jù)的對(duì)應(yīng)是唯一的我們可以通過(guò)定位數(shù)據(jù)變化就可以定位頁(yè)面展現(xiàn)問(wèn)題。 書籍完整目錄 1.1 React 介紹 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...
摘要：無(wú)狀態(tài)組件除了可以通過(guò)來(lái)創(chuàng)建組件以外，組件也可以通過(guò)一個(gè)普通的函數(shù)定義，函數(shù)的返回值為組件渲染的結(jié)果。這就是為什么要有屬性，屬性能夠幫助定位與數(shù)組元素的關(guān)系，在重渲染的時(shí)候能夠?qū)崿F(xiàn)渲染優(yōu)化。 書籍完整目錄 1.3 React 組件 showImg(https://segmentfault.com/img/bVvLOW); 1.3.1 React 組件介紹 在 React 中組件是第一元...
閱讀 3199·2021-10-15 09:41
閱讀 3240·2021-09-22 16:05
閱讀 2501·2021-09-22 15:19
閱讀 2957·2021-09-02 15:11
閱讀 2517·2019-08-30 15:52
閱讀 916·2019-08-30 11:06
閱讀 1061·2019-08-29 16:44
閱讀 1372·2019-08-23 18:18
