1.代碼格式規范

1.1 命名

命名優先使用英文全拼，過長可適當使用英文縮寫，命名應少于20個字符

• 文件夾名：小寫，可以使用下劃線進行分割

order order_page

• 文件名：使用駝峰命名且首字母大寫

HomeView.js

• 組件名：組件名稱應該和文件名一致，使用駝峰命名且首字母大寫

export default class ProjectDetail extends Component {}

• 引用名：與組件名一致，使用駝峰命名法且首字母大寫

//bad import demoPgae from './DemoPage' //good import DemoPage from './DemoPage'

• 函數名：使用小寫駝峰命名，對于渲染組件型使用renderXxx( )

onRefresh = () => {} renderItem = () => {}

• 變量名：使用小寫駝峰命名
• 屬性名：使用小寫駝峰命名

1.2 對齊

• 按下面的案例對齊：

// bad <Foo superLongParam="bar"anotherSuperLongParam="baz" />// good <FoosuperLongParam="bar"anotherSuperLongParam="baz" />// 如果一行能擺下props，那就擺在一行 <Foo bar="bar" />// 子組件照常縮進 <FoosuperLongParam="bar"anotherSuperLongParam="baz" ><Spazz /> </Foo>

1.3 引號

• 對于JSX的字符串屬性使用雙引號(")，其他情況下使用單引號。

// bad <Foo bar='bar' />// good <Foo bar="bar" />// bad <Foo style={{ left: "20px" }} />// good <Foo style={{ left: '20px' }} />

1.4 空格

• 在自閉合的標簽中包含一個空格。

// bad <Foo/>// bad <Foo/>// good <Foo />

1.5 state/props

• 對于多個單詞組成的pros，使用駝峰命名法。不使用下劃線或連接線。

// bad <FooUserName="hello"phone_number={12345678} />// good <FoouserName="hello"phoneNumber={12345678} />

• 讀取state和props時，使用const與解構，必要時可使用let。不使用var。

// bad var userName = this.props.userName; let checked = this.state.checked;// good const { userName, age, sex } = this.props; const { checked } = this.state;

1.6 括號

• 當JSX標簽超過一行時，使用括號包裹。

/// bad render() {return <MyComponent className="long body" foo="bar"><MyChild /></MyComponent>; }// good render() {return (<MyComponent className="long body" foo="bar"><MyChild /></MyComponent>); }// good, when single line render() {const body = <Text>hello</Text>return <MyComponent>{body}</MyComponent> }

1.7 標簽

• 對于沒有子組件的JSX標簽，始終自閉合。

// bad <Foo className="stuff"></Foo>// good <Foo className="stuff" />

• 如果組件有多行屬性，則另起一行進行自閉合。

// bad <Foobar="bar"baz="baz" />// good <Foobar="bar"baz="baz" />

1.8 組件內部方法聲明順序

原則上按如下順序排列ReactNative組件的各個方法（生命周期）：

• 靜態屬性和方法
• 生命周期方法：
  • constructor
  • getDefaultProps
  • getInitialState,
  • getChildContext
  • getDerivedStateFromProps
  • componentWillMount
  • UNSAFE_componentWillMount
  • componentDidMount
  • componentWillReceiveProps
  • UNSAFE_componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • UNSAFE_componentWillUpdate
  • getSnapshotBeforeUpdate
  • componentDidUpdate
  • componentDidCatch
  • componentWillUnmount
• 自定義方法
• 渲染組件的方法 renderXxx()
• render方法
• 組件外部最后寫StyleSheet

export default class DemoComponent extends Component {constructor(props) {super(props)// 初始狀態this.state = {}this.initVal()}componentWillMount() {}initVal = () => {}loadData = () => {}renderContent = () => {return(<View/>)}render() {return (<View style={ResStyles.container}>{this.renderContent()}</View>)} }const styles = StyleSheet.create({container: {}, });

2.格式化工具

項目使用 ESLint + Prettier 來統一代碼格式

• ESLint：檢測出代碼中的潛在問題，提高代碼質量
• Prettier：統一代碼風格

為什么要把 ESLint 的 代碼格式規范 部分用 Prettier 取代？

代碼規范比 ESLint 的 Airbnb、Standard 更好更先進。

比 ESLint 提供更少的代碼風格規則配置項，終極目的是結束關于代碼風格的爭論。

比 ESLint 支持更多的語言

使用步驟：

在VSCode中下載安裝 ESLint、Prettier 插件，它們的配置文件.eslintrc.js和.prettierrc.js配置好，跟隨項目保存在git倉庫里

//.eslintrc.js module.exports = {parser: 'babel-eslint',env: {es6: true,},extends: ['standard', 'plugin:prettier/recommended'],globals: {Atomics: 'readonly',SharedArrayBuffer: 'readonly',},parserOptions: {ecmaFeatures: {jsx: true,legacyDecorators: true,},ecmaVersion: 2018,sourceType: 'module',},plugins: ['react'],rules: {/*** 這里可以設置規則：* "off" or 0 - 關閉規則* "warn" or 1 - 將規則作為警告打開（不影響退出代碼）* "error" or 2 - 將規則作為錯誤打開（退出代碼為1）*/'no-unused-vars': 0, //不能有聲明后未被使用的變量或參數'react/sort-comp': 1, //強制組件方法順序camelcase: 2, //強制駝峰法命名'prettier/prettier': ['error',// 如果插件配置中修改了相關選項，// 則必須在此添加相對應的自定義規則否則就會出現編輯器格式化后ESlint檢查無法通過的情況。{printWidth: 120,},],}, } //.prettierrc.js module.exports = {printWidth: 120, //一行的字符數，如果超過會進行換行，默認為80tabWidth: 2, //一個tab代表幾個空格數useTabs: false, //是否使用tab進行縮進，默認為false，表示用空格進行縮減singleQuote: true, //字符串是否使用單引號，默認為false，使用雙引號semi: false, //行位是否使用分號，默認為truetrailingComma: 'all', //是否使用尾逗號，有三個可選值"<none|es5|all>"bracketSpacing: true, //對象大括號直接是否有空格，默認為true，效果：{ foo: bar }wrapAttributes: false, //強制換行屬性（當它有多個時，默認值為false）sortAttributes: true, //按字母順序排序屬性（默認值：false）jsxBracketSameLine: false, // //將>多行JSX元素放在最后一行的末尾，而不是單獨放在下一行arrowParens: 'avoid', //箭頭函數參數只有一個時是否要有小括號endOfLine: 'auto', // 兼容Mac與Windows文本文件換行符的序列監測規則 }

在VSCode的settings.json文件中添加配置，開啟保存自動格式化、自動修改代碼錯誤、自動優化import引用 功能

// 默認使用prettier格式化支持的文件"editor.defaultFormatter": "esbenp.prettier-vscode","editor.codeActionsOnSave": {//自動整理頁面所有import引用，包括刪除未使用到的import、多import歸類整理、排序等"source.organizeImports": true,"source.fixAll": true},//每次保存的時候自動格式化"editor.formatOnSave": true,//每次保存的時候將代碼按eslint格式進行修復"eslint.autoFixOnSave": true,"window.zoomLevel": 1

3.代碼書寫規范

3.1 尺寸單位

UI組件的尺寸設置使用內部封裝的dp(30)而不是30 px。

目前項目設計基準像素為1334 * 750，可將UI設計圖寬度調整成750方便使用。

3.2 函數的使用

函數作為 props 傳遞給子組件時，優先使用箭頭函數，可省去在constructor中綁定this指向

• 函數無參數時，應直接引用函數，不要多此一舉再嵌套一層

handleClick = () => {console.log('Click happened')}//goodrender() {return <Button onClick={this.handleClick}>Click Me</Button>}//badrender() {return <Button onClick={()=> this.handleClick()}>Click Me</Button>}

• 函數有參數時，需在箭頭函數中調用

render() {return <Button onClick={()=> this.handleClick(id)}>Click Me</Button>}

3.3 JSX中的條件判斷

• 簡單的判斷場景，推薦使用三目運算符

render() {return (<View>{applyStatus === '1' ? <Tab1 /> : <Tab2 />}</View>)}

• 只有滿足條件時才會顯示元素，推薦使用短路與實現

render() {return (<View>{applyStatus === '1' && <Tab1 /> }</View>)}

• 復雜的條件場景，使用多個三目表達式會降低可讀性，推薦拆分成方法

renderComponent = (flag, flag2, flag3, flag4, flag5) => {if (flag && flag2 && !flag3) {if (flag4) {return <Text>Blah</Text>} else if (flag5) {return <Text>Meh</Text>} else {return <Text>Herp</Text>}} else {return <Text>Derp</Text>}}render() {return <View>{this.renderComponent(...)}</View>}

總結

以上是生活随笔為你收集整理的ReactNaitve代码规范和工具格式化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。