React/JSX及React Native 編碼規範
阿新 • • 發佈:2019-02-08
最近開始研究公司前端web商城(React)和前期APP(React Native)的維護,發現了同事之間的程式碼風格差距太大,為了以後更好的閱讀程式碼,整理一下React和JSX的一些編碼規範。
1.基本規範
- 每個檔案只包含一個React元件,命名要顧名知義。
- React Native 和 React都要儘可能的使用ES6語法。
- console在除錯時寫,除錯完立即刪除。
2.命名規範
- 檔名稱:
資料夾和檔名要使用大駝峰命名法,比如 HomeIndex.js;
通用的元件放在Component資料夾。入口檔案要明確,一般可以使用index.js。
React Native中如果僅有android/ios其中一端的功能,在檔案的尾加.android/.ios,
比如:KeyBoard.android.js和KeyBoard.ios.js。杜絕1、2、3、one、two、three之類名稱,用功能或者是模組來命名。
呼叫原生android/ios都寫在同一個.js檔案內,如果是Dialog之類的用途廣泛的,
可放在BaseView資料夾上,否則放在Action對應的業務資料夾內。
3.屬性
3.1 屬性名
- 元件的屬性使用小駝峰命名法。
- 在React中className代替class屬性,htmlFor代替for屬性。
- 使用外聯樣式時,屬性名最好帶有Style關鍵字。比如:flexStyle.js
3.2屬性設定
- 在封裝的元件內一定要設定屬性(以便propTypes校驗),不要在外部改變屬性的值。
- 屬性較多使用{…this.props}語法。(最好在屬性開頭加上{…this.props},為了防止少寫屬性,產生報錯)
- 如果重複設定屬性值時,前面的值會被後面的覆蓋。
3.3屬性對齊方式
- 屬性較少時可以行內排列
- 屬性較多時每行一個屬性,閉合標籤單獨成行
3.4行內迭代
- 運算邏輯簡單的直接使用行內迭代。
return (
<div>
{this.props.data.map(function(data, i) {
return (<Component data={data} key={i} />)
})}
</div>
);
4.註釋
- 元件之間的註釋需要用 {/* 註釋內容 */} 包裹。
var content = (
<Nav>
{/* child comment, put {} around */ }
<Person
/* multi
line
comment */
name={window.isLoggedIn ? window.name : ''} // end of line comment
/>
</Nav>
);
5.引號使用
- HTML/JSX 屬性使用雙引號 “;
- JS 使用單引號 ‘;
// bad
<Foo bar='bar' />
// good
<Foo bar="bar" />
// bad
<Foo style={{ left: "20px" }} />
// good
<Foo style={{ left: '20px' }} />
// JavaScript Expression
const person = <Person name={window.isLoggedIn ? window.name : ''} />;
// HTML/JSX
const myDivElement = <div className="foo" />;
const app = <Nav color="blue" />;
const content = (
<Container>
{window.isLoggedIn ? <Nav /> : <Login />}
</Container>
);
6. 條件 HTML
- 簡短的輸出在行內直接三元運算子;
{this.state.show && 'This is Shown'}
{this.state.on ? 'On' : 'Off'}
- 較複雜的結構可以在 .render()方法內定義一個以 Html結尾的變數。
var dinosaurHtml = '';if (this.state.showDinosaurs) { dinosaurHtml = ( <section> <DinosaurTable /> <DinosaurPager /> </section> );}return ( <div> ... {dinosaurHtml} ... </div>);
[
](https://github.com/minwe/style-guide/blob/master/React.js.md#-使用)
7.() 使用
- 多行的 JSX 使用 () 包裹,有元件巢狀時使用多行模式;
// bad
return (<div><ComponentOne /><ComponentTwo /></div>);
// good
var multilineJsx = (
<header>
<Logo />
<Nav />
</header>
);
// good
return (
<div>
<ComponentOne />
<ComponentTwo />
</div>
);
- 單行 JSX 省略 ()。
var singleLineJsx = <h1>Simple JSX</h1>;
// good, when single line
render() {
const body = <div>hello</div>;
return <MyComponent>{body}</MyComponent>;
}
8.自閉合標籤
- JSX 中所有標籤必須閉合;
- 沒有子元素的元件使用自閉合語法,自閉合標籤 / 前留一個空格。
// bad
<Logo></Logo>
<Logo/>
// very bad
<Foo />
// bad
<Foo
/>
// good
<Logo />
9.元件內部程式碼組織
- 不要使用下劃線字首命名 React 元件的方法;
// bad
React.createClass({
_onClickSubmit() {
// do stuff
}
// other stuff
});
// good
React.createClass({
onClickSubmit() {
// do stuff
}
// other stuff
});
- 按照生命週期組順序織元件的方法、屬性;
- 方法(屬性)之間空一行;
- .render() 方法始終放在最後;
- 自定義方法 React API 方法之後、.render() 之前。
// React 元件中按照以下順序組織程式碼
React.createClass({
displayName: '',
mixins: [],
statics: {},
propTypes: {},
getDefaultProps() {
// ...
},
getInitialState() {
// do something
},
componentWillMount() {
// do something
},
componentDidMount() {
// do something: add DOM event listener, etc.
},
componentWillReceiveProps() {
},
shouldComponentUpdate() {},
componentWillUpdate() {},
componentDidUpdate() {},
componentWillUnmount() {
// do something: remove DOM event listener. etc.
},
// clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
handleClick() {
// ...
},
// getter methods for render like getSelectReason() or getFooterContent()
// Optional render methods like renderNavigation() or renderProfilePicture()
render() {
// ...
}
});