千锋教育web前端高频面试题视频教程，kerwin大话前端面试秘籍（附答案）

hooks的使用：

React中的Hooks是一种新的特性，它们允许我们无需编写类组件（class）的情况下，使用状态、生命周期等其他React特性。（名字都以use开头）

Hooks提供了一系列的钩子函数，包括useState、useEffect、useContext等，这些函数可以在函数组件中直接使用。

1、useState：创建状态

以函数形式创建，接收一个参数作为初始值，返回一个数组，数组中有两个值：第一个为状态，第二个为改变该状态的函数。

2、useEffect：拿到模型中的值去渲染视图，会在浏览器渲染绘制结束后执行

接收两个参数，第一个参数为一个逻辑处理函数；第二个参数可选，为一个数组里面存放的为依赖的参数

注：第二个参数可以不传，但会造成每次渲染都会运行useEffect

3、useRef：返回一个可变的ref对象，可以用来获取元素或组件实例，他们进行一些操作。

注：获取后进行操作与createRef一样，使用inputRef.current形式

4、useMemo：使用来做缓存用的，只有当一个依赖项改变的时候才会发生变化，否则拿缓存的值，就不用在每次渲染的时候再做计算，以到达优化的效果（与vue中的计算属性类似）

传入两个参数，与useEffect相似，第一个参数为一个逻辑处理函数；第二个参数，为一个数组里面存放的为依赖的参数

5、useContext：实现跨级组件传值，在Context.Provider写要传给子孙组件的值，在子孙组件中用useContext接收传递的值。如： const {money,hobby} = useContext(Context)

6、useLayoutEffect：是在 DOM 更新完成后，浏览器绘制之前执行。在react完成DOM更新后马上同步调用的代码，所以会阻塞页面渲染。

7、useCallback：useCallBack与useMemo类似，会在依赖不变的情况下不返回新的函数地址而返回旧的函数地址。不论是否使用useCallBack都无法阻止组件render时函数的重新创建

传入的参数也为两个，第一个参数为一个逻辑处理函数；第二个参数，为一个数组里面存放的为依赖的参数，对传过来的函数进行对比优化，返回值为一个函数。