react 实现按需更新组件（类vue）

• 通过对象属性的getter来记录那些属性被调用，当只有这些被记录的属性调用时才更新组件。

function useStateWithDeps(state) {
  const stateRef = useRef(state)

  //用于存储哪些属性被订阅
  const stateDependenciesRef = useRef({
    data: false,
    error: false,
    isValidating: false
  })
  //重新渲染组件函数
  const rerender = useState({})[1]
  //自定义setState更新数据方法
  const setState = useCallback((payload) => {
    let shouldRerender = false

    const currentState = stateRef.current
    for (const k in payload) {
      // 是否有变化
      if (currentState[k] !== payload[k]) {
        currentState[k] = payload[k]

        // 是否有被使用
        if (stateDependenciesRef.current[k]) {
          shouldRerender = true
        }
      }
    }
	//当只有使用到的属性更新才会刷新组件
    if (shouldRerender && !unmountedRef.current) {
      rerender({})
    }
  })
  useEffect(() => {
    stateRef.current = state
  })

  return [stateRef, stateDependenciesRef.current, setState]
}

//暴露给外部使用的hook
function useSwr(key, fetcher) {
  //......

  const [stateRef, stateDependencies, setState] = useStateWithDeps({
    data,
    error,
    isValidating
  })
  //通过getter配合ref记录哪些属性被调用
  return {
    get data() {
      stateDependencies.data = true
      return data
    },
    get error() {
      stateDependencies.error = true
      return error
    },
    get isValidating() {
      stateDependencies.isValidating = true
      return isValidating
    }
  }
}