React 额外的Hook

useReducer

import React, { useReducer } from 'react';
function UseReducer() {
    const [count, dispatch] = useReducer((state, action) => {
        switch (action) {
            case 'add':
                return state + 1
            case 'sub':
                return state - 1
            default:
                return state
        }
    }, 0)
    return (
        <div className='container'>
            <h1>现在的分数是{count}</h1>
            <button className="btn btn-primary mb-2" onClick={() => { dispatch('add') }}>Increment</button>
            <button className="btn btn-primary mb-2" onClick={() => dispatch('sub')}>Decrement</button>
        </div>
    )
}
export default UseReducer

使用reducer和context实现redux效果

useCallback

• useCallback避免组件重复渲染，提高性能
• 在渲染的过程中避免重复渲染
• 当状态或父组件传来的属性发生变化时，状态改变
• useCallback第一个参数函数
• 第二个参数是数组（可以默认不写），如果第二个参数状态改变 useCallback更新，如果没有第二个参数，默认监听所有状态

以下实现了函数缓存，useEffect我们监听的是num，当我们点击count时,count 值是一直增加的，但是在useEffect里面，我们监听的是num，函数无法调用，但是他一直缓存了我们的count值。最后我们点击changeNum的时候，监听到num状态的改变。callback()返回的值与我们original值相同

import React, { useState, useEffect, useContext, createContext, useMemo, useCallback } from 'react';
const App = () => {
    const [count, Setcount] = useState(0)
    const [num, Setnum] = useState(0)
 let callback = useCallback(() => {
        console.log(count);
        return count
    },[num])
    return (
        <div>
            <h3>original count:{count}</h3>
            <h3>callback:{callback()}</h3>
            <h3>original num:{num}</h3>
            <button onClick={() => { Setcount(count + 1)}}>changeCount</button>
            <button onClick={() => {Setnum(num + 1)}}>changeNum</button>
        </div>
    )
}
export default App;

useMemo

当某个依赖项改变时才重新计算值，这种优化有助于避免在每次渲染时都进行高开销的计算。

useMemo是在渲染期间完成的

• 在渲染的过程中避免重复渲染
• 当状态或父组件传来的属性发生变化时，状态改变
• useMemo第一个参数函数
• 第二个参数是数组（可以默认不写），如果第二个参数状态改变 useMemo更新，如果没有第二个参数，默认监听所有状态
  *可以利用缓存，参考useCallback大致相同，不同点是useCallback返回的是一个函数

import React, { useCallback, useState ,useMemo} from "react";
const Child = () => {
  const [count, setCount] = useState(0);
  const [count1, setCount1] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <div>count:{count}</div>
      <button onClick={handleClick}>add</button>
      <p>count:{count1}</p>
      <button onClick={useMemo(()=>{setCount1(count1+1)},[count])}>add</button>这里打开页面count1
等于1，已经被执行一次，后面count改变，函数自动改变
    </div>
  );
};
export default Child;

UseRef

• 获取dom元素
• 存取变量

import React, {  useRef, useState } from 'react'
function Useref() {
    const inputEl = useRef(null)
    const [num,setNum]=useState({value:''})
    return (
        <div className='container'>
            <h3>作用：获取dom元素和存取变量</h3>
            <h3>先获取input的dom元素，然后把输入的值打印出来</h3>
            <input type="password" id="inputPassword2" ref={inputEl} className="form-control" placeholder="Password"></input>
            <button className="btn btn-primary mb-2" onClick={() => {
                console.log(inputEl.current.value);
                setNum({value:inputEl.current.value})
            }
            }>点击</button>
            <h1>输入的值：{num.value}</h1>
        </div>
    )
}
export default Useref

useMemo和useEffect区别

• useMemo是在组件渲染过程中执行的，而useEffect是在组件挂载以后执行的

useMemo和useCallback区别

• useMemo与useCallback同样是用到了缓存技术，但是useCallback缓存的是一个函数，这个函数可以执行
• 主要区别是 React.useMemo 将调用 fn 函数并返回其结果，而 React.useCallback 将返回 fn 函数而不调用它。