React編程規範

1、命名規範

一、通用命名方法

命名方法	舉例
Camel命名法	thisIsAnApple
Pascal命名法	ThisIsAnApple

注意：在命名時儘可能簡潔明瞭，用英文表達（絕對不能用拼音或者首字母拼寫）

二、各種型命名規範

名稱	命名方法	詞彙種類	說明	舉例
局部變量名	Camel命名法	名詞		fristName
全局變量名	Camel命名法	名詞	前綴:g	gFristName
參數名	Camel命名法	名詞		fristName
方法/屬性	Camel命名法	名詞		fristName
私有（保護）成員	Camel命名法	名詞	前綴:_	_fristName
常量名	名詞	下劃線+全體大寫		ADD_METHOD
類名	Pascal命名法	名詞		AtiveDic
Bool類型	Camel命名法	名詞	前綴:is/has	hasChild

三、函數與類的命名

Ⅰ.函數

1）使用Pascal命名法
2）前綴爲動詞，前綴詞以下表所示

動詞	含義	舉例
Can	判斷是否能夠執行某個權限	CanLogin
Has	判斷是否含有某個值	HasToken
Is	判斷是否爲某個值	IsShowModel
Get	獲取某個值	GetUserId
Set	設置某個值	SetCookie
Load	加載某些數據	LoadList
Update	更新某些數據	UpdateUserInfo
Del	刪除某些數據	DelMenu

Ⅱ、類（Class）命名規範
1）使用Pascal命名法
2）名字應該明確表達改類的做用

2、props與state的使用

一、Props

定義：大多數組件在定義時就能夠經過各類自定義參數來實現組件的定製。
編程注意事項：

1.在頁面中禁止直接修改propsthis.props.name = 'Alen'。

2.在調用props時儘可能使用擴展符。

//good
const { name } = this.porps;
console.log(name);
//bad
console.log(this.props.name);

3.在傳遞props時，如無必要，不能傳遞整個props，只需傳遞props中所須要的屬性（在models中的reducers 同理）。

二、State

定義：State是一個組件的UI數據模型，是組件渲染時的數據依據。
編程注意事項：
1.絕對不要 直接改變 this.state,你能夠將它看做是一個不可變得變量（如需改變必須調用setState）

//good
this.setState({name:'Lucy'});
    
//bad
this.state.name = 'Lucy';

2.setState時異步的，若執行setState後需立刻調用，可使用這些方法轉化爲同步。（方法）

3.和渲染無關的狀態儘可能不要放在 state 中來管理

4.在State更新時，若是更新的值涉及到了state和props，我須要注意在調用setState時不要直接使用this.props和this.state

//good 
this.setState((prevState, props) => ({
name: prevState.name + props.increment
}));

//bad
this.setState({name:this.state.name});

5.禁止在shouldComponentUpdate或者componentWillUpdate方法中調用setState

6.最好在componentDidMount中調用

三、什麼時候調用哪一個？

1.若是數據須要跨組件傳輸，則放在props中進行傳遞

2.若是數據只在本組件使用，而且涉及到在render中進行渲染，則放在state中進行處理

3.其他數據可在組件中直接定義。

3、React編碼規範

一、自我解釋

儘量減小代碼中的註釋。能夠經過讓變量名更語義化、只註釋複雜、潛在邏輯，來減小注釋量，同時也提升了可維護性，畢 竟不用總在代碼與註釋之間同步了。

二、JSX編碼

1.在JSX中禁止使用if語句進行斷定

//bad
ShowUserInfo{
    if(isShowUserInfo){
        retrun(
            <div>姓名：張三</div>
        );
    }else{
        return(
            <div>姓名：未填寫</div>
        )
    }   
}
//good
ShowUserInfo(){
    return isShowUserInfo : (<div>姓名：張三</div>) ? (<div>姓名：未填寫</div>)
}

三目運算：條件1?值1或操做1: //若是知足條件1，就返回值1或執行操做1

2.儘可能使用單標籤

//bad
render(){
    return(
    <div>
        ...
        <UserInfo></UserInfo>
        ...
    </div>
    );
}
//good
render(){
    return(
    <div>
        ...
        <UserInfo />
        ...
    </div>
    );
}

3.在標籤中默認的都是true

//bad
<Foo
  hidden={true}
/>

//good
<Foo hidden />

4.在map循環時，不要用index做爲每一個標籤的key

