react最佳实践(基础篇)

以下仅仅是个人意见或者是react实践中的技巧,只针对代码不针对个人

• 无论如何,请考虑好状态应该放在 组件内部的state 或者是 redux 中

• 如果你的变量只是操作逻辑不会 render UI的情况下,请不要放在state中

• es6合理使用 推荐es6使用

//解构赋值 
let { state1,state2, state3 } = this.state;
let { prop1, prop2, porp3 } = this.props;
//字符串模板
 `${name}`  
//默认值处理
function toDo(name = "who", age = 12){ //to do }
//展开运算符
let obj = { name ="name", age = 12 };
toDo(...obj)

• 书写问题

        <Spin
          spinning={props.switcher.atsFetching !== false}   // ???/
        >

• 判断属性是否在对象或者数组中(省去循环的代码)

    if('activeIndex' in props){
        //to do
    }

• 在合适的情况下,使用且必须推荐无状态组件(没有状态没有生命周期只传prop实现)

    // 无状态组件接收的参数必须使用 {} 包裹,它传入的是 父组件的props 
    function Button({text='按钮',color='red'}){
        return (
            <button className={btn btn-${color}}>
                <span>${text}</text>
            </button>
        )
    }

• 类型检查

    //函数的类型检查是propTypes.func
    //布尔类型的propTypes.bool
    be:避开关键词

• 生命周期

    //WillMount会在render之前执行,DidMount则会在render之后执行
    如果在DidMount后又setState则会 re-render
    //在执行reactComponentWillMount的时候进行setState是不会重新re-render的,
    //而是会合并state
    /*
    
    */

!!注意:禁止在shouldComponentUpdate和ComponentWillUpdate中setState,
会导致循环调用直到浏览器耗光了内存

• react绑定this

    /*
        如果绑定this不需要传递参数的情况下可以使用::this.handleClick
        而且项目中要使用 stage-0 的提案
    */
    /* 
        在react中使用DOM原生事情,一定要在组件卸载的时候手动移除事件
        否则很有可能会造成内存泄漏
    */
    /*
        不要将合成事件与原生事件混用,否则达不到你想要的效果
    */

• 不要直接在组件上写样式

    return < input style={{color:'red'}}> //这样每次都会得到新的style对象,造成重新render的性能消耗
    //使用先定义的方式来处理这个问题

• react性能优化方案(在shouldComponentUpdate)

    import React from 'react';
    import { is } from 'immutable';

    class App extends Component {
        shouldComponentUpdate(nextProps,nextState){
            const thisProps = this.props || {};
            const thisState = this.state || {};
    
            if(Object.keys(thisProps).length !== Object.keys(nextProps).length
            || Object.keys(thisState).length !== Object.keys(nextState).length){
                return true
            }
    
            for(const key in nextProps){
                if(nextProps.hasOwnProperty(key) && !is( thisProps[key], nextProps[key])){
                    return true
                }
            }
    
            for(const key in nextState){
                if(nextState.hasOwnProperty(key) && !is( thisState[key], nextState[key])){
                    return true
                }
            }
    
            return false
        }
    } 

• react建议使用的css动画库
  react-smooth react-motion
• SVG线条动画
  vivus
• react中遍历数组或者是对象的时候注意点
  在使用 key 的时候请不要使用自然索引,请使用id

CSS样式

• OOCSS BEM(推荐)
• 不要强行覆写antd或者是二次封装的组件样式
• 不要使用浮动
• scss使用熟练
• 使用语义化标签

持续更新....