VUE React Angular

React 的Hooks 都有哪些？在那些场景中使用？

1 useState

useState通过在函数组件里调用它来给组件添加一些内部state。

React会在重复渲染时保留这个state

useState会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似class组件的this.setState，但是它不会把新的state和旧的state合并

2 useEffect

useEffect 第一个参数接收一个函数，可以用来做一些副作用比如异步请求，修改外部参数等行为，而第二个参数称之为dependencies，是一个数组，如果数组中的值变化才会触发 执行useEffect 第一个参数中的函数。返回值(如果有)则在组件销毁或者调用函数前调用

• 1.比如第一个 useEffect 中，理解起来就是一旦 count 值发生改变，则修改 documen.title 值；
• 2.而第二个 useEffect 中传递了一个空数组[]，这种情况下只有在组件初始化或销毁的时候才会触发，用来代替 componentDidMount 和 componentWillUnmount，慎用；
• 3.还有另外一个情况，就是不传递第二个参数，也就是useEffect只接收了第一个函数参数，代表不监听任何参数变化。每次渲染DOM之后，都会执行useEffect中的函数

2 useContext

useContext是用来处理多层级传递数据的方式

使用context解决了Provider和Consumer的多层嵌套的问题

3 useReducer

useReducer这个hooks在使用上几乎跟Redux/React-Redux一模一样，唯一缺少的就是无法使用redux提供的中间件

而且跟Redux基本上是一致的，用法也很简单，算是提供一个mini的Redux版本，配合useContext一起使用

4 useCallback

第二个参数传入一个数组，数组中的每一项一旦值或者引用发生改变，useCallback就会重新返回一个新的记忆函数提供给后面渲染

5 useMemo

useMemo的功能和useCallback是相似的，如果你想通过使用useMemo返回一个记忆函数也是完全可以的

唯一的区别是：useCallback不会执行第一个参数函数，而是将它返回给你，而useMemo会执行第一个函数并且将执行结果返回给你，所以在前面的例子中，可以返回handleClick来达到存储函数的目的

所以useCallback常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而useMemo适合经过函数计算得到一个确定的值，比如记忆组件

6 useRef

useRef跟createRef类似，都可以用来生成DOM对象

useRef返回的值传递给组件或者DOM的ref属性，就可以通过ref.current值访问组件或真实的DOM节点，重点是组件也可以访问到的，从而可以对DOM进行一些操作，比如监听事件等等

当然useRef远比你想象中的功能更加强大，useRef的功能有点像类属性，或者说您想要在组件中记录一些值，并且这些值在稍后可以更改

7 useImperativeHandle

通过 useImperativeHandle 用于让父组件获取子组件内的索引

8 useLayoutEffect

使用 useEffect 就可以帮我们处理组件的副作用，但是如果想要同步调用一些副作用，比如对 DOM 的操作，就需要使用 useLayoutEffect，useLayoutEffect 中的副作用会在 DOM 更新之后同步执行。

useEffect和useLayoutEffect有什么区别？

简单来说就是调用时机不同，useLayoutEffect和原来componentDidMount&componentDidUpdate一致，在react完成DOM更新后马上同步调用的代码，会阻塞页面渲染。而useEffect是会在整个页面渲染完才会调用的代码。

在实际使用时如果想避免页面抖动（在useEffect里修改DOM很有可能出现）的话，可以把需要操作DOM的代码放在useLayoutEffect里。关于使用useEffect导致页面抖动，参考git仓库git仓库示例

不过useLayoutEffect在服务端渲染时会出现一个warning，要消除的话得用useEffect代替或者推迟渲染时机。

网站

需要实现的功能——录入车辆信息基本信息

注册页面—注册信息（手机号，姓名，密码，邮箱）

登录页面（邮箱/手机号登陆）

首页

日历（记录发货日期）

数据总览（发货总车辆、发货总吨数，可以查看近一周近一个月或者按不同的工程进行分类）

右侧为功能：具体项目信息——（车辆信息、运输货物信息、工程信息、已结款项和未结款项）

内容编辑：进行删除修改信息（录入车辆的信息可以进行修改、运输货物信息）