学习React之ReactHooks

第一章 Hooks

1. ReactHook简介

1.1 React Hook/Hooks是什么?

(1) Hook是React 16.8.0版本增加的新特性/新语法
(2) 可以让你在函数组件中使用 state 以及其他的 React 特性

1.2 为什么会出现React Hook/Hooks

类组件的缺点：

1. 状态逻辑复用难
   （1）之前复用组件是利用渲染属性和高阶函数，但是都会导致层级冗余
2. 趋向复杂难以维护
   （1）生命周期函数混杂不相干逻辑
   （2）相干逻辑分散在不同生命周期函数
3. this指向困难
   （1）内联函数过度创建新句柄
   （2）类成员函数不能保证this

Hooks的优势

1. 函数组件无this问题
2. 自定义Hooks方便状态复用
3. 副作用关注点分离

2. 常用的Hook

(1). State Hook: React.useState()
(2). Effect Hook: React.useEffect()
(3). Ref Hook: React.useRef()
(4). useContext()
(4). useMemo()
(4). useCallback()

2.1 State Hook — useState

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)  
(3). useState()说明:
        参数: 第一次初始化指定的值在内部作缓存
        返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:
        setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
        setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

2.2. Effect Hook — useEffect

(1). Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
(2). React中的副作用操作:
        发ajax请求数据获取
        设置订阅 / 启动定时器
        手动更改真实DOM
        绑定事件
(3). 语法和说明: 
        useEffect(() => { 
          // 在此可以执行任何带副作用操作
          return () => { // 在组件卸载前执行
            // 在此做一些收尾工作, 比如清除定时器/取消订阅等
          }
        }, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
    
(4). 可以把 useEffect Hook 看做如下三个函数的组合
        componentDidMount()
        componentDidUpdate()
    	componentWillUnmount() 

useEffect(() => {
  document.title = count;
})

//处理绑定解绑事件
useEffect(() => {
  window.addEventListener("resize", onResize, false);
  // 定义解绑逻辑
  // 回调函数在视图被销毁前触发
  // 两种销毁原因：组件卸载和组件重新渲染
  return () => {
    window.removeEventListener("resize", onResize, false);
  }
},[])

2.3. Ref Hook --useRef

1.  Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
2.  语法: const refContainer = useRef()
3.  作用:保存标签对象,功能与React.createRef()一样

2.4 useContext

1. 允许组件跨越层级传递数据
2. 首先创建一个全局上下文，然后定义Provider和Consumer接收
3. const count = useContext(CountContext)
4. 但是不要滥用context,会影响组件的独立性

2.5 useMemo

1. 主要是性能优化的时候使用,可以减少性能浪费
2. meno针对组件渲染是否重新执行，useMemo针对一段函数逻辑是否重复执行；本质都是同样的算法，来判断依赖是否发生改变，进而决定是否触发特定的逻辑
3. 只要找到逻辑依赖哪些变量，就可以避免重复渲染;但是要注意：不要循环依赖

  const double = useMemo(() => {
    return count * 2
  }, [count])
  // count等于3才变化
  const double = useMemo(() => {
    return count * 2
  }, [count === 3])
/*
  第一个参数执行的逻辑； 第二个参数，执行的逻辑依赖的输入变量，组成的数组
  如果不传第二个参数，则useMemo的逻辑每次都运行，传入空数组，就只会运行一次
  和useEffect一样得，但是useEffect执行得是副作用，渲染之后执行
  useMemo是有返回值得，可以直接参与渲染，useMemo是在渲染期间完成得
  只有count发生变化，double才会重新渲染
*/

2.6 useCallback

1. 性能优化相关钩子
2. 如果useMemo返回的是函数，那么就可以直接使用useCallback
3. useMemo(()=> fn)  === useCallback(fn)
4. 使用useCallback不能阻止创建新的函数；但是这个函数不一定会被返回，有可能创建的函数就直接抛弃不用了。useCallback解决的是是传入子组件的函数参数过多变化导致子组件过多渲染的问题
5. 如果useCallback依赖了useState里的数据，setState是可以被省略的
6. memo函数根据属性决定是否渲染组件一样，useMemo可以根据指定的依赖来决定一段函数逻辑是否渲染，从而优化性能；如果useMemo的返回值是函数的话就可以使用useCallback;当依赖变化时，useMemo肯定会被重新执行，但是即使依赖不变化，也不能确定一定不会渲染