手写算法: 搜索插入位置

35. 搜索插入位置

思路

1. 理解题意：给定的是一个排序数组，时间复杂度需要为为 O(log n)，那么可以用二分法

2. 既然是一个已排好序的数组，那么如果当前目标值不在数组中，证明插入进来的元素比当前数组中的值都大，那么直接在数组的最后一个位置插入即可。

var searchInsert = function(nums, target) {
  const len = nums.length;
  let start = 0,
    end = len - 1,
    result = len;

  while (start <= end) {
    const mid = Math.floor((start + end) / 2);
    const pivot = nums[mid];

    if (pivot < target) {
      start = mid + 1;
    } else if (pivot >= target) {
      end = mid - 1;
      result = mid;
    }
  }
  return result;
};

手写题: 实现 React useCallback 原理

作用：缓存函数，优化子组件，防止子组件重复渲染。

为什么这样说呢？我们了解，在进行 setState 时，组件会重新执行 render，那么组件内的函数也会重新渲染，即生成一个新的函数，即使名字都一样，但是内存地址已改变，那么传入子组件中，必然也会重新渲染。

那么想要避免此情况，只重新渲染父组件，不渲染子组件，那么就可以用 useCallback。

useCallback()，传入两个参数，第一个入参为函数，第二个为监听的数组。只有当数组内的数值发生变化时，函数才会重新执行。

useCallback 缓存了函数的内存地址。

搭配使用

类组件需要搭配 PureComponent 一块使用

hook 需要搭配 React.memo()

不然没有效果，这两个都是缓存组件，组件的 props 和 state 没有发生改变时，子组件不会重新渲染。

function _useCallback() {
  // 记录最近一次的函数与依赖项
  let lastFn, lastDeps;
  return function(fn, deps) {
    if (lastDeps) {
      // 筛选依赖项是否发生改变
      const isChange = deps.some((item, i) => {
        console.log(`item: ${item}, i: ${i}`, 111);
        return item !== deps[i];
      });
      if (isChange) {
        lastFn = fn;
        lastDeps = deps;
      }
      return lastFn;
    }
    lastFn = fn;
    lastDeps = deps;
    return lastFn;
  };
}

const useCallback = _useCallback();

demo