// bad
{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

// good
{todos.map(todo => (
  <Todo
    {...todo}
    key={todo.id}
  />
))}

5.使用ref的回調

// bad
<Foo
  ref="myRef"
/>

// good
<Foo
  ref={(ref) => { this.myRef = ref; }}
/>

更多JSX規範參見：更多規範

三、渲染與判斷邏輯分開

在render中只進行頁面的渲染，不做對數據或者邏輯的處理

四、解構

// bad  
const splitLocale = locale.split('‑');  
const language = splitLocale[0];  
const country = splitLocale[1]; 
// good  
const [language, country] = locale.split('‑');

五、變量斷定

1.對全部定義的或者傳入的變量，都進行默認設置或者斷定是否爲undefined，防止數據未定義時程序報錯。

// Bad  
onChange(value => console.log(value.name))  
// Dirty  
onChange((value) => {   
    if (!value) {
          value = {}
    }    
    console.log(value.name)  
})  
// Clean  
onChange((value = {}) => console.log(value.name))  
// Clean  
onChange(value => console.log(value?.name))

不要信任任何回調函數給你的變量，它們隨時多是 undefined ，使用初始值是個不錯的選擇，但有的時候初始值沒什麼意 義，使用 ?. 語法能夠安全的訪問屬性。

2.自定義變量

//bad
let newslist = this.props.newslist;
let b = a  // a爲數組
//good 
let { newslist = [] } = this.props;
let b = a || [];

4、React中經常使用ES6語法

一、let與const

1.let、const只能定義以後使用

console.log(a); // error
let a = 1;
console.log(b); // undefined
var b = 2;
console.log(c);
const c = 3;   // error

二、let與const不能重複定義

let a = 1;
const b = 1;
var c = 1;
let a = 2; // Identifier 'a' has already been declared
const b = 2; // Identifier 'a' has already been declared
var c = 2; // 2

三、const定義後的變量不可修改

var a = 1;
a = 2;  // 2
let b = 1;
b = 2; // 2
console.log(b);
const c = 1;
c = 2; //Assignment to constant variable.

從上面這些實例我能夠大體的知道const、let、var具體應該應用在那些地方，可是咱們會發現let與var幾乎沒有什麼區別，那麼爲何咱們不能所有都用var呢？
答案是不能的，有var是在全局中申明一個變量，首先這個變量在使用後依然會存在與內存中，而let在函數調用完成事後就會被當即消除，從下面的例子咱們能夠看出。

for (var j = 0; j < 10; j++) {
    // ...
}
console.log(j);  // 10
for (let i = 0; i < 10; i++) {
    // ...
}
console.log(i);  // i is not defined

因此慎用var，咱們在日常編碼過程當中，大部分的var都是能被let和const替代的。

二、變量解構

1.數組與數組合並

let a = [1,2];
let b = [3,4];
//bad
let c = a.concat(b); // [1,2,3,4]
//OR
for(let i = 0 ;i<b.length;i++){
    a.push(b[i]);
}
//good
let c = [...a,...b]; // [1,2,3,4]

2.對象與對象合併

let a = {name:'張三'}
let b = {age:32}
//bad
let c = {
    name:a.name,
    age:b.age
}
//good 
let c = {...a,...b};

3.對象併入數組

let a = [{name:'張三'}];
let b = {name:'Lucy'};
//bad
let c = a.push(b);
//good
let c = [...a,b];

4.更改變量名

let a = {name:'Lucy',age:32};
//bad
let NAME = a.name;
//good 
let {name:NAME} = a;

5.數值互換

let a = 1;
let b = 2;
//bad
let t;
t = a;
a = b;
b = t;
//good
[a,b] = [b,a];

三、箭頭函數

請寫一個經常使用的forEach循環

let arr = [1,2,3];
//bad 
arr.forEach(function(e){
    console.log(e);
});
//good
arr.forEach((e)=>{
    console.log(e);
});

可是咱們會發現，其實funtion去寫也並無什麼不對的地方，最多也就是多寫一點點而已，那爲何ES6須要新增這個箭頭函數呢？
最主要的目的就是解決this指針的問題，而this在React的編碼過程當中會大量的去使用它。
咱們知道在ES6中，咱們能夠建立一個class，若是咱們默認在其裏面加入一個函數的話，其必須在調用的時候，必須綁定this指針，不然不能訪問當前類的實例裏面的屬性。

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    this.age++;
    console.log(this.age); // NaN
  }, 1000);
}
var p = new Person();

在ES3/5咱們須要穿過function傳遞須要怎麼作呢？

function Person() {
  this.age = 0;
  let _this = this;
  setInterval(function growUp() {
    _this.age++;
    console.log(_this.age); // 1 2 3...
  }, 1000);
}
var p = new Person();

可是這樣寫會麻煩，並且有點囉嗦和繁雜，因此咱們可使用es6中的箭頭函數

function Person() {
  this.age = 0;
  setInterval(()=> {
    this.age++;
    console.log(this.age); // 1 2 3...
  }, 1000);
}
var p = new Person();

在React中須要傳遞this指針也都是經過箭頭函數來實現的，固然之前也可使用bind函數來綁定this，可是這樣也是一種吃力不討好的作法。

四、遍歷

注意：在遍歷過程當中禁止刪除、新增
1.數組遍歷

let a = [1,2,3,4,5];
//bad
for(let i = 0;i<a.length;i++){
    console.log(a[i]);
}
//good
a.forEach(e=>{
    console.log(e);
})
//OR
a.map(e=>{
    console.log(e);
});

參考文獻：for 、 forEach 、 map

2.對象遍歷

let a = {name:'Lucy',age:32,sex:'女'};
//bad
for(o in a){
    console.log(a[o]);
}
//good 
for(o in a){
    if(a.hasOwnProperty(o)){
        console.log(a[o]);
    }
}

參考文獻：for...in... for...of... 注意：兩者有巨大區別，慎用

3.值判斷

1.判空

if([]){
    console.log('1');
} // 1
if({}){
    console.log('1');
} // 1
if(''){
    console.log('1');
}

變量若是不爲0，null，undefined，false，都會被處理爲true。只要變量有非0的值或是某個對象，數組，非空字符串，都會認爲true

2.true || false

console.log([] == false); // true
console.log({} == false); // true
console.log('' == false); // false
console.log(0 == false); //true

3.typeof類型判斷

類型	結果
Undefined	"undefined"
Null	"object"
Boolean	"boolean"
Number	"number"
String	"string"
Symbol	"symbol"
宿主對象	Implementation-dependent
函數對象	"function"
任何其餘對象	"object"

參考文獻：typeof