react最佳實踐(基礎(chǔ)篇)
以下僅僅是個人意見或者是react實踐中的技巧,只針對代碼不針對個人
- 無論如何,請考慮好狀態(tài)應(yīng)該放在
組件內(nèi)部的state或者是redux中
- 如果你的變量只是操作邏輯不會 render UI的情況下,請不要放在state中
- es6合理使用 推薦es6使用
//解構(gòu)賦值
let { state1,state2, state3 } = this.state;
let { prop1, prop2, porp3 } = this.props;
//字符串模板
`${name}`
//默認(rèn)值處理
function toDo(name = "who", age = 12){ //to do }
//展開運算符
let obj = { name ="name", age = 12 };
toDo(...obj)
- 書寫問題
<Spin
spinning={props.switcher.atsFetching !== false} // ???/
>
- 判斷屬性是否在對象或者數(shù)組中(省去循環(huán)的代碼)
if('activeIndex' in props){
//to do
}
- 在合適的情況下,使用且必須推薦無狀態(tài)組件(沒有狀態(tài)沒有生命周期只傳prop實現(xiàn))
// 無狀態(tài)組件接收的參數(shù)必須使用 {} 包裹,它傳入的是 父組件的props
function Button({text='按鈕',color='red'}){
return (
<button className={btn btn-${color}}>
<span>${text}</text>
</button>
)
}
- 類型檢查
//函數(shù)的類型檢查是propTypes.func
//布爾類型的propTypes.bool
be:避開關(guān)鍵詞
- 生命周期
//WillMount會在render之前執(zhí)行,DidMount則會在render之后執(zhí)行
如果在DidMount后又setState則會 re-render
//在執(zhí)行reactComponentWillMount的時候進(jìn)行setState是不會重新re-render的,
//而是會合并state
/*
*/
!!注意:禁止在shouldComponentUpdate和ComponentWillUpdate中setState,
會導(dǎo)致循環(huán)調(diào)用直到瀏覽器耗光了內(nèi)存
- react綁定this
/*
如果綁定this不需要傳遞參數(shù)的情況下可以使用::this.handleClick
而且項目中要使用 stage-0 的提案
*/
/*
在react中使用DOM原生事情,一定要在組件卸載的時候手動移除事件
否則很有可能會造成內(nèi)存泄漏
*/
/*
不要將合成事件與原生事件混用,否則達(dá)不到你想要的效果
*/
- 不要直接在組件上寫樣式
return < input style={{color:'red'}}> //這樣每次都會得到新的style對象,造成重新render的性能消耗
//使用先定義的方式來處理這個問題
- react性能優(yōu)化方案(在shouldComponentUpdate)
import React from 'react';
import { is } from 'immutable';
class App extends Component {
shouldComponentUpdate(nextProps,nextState){
const thisProps = this.props || {};
const thisState = this.state || {};
if(Object.keys(thisProps).length !== Object.keys(nextProps).length
|| Object.keys(thisState).length !== Object.keys(nextState).length){
return true
}
for(const key in nextProps){
if(nextProps.hasOwnProperty(key) && !is( thisProps[key], nextProps[key])){
return true
}
}
for(const key in nextState){
if(nextState.hasOwnProperty(key) && !is( thisState[key], nextState[key])){
return true
}
}
return false
}
}
- react建議使用的css動畫庫
react-smoothreact-motion - SVG線條動畫
vivus - react中遍歷數(shù)組或者是對象的時候注意點
在使用 key 的時候請不要使用自然索引,請使用id
CSS樣式
- OOCSS BEM(推薦)
- 不要強(qiáng)行覆寫antd或者是二次封裝的組件樣式
- 不要使用浮動
- scss使用熟練
- 使用語義化標(biāo)簽
