react hooks 之 useCallback ,useMemo

1  useCallback 用法如下:

const Page = props => {
  const [value, setValue] = useState('');

  // 使用此方法包装,每次组件更新的时候,此类方法不会再重新创建
  // 达到性能优化的效果 
  // 第二个参数依赖项,当依赖性发生改变的是,该方法会重新创建更新,
 // 内部的value值会随之更新,否则value永远是初始值

  const click = useCallback(() => {
       console.log(value)
    }, [value])  

   return <>123</>  
}

                                                                                                                                                                          

2  useMemo 用法如下:

const Page = props => {
  const [value, setValue] = useState('');
  
  // 此方法类似useCallback,只是她是直接返回了值,不需要单独调用

  const value2 = useMemo(() => {
     return value + 1
  }, [value]);  

   return <>123</>  
}

 

posted @ 2020-06-08 17:44  饭饭大人  阅读(576)  评论(0编辑  收藏  举报