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