React之Memo & 如何对版本号进行排序

本文已参与「 新人创作礼 」活动，一起开启掘金创作之路

最近还是翻这之前的yuque的笔记。看到Memo，而且我现在的项目中也有对Memo应用。我就顺便讲下。不过关于React的性能优化，很多已经过时了。

例如：事件合成机制，15，,16，17的貌似都不一样。以及虚拟DOM的解析规则，当然17，18我还没有开始阅读其中的源码，我就不展开讲 了。

其实React在16.6的版本出了， 出了react.memo()。他的伟岸一下子就放大了。他的左右也只是在之前的类函数变更为纯函数换了一种写法而已。

你也可以认为React.memo()是一个高阶函数，它与 React.PureComponent类似，但是一个函数组件而非一个类。

既然是函数他就可以进行逻辑校验 & 逻辑。

如果说他跟类函数的生命周期shouldComponentUpdate() 确实有着惊人的相似。

import React from "react";
function Child({seconds}){
    console.log('I am rendering');
    return (
        <div>I am update every {seconds} seconds</div>
    )
};
function areEqual(prevProps, nextProps) {
    if(prevProps.seconds===nextProps.seconds){
        return true
    }else {
        return false
    }
}
export default React.memo(Child,areEqual)

这个areEqual确实能有有效的对纯函数做一个管理。当然areEqual是一个缺省方法，如果去掉那就跟PureComponent一模一样了。

可能在Hook函数出现后，你们会说useMemo也是可以的。

这个其实也是异曲同工之妙。

说到useMemo, 你就会想到useMemo和useEffect、useState、甚至useCallback。

import React, { useMemo } from 'react';
function Child({seconds}){
    console.log('I am rendering');
    return (
        <div>I am update every {seconds} seconds</div>
    )
};
export default function App (props) {
  const [seconds, setSeconds] = useState({});
  return useMemo( Child , [seconds] ); //第二个参数是缺省参数，不传只要有state的变化都会执行。
};

但是说实在我还是偏好 react.memo。

最后出一个题目就是如何对版本号进行排序。这个题我曾经做过。

let versions = ['4.1', '4.7.1', '4.8', '4.8.0', '4.10', '5'];
function rule (str1, str2) {
  var arr1 = str1.split('.'),   //去除'.'，将剩下的数字转换为数组
      arr2 = str2.split('.'),
      minLen = Math.min(arr1.length, arr2.length),   //取出两个数组中的最小程度
      maxLen = Math.max(arr1.length, arr2.length);   //最大长度
  //以最短的数组为基础进行遍历
  for(let i=0; i<minLen; i++) {
    //这里需要转换后才进行比较，否则会出现'10'<'7'的情况
    if(parseInt(arr1[i]) > parseInt(arr2[i])) {  
      return 1;  //返回一个大于0的数，表示前者的index比后者的index大
    } else if(parseInt(arr1[i]) < parseInt(arr2[i])) {
      return -1;  //返回一个小于0的数，表示前者的index比后者的index小
    } 
    //因为不只进行一次计较，所以这里不对相等的两个数进行处理，否则有可能第一次比较就返回，不符合要求
    //这个是为了区分'4.8'和'4.8.0'的情况
    //在前面的比较都相同的情况下，则比较长度
    //位数多的index大
    if (i+1 == minLen){  
      if(arr1.length > arr2.length) {
        return 1;
      } else {
        return -1;
      }
    }
  }
}
versions.sort(rule);

这是一个升序，我个人看这个额方法其实未必最优。明天有点累了不想写了，明天有时间，我用新方法实现一遍。而且解决这种版本的问题有很多方法。大家也可以去尝试下。