代码中出现如下关键字用法，不懂，遂查阅资料

关键字：useMemo ,useCallback,useEffect, useState

得到延伸关键字：函数组件和类组件，故进一步查阅资料得如下：

什么是 React Hooks

Hooks 意思为钩子，与其他编程语言的定义类似，即在 React 代码执行到特定时期时，会自动调用 hooks 中的代码，进而完成相应的功能。使用 React Hooks 可以让函数式组件拥有和 class 组件同样的功能，可拥有 state 及类似的生命周期。

React Hooks 作为新生特性，有以下特点：

可选的。可以在不修改继有代码的前提下，在新的组件里尝试使用 Hooks。
100%向后兼容。没有重大底层逻辑变更。
立即可用。在 16.8 及以后的版本中都可以使用。

React Hooks 作用

React Hooks 支持绝大部分的生命周期，除了 componentDidCatch。另外也为函数式组件提供了状态 (state) 的支持。

React Hooks 另一重要作用是可以让界面表现和逻辑分离，React 组件负责渲染，Hooks 负责数据逻辑的处理，不同的组件还可以复用 Hooks 的代码逻辑。以往的逻辑复用依靠的是渲染属性 (render props) 和`高阶组件· (higher order components) 实现的，而这样的写法会让最终渲染出来的 DOM 树增加许多不必要的中间层，使调试变得复杂，并且降低性能。

与 React Class Component 的区别

在定义 class 类型的组件时，我们通常会把业务逻辑放到几个重要的生命周期函数中，如 componentDidMount，componentDidUpdate, componentWillUnmount。这些业务逻辑会杂糅在某个生命周期函数中，并且在其他生命周期中也会使用到。比如，我们可能在 componentDidMount 中去后台请求数据，注册全局监听事件等，然后又会在 componentWillUnmount 取消对全局事件的监听，做一些其他的清理工作，这样会造成几个缺点：

本应属于一个整体的逻辑分散到了不同的生命周期中，如注册和取消监听事件（无法方便的拿到注册监听事件时返回的 ID）。
不同的逻辑定义到了同一个生命周期函数中，造成一个函数承载了过多功能。
难以进行逻辑的复用，如果两个不同的组件有相似的业务逻辑，则很难拆解逻辑到独立的代码单元中。
使用 React Hooks 则可以解决上述问题。在内置的 React Hooks 中，我们可以使用 useEffect 把生命周期有关的逻辑分散到不同的 effect 中，并且可以方便的进行清理和复用，另外通过自定义的 hooks 则可以把特定业务逻辑抽离出来，以供其他组件复用。Hooks 中还可以包括对 state 的管理，使其管理逻辑也可以复用，而且每个 hooks 的 state 也是隔离的，互不影响。

Hooks 的种类

React Hooks 分为内置的和自定义的两种类型，内置的 hooks 有以下几个：

useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

自定义的 hooks 则是在内置的 hooks 的基础上，定义业务特定的逻辑，以达到逻辑复用、逻辑与表现分离。

useEffect

副作用

对环境的改变即为副作用，如修改 document.title 但我们不一定非要把副作用放在 useEffect 里面实际上叫做 afterRender 更好，每次render后执行

用途

一、作为 componentDidMount 使用，[ ] 作第二个参数
二、作为 componentDidUpdate 使用，可指定依赖
三、作为 componentWillUnmount 使用，通过 return
四、以上三种用途可同时存在

useLayoutEffect

布局副作用

useEffect 在浏览器渲染完成后执行

useLayoutEffect 在浏览器渲染前执行

React Router的使用

yarn add react-router-dom
npm install react-router-dom

Link就像是一个个的路牌，为我们指明组件的位置。Link使用声明式的方式为应用程序提供导航功能，定义的Link最终会被渲染成一个a标签。Link使用to这个属性来指明目标组件的路径，可以直接使用一个字符串，也可以传入一个对象。

import { Link } from 'react-router-dom'
// 字符串参数
<Link to="/query">查询</Link>

// 对象参数
<Link to={{
  pathname: '/query',
  search: '?key=name',
  hash: '#hash',
  state: { fromDashboard: true }
}}>查询</Link>

history.push 这个方法会向history栈里面添加一条新记录，这个时候用户点击浏览器的回退按钮可以回到之前的路径。

history.go 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)

history.replace 跟 history.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

react性能优化方法内存泄漏

react中定时器和dom绑定事件如果未及时清理会造成内存泄漏。

ReactDOM.unmountComponentAtNode.bind方法可以强制卸载组件，

可以在componentWillUnmount方法中进行定时器和事件的卸载。

componentWillUnmount(){  
    this.refs.button.onDoubleClick= null;  //清除dom上绑定的事件
    clearInterval(this.timer);      //清除定时器
}