React 额外的Hook

作者: ticktackkk | 来源:发表于2020-08-19 14:29 被阅读0次

React 额外的Hook
React hook 10种 Hook
学习react hook的总结
React Hook介绍与使用心得
react-hook-form使用
react hook介绍
React Hook
react-hook
react hook入门
React Hooks - 学习笔记

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