Reactが開発した小さなテクニック

1、ifの代わりに短絡表記

//                   
//              ，           
//  !!    boolean   
const flag = 0;
!!flag && 

2、使用es6新特性传递组件props

const {data, type} = this.state;
//     

// es6  

3、es 6 restパラメータ(形式は...変数名)を利用して可変数のpropsを伝達する

//      
const Demo = ({ prop1, prop2, ...restProps }) => (
    
{ restProps.text}
)
//      Demo

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