React開發的小技巧

一、短路寫法代替if

// 經過判斷值是否存在來控制元素是否顯示
// 通常三目運算能夠達到此效果，部分能夠用短路寫法代替
// 用!!將其轉爲boolean避免坑
const flag = 0;
!!flag && <div></div>

二、使用es6新特性傳遞組件props

const {data, type} = this.state;
// 通常方法
<Demo data={data} type={type}/>
// es6方法
<Demo {...{data, type}}/>

三、 利用es6 rest 參數（形式爲...變量名）傳遞可變數量的props

// 定義子組件
const Demo = ({ prop1, prop2, ...restProps }) => (
    <div>{ restProps.text}</div>
)
// 父組件使用Demo
<Demo prop1={xxx} prop2={xxx} text={xxx}/>

四、setState的其餘用法

// 通常改變state值的一種方式
const { data } = this.state;
this.setState({ data: {...data, key: 1 } });
// 另一種能夠經過callback的方式改變state的值
this.setState(({ data }) => ({ data: {...data, key: 1 } }));
// 還能夠
this.setState((state, props) => {
    return { counter: state.counter + props.step };
});

五、React 性能優化

// React 性能優化有不少種方式，
// 那常見的一種就是在生命週期函數shouldComponentUpdate裏面判斷
// 某些值或屬性來控制組件是否從新再次渲染。
// 判斷通常的字符串，數字或者基礎的對象，數組都仍是比較好處理
// 那嵌套的對象或者數組就比較麻煩了，對於這種
// 推薦使用lodash(或者其餘的相似庫)的isEqual對嵌套數組或對象進行判斷
shouldComponentUpdate(nextProps, nextState) {
    if (_.isEqual(nextState.columns, this.state.columns)) return false;
    return true;
}

六、子組件改變父組件的state

// 子組件改變父組件的state方式有不少種，能夠在父組件設置一個通用函數，
// 相似：setParentState，經過子組件回調處理時，就能夠更方便的統一處理
// 父組件
state = {data: {}};
setParentState = obj => {
    this.setState(obj);
}
// 子組件
onClick = () => {
    this.props.setParentState({ data: xxx });
}