React開發的小技巧

zer0_li發表於2018-09-17
React

1、短路寫法代替if

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

2、使用es6新特性傳遞元件props

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

3、 利用es6 rest 引數（形式為…變數名）傳遞可變數量的props

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

4、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 };
});

5、React 效能優化

// React 效能優化有很多種方式，
// 那常見的一種就是在生命週期函式shouldComponentUpdate裡面判斷
// 某些值或屬性來控制元件是否重新再次渲染。
// 判斷一般的字串，數字或者基礎的物件，陣列都還是比較好處理
// 那巢狀的物件或者陣列就比較麻煩了，對於這種
// 推薦使用lodash(或者其他的類似庫)的isEqual對巢狀陣列或物件進行判斷
shouldComponentUpdate(nextProps, nextState) {
    if (_.isEqual(nextState.columns, this.state.columns)) return false;
    return true;
}

6、子元件改變父元件的state

// 子元件改變父元件的state方式有很多種，可以在父元件設定一個通用函式，
// 類似：setParentState，通過子元件回撥處理時，就可以更方便的統一處理
// 父元件
state = {data: {}};
setParentState = obj => {
    this.setState(obj);
}
// 子元件
onClick = () => {
    this.props.setParentState({ data: xxx });
}

相關文章