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