学习笔记

#事件记要

由于最近业务设计到相关知识所以记录下来，算一个小小的学习笔记，勉励自己

React相关

• React shouldComponentUpdate判断

  当父组件更新state时，其下子组件会force update所以有些场景需要优化时，便用到了shouldComponentUpdate

         /**
         * @description React生命周期其中一个，一般用于组件渲染优化
         * @param {Object} nextProps 下一波即将更新接收的属性
         * @param {Object} nextState 下一波即将更新接收的状态
         * @return {Boolean} 返回true时本组件渲染，返回flase时本组件不渲染
         */
        shouldComponentUpdate(nextProps, nextState) {
          const propFlag = this.isObjEqual(nextProps, this.props);
          const stateFlag = this.isObjEqual(nextState, this.state);
          return !propFlag || !stateFlag;  
       }
       
        /**
         * @description 简单的两个对象值的判断
         * @emits date 初次提交 2018-10-18 （忽略了function、array的判断）
         * @param {Object} nextObj 判断的第一个对象 
         * @param {Object} obj 判断的第二个对象
         * @return {Boolean} 返回是否相等的验证
         */
        isObjEqual(nextObj, obj) {
          const objKeys = Object.keys(obj);
          const nobjKeys = Object.keys(nextObj);
          if (objKeys.length !== nobjKeys.length) return false;
          const flag = objKeys.some(key => {
            if (typeof obj[key] === 'object') {
              return !this.isObjEqual(obj[key], nextObj[key])
            }
            if (typeof obj[key] === 'function') {
              return false
            }
            if (obj[key] !== nextObj[key]) return true;
          })
          if (flag) return false;
          return true
        }