資訊專欄INFORMATION COLUMN
4.1 react 代碼規范書籍完整目錄
關于
基礎規范
組件結構
命名規范
jsx 書寫規范
eslint-plugin-react
關于在代碼的設計上，每個團隊可能都有一定的代碼規范和模式，好的代碼規范能夠提高代碼的可讀性便于協作溝通，好的模式能夠上層設計上避免不必要的 bug 出現。本節會參考社區提供一些 React 的規范和優秀的設計模式。
基礎規范統一全部采用 Es6
組件文件名稱采用大駝峰命名
組件結構總體規則： stateless(Function) 優先于 Es6 Class 優先于 React.createClass；
書寫規則： 規范組件內部方法的定義順序
Es6 class 定義規范:
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 {
// 構造函數
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;
/**
* 統一都要定義 propTypes
* @type {Object}
*/
Person.propTypes = propTypes;
命名規范
組件名稱：大駝峰
屬性名稱：小駝峰
事件處理函數：handleSomething
自定義事件屬性名稱：onSomething={this.handleSomething}
key: 不能使用數組 index ，構造或使用唯一的 id
組件方法名稱：避免使用下劃線開頭的命名
jsx 書寫規范自閉合
// 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
規范可以使用 eslint-plugin-react 插件來強制實施，規則和配置可查看
https://github.com/yannickcr/eslint-plugin-react
更多 react 代碼規范可參考 https://github.com/airbnb/javascript/tree/master/react
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79800.html
摘要：需要提醒讀者的是，的很多例子都是通過來寫的，但這并不是語法，后面我們會有單獨的一小節講解的基本語法，不過目前為止我們先將跟多精力放在上。 書籍完整目錄 1.2 JSX 語法 showImg(https://segmentfault.com/img/bVvKLR); 官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html ...
摘要：單向數據流應用的核心設計模式，數據流向自頂向下我也是性子急的人，按照技術界的慣例，在學習一個技術前，首先得說一句。然而的單向數據流的設計讓前端定位變得簡單，頁面的和數據的對應是唯一的我們可以通過定位數據變化就可以定位頁面展現問題。 書籍完整目錄 1.1 React 介紹 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...
摘要：無狀態組件除了可以通過來創建組件以外，組件也可以通過一個普通的函數定義，函數的返回值為組件渲染的結果。這就是為什么要有屬性，屬性能夠幫助定位與數組元素的關系，在重渲染的時候能夠實現渲染優化。 書籍完整目錄 1.3 React 組件 showImg(https://segmentfault.com/img/bVvLOW); 1.3.1 React 組件介紹 在 React 中組件是第一元...
閱讀 3102·2021-10-15 09:41
閱讀 3171·2021-09-22 16:05
閱讀 2414·2021-09-22 15:19
閱讀 2878·2021-09-02 15:11
閱讀 2453·2019-08-30 15:52
閱讀 841·2019-08-30 11:06
閱讀 1006·2019-08-29 16:44
閱讀 1256·2019-08-23 18:18
