React 開發規範（1）

乙個檔案宣告乙個元件

使用 jsx 語法

使用 class、函式或 hooks 宣告元件，不使用 react.createelement

（1）元件名稱和定義該元件的檔名稱盡量保持一致，名稱盡量簡短

// good
import mycomponent from './mycomponent';
// bad
import mycomponent from './mycomponent/index';

(2) 應在 class、function(箭頭函式就是 const 關鍵字) 關鍵字或宣告後面直接宣告元件名稱,不要使用 displayname 來命名 react 模組

// good
export default class mycomponent extends react.component {}
const myfield = (props) => ;
// bad
export default react.createclass();

(3) 元件名稱應全域性唯一

很多業務都會有相同的檔案命名，此時應在宣告元件名稱時保持全域性唯一。一般是將業務鏈路名稱全拼至元件宣告

// account/user/list.jsx
// good
export default class accountuserlist extends react.component {}
// bad
export default class list extends react.component {}

（4）高階元件名

// bad
return function withfoo(props) ;
}// good
function withfoo(props) 
return withfoo;
}

（1）元件檔案字尾為 jsx、tsx包含 jsx 語法的應啟用 jsx 字尾作為元件字尾

（2）元件檔名為 pascalcase 大駝峰格式

components/
|- mycomponents.jsx

（3）元件資料夾名稱和預設匯出乙個元件可以被拆分成多個元件編寫的應建立目錄，目錄使用 pascalcase。建立 index.jsx 匯出物件。

components/
|- mycomponent/
|----index.jsx
|----mycomponentlist.jsx
|----mycomponentlistitem.jsx

元件有內部狀態或是 refs 引用使用 react.component`

export default class showname extends react.component ;
}  render()  = this.state;
return 
;  }
}

元件沒有狀態或 refs 可以使用函式元件

const showname = () => 
;

元件中有狀態或事件響應且執行更新邏輯清晰的才可以使用 hooks，否則都應使用 class

// good
import react,  from 'react';
import  from 'antd';
const automodal = (props) =>  = props;
const [confirmloading, setconfirmloading] = usestate(false);
const [form] = form.useform();
const [csflagstate, setcsflagstate] = usestate(csflag);
const [customerflagstate, setcustomerflagstate] = usestate(customerflag);
const handlefinish = async (values) =>  catch (e)  finally 
};const handleok = () => ;
const handlecancel = () => {};
const handlecsflagchange = (e) => ;
const handlecustomerflagchange = (e) => ;
const checkflag = () => 
message.warning('服務客服或服務客戶至少選一項');
return promise.reject(new error('服務客服或服務客戶至少選一項'));
};useeffect(() => );
}}, [modifyobj, visible, form]);
useeffect(() => );
setcsflagstate(csflag);
}}, [csflag, visible, form]);
useeffect(() => );
setcustomerflagstate(customerflag);
}}, [customerflag, visible, form]);
return (
);};export default automodal;

使用 css modules 編寫區域性樣式元件，因為其物件是作為物件在 jsx 中使用，樣式應使用小駝峰命名`

&-text

}

import styles from 'style.less';
export default class mycomponent extends react.component 
}

react元件開發規範（一）

這是通過修改專案執行在google上時的警告，總結的的部分react元件開發規範 1 編寫元件時，一定要寫proptypes,切莫為了省事兒而不寫！如果乙個props不是required，一定在getdefaultprops中設定它 react.proptypes主要用來驗證元件接收到的props是...

React 前端開發規範（執行版）

一命名規範 1.變數命名方法小駝峰式命名法，首字母小寫。studentinfo userinfo 命名建議使用英文單詞組合，語義清晰忌 var a 0 var nihao true 註明無法用英文詮釋的單詞可使用首拼，例 var hkb 戶口本 2.常量命名方法全部大寫，下劃線分隔 ...

react元件書寫規範

元件的私有方法都用開頭，所有事件監聽的方法都用handle開頭。把事件監聽方法傳給元件的時候，屬性名用on開頭元件的內容編寫順序如下 static 開頭的類屬性，如defaultprops proptypes。建構函式，constructor。getter setter 還不了解的同學可以暫時忽...

React 開發規範（1）

react元件開發規範（一）

React 前端開發規範（執行版）

react元件書寫規範

相關推薦