React 中的 HOOKS 和 一些高阶组件概念

首先说说高阶组件~

1. PureComponent 高阶组件

class 组件中的高阶组件，会将旧的 state 或者 props 于新的 state 和 props 进行对比，只有在发生改变的时候，才会对组件进行更新

2. memo 高阶组件

memo 是一个高阶组件，类似于class组件中的purecomponent，会对 props 做一层浅层的比较----如果当前的 props 没有发生改变，那么当前的这个组件就不会更新

 3. WithRouter 高阶组件

把不是通过路由切换过来的组件中，将 react-router-dom 身上的 history ， location ， match 三个对象传入组件的 props 身上

4. connect （redux ）的高阶组件

connect 在组件中获取 state 中的状态和方法，实现主要原理, 就是将需要绑定的props作为一个函数传过来。第一个参数是 state ， 第二个参数是 dispatch 

谈谈 React 中的 HOOKS 概念~

1. useState

返回一个数组，数组的第一个元素是用来存储状态数据的，第二个元素是用来修改第一个元素

2.  useEffect

用来模拟 类组件中的 生命周期钩子函数
如果 useEffect 中只写了一个回调函数，那么这个函数就会在组件更新的时候执行里面的代码

如果 useEffect 中写了一个回调函数 并且 第二个参数传入了一个空数组的话，这个函数就会在组件挂载的时候执行函数  &&&  第二个参数中写入了 useState 第一个元素，就会在这个元素发生改变的时候执行这个函数

如果 useEffect 中写了一个回调函数，并且函数代码体中 return 了一个回调函数，那么这个回调函数中的代码就会在组件卸载期的时候执行，可以在这里去卸载一些定时器等等

3. useContext

useContext用来跨组件传值，前提是使用的createContext创建了一个实例使用它身上的 provider 方法包裹着子组件。比如说父组件给了某个子组件一个状态，，但是这个子组件身上又有另外一个子组件，那么这个子组件想要拿到状态就得使用 useContext 去拿到createContext赋值给一个变量。在去使用这个变量去渲染

4. useMemo （用来做性能优化）

useMemo 会把第一个参数回调函数执行的结果做为 useMemo 的返回值存给变量，只有在第二个参数依赖数据改变，才会执行第一个参数的回调并将返回结果重新计算缓存，如果没有改变就不会执行第一个参数的回调函数，每次只返回上一次的结果，为什么只返回上一次的结果，因为它的缓存机制，改变一次就缓存，返回上一次的结果。

 5. useCallback （用来做性能优化）

当第二个参数的依赖数据改变，就会重新定义第一个参数的回调函数，并将新的函数重新缓存起来，当第二个参数的以来数据没有发生改变，它就不会重新定义第一个参数的回调函数，每次只会返回上一级缓存的函数结果              应用：当父组件传一个函数给子组件，父组件触发了这个函数，子组件也会跟着进行更新。为了避免不必要的子组件更新，这个时候就可以使用 useCallback 缓存该函数，实现性能的优化。

 

时小记，终有成。