Hooks

Hooks是 React v16.8 的新特性，可以在不使用类组件的情况下，使用 state 以及其他的React特性；

• Hooks是完全可选的，无需重写任何已有代码就可以在一些组件中尝试Hook
• 于React v16.8发布，100%向后兼容，Hooks不包含任何破坏性改动.
• React也没有计划移除class类组件，而且Hooks不会影响对React的理解，它为已知的React概念提供了更直接的API

Hooks解决的问题
1. 函数式组件不能使用state：函数式组件比类组件更简洁好用，而Hooks让它更加丰富强大；
2. 副作用问题：诸如数据获取、订阅、定时执行任务、手动修改ReactDOM这些行为都可以称为副作用；而Hooks的出现可以使用 useEffect 来处理这些副作用；
3. 有状态的逻辑重用组件
4. 复杂的状态管理：之前通常使用 redux、dva、mobx 这些第三方状态管理器来管理复杂的状态，而Hooks可以使用 useReducer、useContext 配合实现复杂的状态管理；
5. 开发效率和质量问题：函数式组件比类组件简洁，效率高，性能也好。

useState

useState：组件状态管理的钩子

import { useState } from 'react'
const [state, setState] = useState(initState)

• state：管理组件的状态；
• setState：更新state的方法，方法名不可更改！
• initState：初始的state，可以是任意的数据类型(只在初次渲染时有效，二次渲染时会被忽略)，也可以是回调函数，但函数必须有返回值。

1. 函数式组件实现计数器

   import { useState } from 'react'
   export default function App() {
       const [count, setCount] = useState(0)  // 初始值0
       return (
           
   
               
   点击了{ count }次
               setCount(count+1)}>点击
           
       ) 
   }
   

2. useState让函数式组件具备了管理状态的能力，不再是一个无状态组件；与class的setState类似，当向useState更新状态的方法setCount传递一个函数时，此函数会接收到上一次的状态：setCount(prevCount => prevCount + 1)
   但与class的setState不同的是，如果状态值是一个对象，useState更新状态的方法是不会合并更新对象的，可以结合展开运算符来达到合并更新对象的效果：

   setState(prevState => {
       return { ...prevState, ...updateValues };
   });
   

3. useState当然可以多次调用，从而定义多个状态值；但不管调用多少次，相互之间都是独立的，不会相互污染。这就是为什么React否掉了Mixins，因为Mixins机制让多个Mixins共享一个对象的数据空间，这样就很难保证不同Mixins依赖的状态不发生冲突；

   function App() {
       const [age, setAge] = useState(42);
       const [fruit, setFruit] = useState('banana');
       const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
   }
   

4. React又是如何保证多个useState的相互独立呢，定义时并没有告诉React这些值的key，React如何保证这三个useState能准确找到它对应的state呢 ---> 根据useState出现的顺序！

   第一次渲染
       useState(42);  //将age初始化为42
       useState('banana');  //将fruit初始化为banana
       useState([{ text: 'Learn Hooks' }]); //...
   第二次渲染
       useState(42);  //读取状态变量age的值（这时候传的参数42直接被忽略）
       useState('banana');  //读取状态变量fruit的值（这时候传的参数banana直接被忽略）
       useState([{ text: 'Learn Hooks' }]); //...
   

   加入条件控制语句

        let showFruit = true;
        function App() {
            const [age, setAge] = useState(42);
            if(showFruit) {
                const [fruit, setFruit] = useState('banana');
                showFruit = false;
            }
            const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
        }
   

   这样一来，首次渲染的初始化过程是不变的，但第二次渲染就有所不同了

       第二次渲染
           useState(42);  //读取状态变量age的值（这时候传的参数42直接被忽略）
           // useState('banana');
           useState([{ text: 'Learn Hooks' }]);  //读取到的却是状态变量fruit的值，导致报错
   

   鉴于此，React规定：
   • Hooks必须写在函数的最外层，不能在循环语句、条件判断、子函数中调用；
   • 只能在React的函数式组件、自定义Hooks中调用Hooks，不能在其他JavaScript函数中调用。

useEffect

useEffect(callback, array)：副作用处理的钩子；它也是componentDidMount()、componentDidUpdate()、componentWillUnmount()、这几个生命周期方法的统一，一个顶三个！React 会等待浏览器完成画面渲染之后才会延迟调用 useEffect，而生命周期钩子是同步执行的

