1、短路写法代替if

// 通过判断值是否存在来控制元素是否显示// 一般三目运算可以达到此效果，部分可以用短路写法代替// 用!!将其转为boolean避免坑const flag = 0;!!flag && 
    

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

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

3、 利用es6 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 });}