React Hooks 编程(一）

最近半年来一直在用React去写一些前端程序，有时候会有一种错觉，用了React框架后，再去用纯HTML + Javascript去写一个页面，就有点不知所措，可能越是高级的东西用多了，越会依赖这种编程模式。

这里就不介绍React是什么了，官网的资料非常详细，也给附上了一个中文版React资料，看起来更加容易点：https://react.docschina.org/

今天会记录下在工作中遇到的印象特别深的两个hooks函数：useCallback 和 useMemo。

关于Hooks，从字面的理解是钩子函数，这是React 自16.8版本后推出的新特性，也不做过多介绍，在这里就是理解为这种特性允许在页面渲染过后能够执行一些特定的逻辑，比如记录日志、从远程服务器拉取数据、发送数据给远程服务器等操作。

而在React 16.8版本前，都是用React类的模式来编写:

componentDidAmount  、componentDidUpdate等函数是常用来编写开发逻辑的方式，这些函数也是嵌入在页面渲染前、中、后等生命周期中执行的方法。

所以Hooks只是提供了另一种编程的方式，好比Java8引入了lamda表达式，所以在Java8之后，遍历数组的时候可以不再用forEach的方式，而是用lamda的方式来做遍历，但其实最终实现的功能效果都是一样的。

下面来重点说说useCallback 和 useMemo这两个函数方法，可以先来看一段小的例子：

const onChange = (e) => {
   console.log(e);
}

const onChange = useCallback((e) => {
console.log(e);
} ,[]);


const onChange = useMemo((e) => {
console.log(e);
} ,[]);

上面的onChange函数分别通过useCallback和 useMemo包装后效果会发生变化。
如果把React中的事件回调函数都理解为是对象，那么onChange这个对象在每次的页面渲染中，都会重新生成一个新的对象；
而经过useCallback包装后，页面每次渲染都是同一个对象onChange，不会生成新对象，这种情况在父子组件传递方法时能够起到优化作用，使得子组件不用每次都跟随父组件的渲染而重刷；
而经过useMemo包装后，页面每次渲染onChange中逻辑都不会再执行了，因为每次执行后的值都已经被缓存起来了，这种情况在针对计算逻辑复杂耗时的情况下，能够起到优化的作用。