• callback 回调函数，作用是处理副作用的逻辑，可以返回一个函数，用作清理副作用；

  import { useEffect } from 'react'
  useEffect(() => {
      ......//副作用处理
      return () => {
          ......//清理副作用的清除函数
      }
  }, [])
  

  为防止内存泄漏，清除函数会在组件卸载前执行；如果组件多次渲染，则在执行下一个 effect 之前，上一个 effect 就已被清除；
• array 可选数组，用于控制useEffect的执行； 省略时，每次渲染都会执行； 空数组时，只会在组件挂载/卸载时执行一次，类似componentDidMount、componentWillUnmount； 非空数组时，会在数组元素发生改变后执行，且这个变化的比较是浅比较。
  提供第二个参数时，相当于告诉React 该组件不依赖于state/props 的变化，只依赖第二个参数的变化。

  function App() {
      const [count, setCount] = useState(0)  // 初始值0
      useEffect(()=>{
          console.log('1')  // 初次渲染时执行一次，之后每次 count 变化都执行
          return () => {
              console.log('2')  // 初次渲染时不执行，之后每次 count 变化都最先执行
          }
      }, [count])
      return (
  
           
  点击了{ count }次
            setCount(preCount => preCount+1)}>点击
      
  ) 
  }
  // 初次渲染：1
  // 点击更新count：2 1
  

  父组件也可以通过props控制子组件是否执行useEffect

   useEffect(()=>{
       // 注册事件
       const subscription = props.source.subscribe();
       return ()=>{
           // 解绑事件
           subscription.unsubscribe();
       }
   }, [props.source]);
  

如前文所述，Hooks可以反复多次使用，相互独立。所以合理的做法是，给每一个副作用加一个单独的useEffect钩子。这样一来，这些副作用不再全堆在class组件的生命周期钩子里，代码变得更加清晰；

useEffect中定义的副作用函数在执行时不会阻碍浏览器更新视图，即这些函数是异步执行的，而class组件中的生命周期钩子都是同步执行的；异步设计对大多数副作用是合理的，但也有特例，比如有时候需要先根据DOM计算出某个元素的尺寸，然后再去渲染，此时则希望二次渲染是同步发生的，也就是在浏览器真的去绘制界面前发生；
为此，React 为此提供了一个额外的 useLayoutEffect Hook 来处理这类 effect。它和 useEffect 的结构相同，区别只是调用时机不同 -- useLayoutEffect 是同步的。

useContext

useContext()：同一个父组件的后台组件之间的全局数据共享；
useContext() 接收React.createContext()的返回值作为参数，即context对象，并返回最近的context。当最近的context更新时，使用该context的 Hooks 将会重新渲染；

• 创建一个Context文件 InfoContext.js

  // 设置了默认值 defaultValue
  const InfoContext = React.createContext({ name: 'Jerry', age: 18 })
  export default InfoContext
  

• 父组件

  import InfoContext from './context/InfoContext'
  const Person = () => {
      const ctx = useContext(InfoContext)
      return(
          
  
              
          
      )
  }
  export default Person
  

• 某一层的后代组件

  import { useContext } from 'react'
  import InfoContext from './context/InfoContext'
  const AgeCompt = () => {
      const { username } = useContext(InfoContext)
      return 
  {username}
  }
  export default AgeCompt
  

useReducer

useReducer()：useState的一个增强体，用于处理复杂的状态管理，灵感来源于Redux的reducer
useState 内部就是基于 useReducer 实现的，只是对于简单的状态管理，useState()比较好用；

    const [state, setState] = useState(initState)

    const [state, dispatch] = useReducer(reducer, initState, initAction)

• reducer -- 一个函数，根据action状态处理并更新state
• initState --初始化state
• initAction -- useReducer()初次执行时被处理的action，会把第二个参数initState当作参数执行
• state -- 状态值
• dispatch -- 更新state的方法，接收action作为参数，当它被调用时，reducer函数也会被调用，同时根据action去更新state，action是一个描述操作的对象，如 dispatch({type: 'add'})

  import { useReducer } from 'react';
  const initState = { count: 0 };
  const initAction = initState => { count: initState.count + 2 };
  const reducer = (state, action) => {
      switch(action.type) {
          case 'ADD':
              return { count: state.count+1 }
          case 'DEL':
              return { count: state.count-1 }
          case 'RESET':
              return initState
          default:
              return state
      }
  }
  export default function UserCompt() {
      const [state, dispatch] = useReducer(reducer, initState)
      return (
  
          
  {state.count}
          
  
               dispatch({ type: 'ADD', /**可以加一些其他属性*/ })}>增加
               dispatch({ type: 'DEL' })}>减少
               dispatch({ type: 'RESET' })}>重置
          
      
  )
  }
  

useRef

useRef()：创建ref，方便访问操作DOM

    const RefCompt = () => {
        //创建ref
        const inputRef = useRef();
        const getValue = () => {
            //访问ref
            const inpt = inputRef.current;  // input的DOM对象
            inpt.focus();  // 让 input 框获取焦点
            console.log(inpt.value);  // input输入框的值
        };
        //挂载
        return (

            
            获取值
        
);
    }

当然，useRef 不只是能指向 DOM

// 可变的 ref
const App = () => {
    const intervalRef = useRef(0);

    setEffect(() => {
        intervalRef.current = setInterval(() => {}, 300);
        return () => clearInterval(intervalRef.current);
    });
    return 

}

注意：与 useState 不同的是，useRef 会实时更新数据，但不会触发组件的更新！

useMemo

useMemo(callback, array)：性能优化，利用了闭包的特性，通过记忆值来避免在每个渲染上都执行高开销的计算（计算缓存）；适用于复杂的计算场景，如复杂的列表渲染，对象深拷贝...

• callback - 用于处理逻辑的函数
• array - 依赖项，控制useMemo()重新执行的数组，array元素改变时才会重新执行useMemo()
• 返回值是一个记忆值，也是callback的返回值

       import React, { useMemo } from 'react';
       export default function UserCompt() {
           const obj1 = { name: 'Tom', age: 15 }
           const obj2 = { name: 'Jerry', age: 18, sex: '男' }
           //合并obj1、obj2
           const memoValue = useMemo(() => Object.assign(obj1, obj2), [obj1, obj2])
           return (
  
               
  { memoValue.name }
               
  { memoValue.age }
           
  )
       }
  

注意：不能在 useMemo() 中处理副作用逻辑，而是把副作用处理逻辑放在useEffect()

useCallback

useCallback(callback, array)：也是用于性能优化，与useMemo()不同的是，返回值是callback本身；

    // 合并obj1、obj2
    const backValue = useCallback(() => Object.assign(obj1, obj2), [obj1, obj2])

    
{ backValue().name } --- { backValue().age }

当依赖项变化时，返回一个新的函数体callback。

自定义Hooks

1. Hooks本质上就是封装好的勾子函数，在自定义Hooks时，最需要关心的就是性能、重复渲染这些问题；
2. 自定义一个Effect Hooks，把可以复用的逻辑抽离出来，变成一个个可插拔的插销；
3. 当标题变化时，则修改标题、否则不执行的Hooks

   import { useEffect } from 'react'
   
   //封装Hooks，以 use 开头
   const useChangeTitle = (title) => {
       useEffect(() => {
           document.title = title
       }, [title])
   }
   export default (props) => {
       useChangeTitle("自定义修改标题Hooks")
       return 
   测试
   }
   

4. 一个用来判断某个 id 是否在线的Hooks

   import { useState, useEffect } from 'react';
   function useFriendStatus(friendID) {
       const [isOnline, setIsOnline] = useState(null);
       useEffect(()=>{
           //注册监听事件
           ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
           return () => {
             //取消监听事件
             ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
           };
       });
       return isOnline;
   }
   

   在组件中使用此Hooks

   function FriendStatus(props) {
        //调用自定义Hooks
       const isOnline = useFriendStatus(props.friend.id);
       if (isOnline === null) {
          return 'Loading...';
       }
       return isOnline ? 'Online' : 'Offline';
   }
   

Hooks的使用规则

1. 只在顶层调用Hooks
   • Hooks的调用尽量只在顶层作用域
   • 不要在循环、条件或嵌套函数中调用Hook，否则可能会无法确保每次组件渲染时都以相同的顺序调用Hook
2. 只在函数组件调用Hooks：目前只支持函数式组件，未来版本Hooks会扩展到class类组件；
3. React Hooks的应用场景：函数式组件、自定义Hooks