React hooks解析(useState、useEffect、userReducer、useCallback、useMemo、userContext、useRef)

什么是Hooks?

'Hooks'的单词意思为“钩子”。React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码"钩"进来。而React Hooks 就是我们所说的“钩子”。

常用的钩子

useState()
useEffect()
userReducer()
useCallback()
useMemo()
useContext()
useRef()

一、userState():状态钩子

纯函数组件没有状态,useState()用于为函数组件引入状态。在useState()中,数组第一项为一个变量,指向状态的当前值。类似this.state,第二项是一个函数,用来更新状态,类似setState。

import React, {useState} from 'react'
const AddCount = () => {
  const [ count, setCount ] = useState(0)
  return (
    <div>
      <button onClick={()=>setCount(count++)}>加一</button>
    </>
  )
}
export default AddCount 

二、useEffect():副作用钩子

useEffect()接受两个参数,第一个参数是你要进行的异步操作,第二个参数是一个数组,用来给出Effect的依赖项。只要这个数组发生变化,useEffect()就会执行

useEffect()可以看做 componentDidMountcomponentDidUpdatecomponentWillUnmount 这三个函数的组合。

useEffect(
  () => { 
    const subscription = props.source.subscribe();
    return () => {//相当于ComponentWillUnmount
      subscription.unsubscribe();
    };
  },
  [props.source],//相当于ComponentDidUpdate
);

三、useReducer():Action钩子

我们通过用户在页面中发起action,从而通过reducer方法来改变state,从而实现页面和状态的通信。
const [state, dispatch] = useReducer(reducer, initialState)

它接受reducer函数和状态的初始值作为参数,返回一个数组,其中第一项为当前的状态值,第二项为发送action的dispatch函数。下面我们依然用来实现一个计数器。

const reduer = (state, action) => {
    switch(action) {
        case 'add': return state + 1;
        case 'reduce': return state - 1;
        case 'reset': return 0;
        default:return state;
  }
}

函数组件:

import React,{useReducer} from 'react'
export default function Counter() {
     const [counter, dispatch] = useReducer(reduer, 0);
}
return (
    <div >
          <div>{counter}</div>
          <Button onClick={() => dispatch('add')}>递增</Button>
          <Button onClick={() => dispatch('reduce')}>递减</Button>
          <Button onClick={() => dispatch('reset')}>重置</Button>
    </div>
  );
}

useState是useReducer的一个子集,useState 返回的函数内部封装了一个 dispatch。useReducer( 单个组件中用的少,太重了)

官方的定义:在某些场景下,useReducer 会比 useState 更适用,例如 state 逻辑较复杂且包含多个子值(注意且字),或者下一个 state 依赖于之前的 state 等。

四、useCallback和useMemo

useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调,第二个参数为要依赖的数据

共同作用:仅仅依赖数据发生变化, 才会调用,也就是起到缓存的作用。useCallback缓存函数,useMemo 缓存返回值。

useCallback使用场景

有一个父组件,其中包含子组件,子组件接收一个函数作为props;通常而言,如果父组件更新了,子组件也会执行更新;所有依赖本地状态或props来创建函数,需要使用到缓存函数的地方,都是useCallback的应用场景。

父组件:

import React, { useCallback } from 'react'

function ParentComp () {
  // ...
  const [ name, setName ] = useState('hi~')
  // 每次父组件渲染,返回的是同一个函数引用
  const changeName = useCallback((newName) => setName(newName), [])  
  return (
    <div>
      <button onClick={increment}>点击次数:{count}</button>
      <ChildComp name={name} onClick={changeName}/>
    </div>
  );
}

子组件

import React, { memo } from 'react'

const ChildComp = memo(function ({ name, onClick }) {
  console.log('render child-comp ...')
  return <>
    <div>Child Comp ... {name}</div>
    <button onClick={() => onClick('hello')}>改变 name 值</button>
  </>
})

点击父组件按钮,控制台不会打印子组件被渲染的信息了。

究其原因:useCallback() 起到了缓存的作用,即便父组件渲染了,useCallback() 包裹的函数也不会重新生成,会返回上一次的函数引用。

useMemo

import React, { useCallback } from 'react'

function ParentComp () {
  // ...
  const [ name, setName ] = useState('hi~')
  const [ age, setAge ] = useState(20)
  const changeName = useCallback((newName) => setName(newName), [])
  const info = { name, age }    // 复杂数据类型属性

  return (
    <div>
      <button onClick={increment}>点击次数:{count}</button>
      <ChildComp info={info} onClick={changeName}/>
    </div>
  );
}

父组件渲染,const info = { name, age } 一行会重新生成一个新对象,导致传递给子组件的 info 属性值变化,进而导致子组件重新渲染。

function ParentComp () {
  // ....
  const [ name, setName ] = useState('hi~')
  const [ age, setAge ] = useState(20)
  const changeName = useCallback((newName) => setName(newName), [])
  const info = useMemo(() => ({ name, age }), [name, age])   // 包一层

  return (
    <div>
      <button onClick={increment}>点击次数:{count}</button>
      <ChildComp info={info} onClick={changeName}/>
    </div>
  );
}

点击父组件按钮,控制台中不再打印子组件被渲染的信息了。

 五、useContext

React的useContext应用场景:如果需要在组件A、B之间共享状态,可以使用useContext()。在它们的父组件上使用React的Context API,在组件外部建立一个Context。否则需要使用props一层层传递参数。

Ceshi组件

import React from 'react'
import A from 'A.react';
import B from 'B.react';
const AppContext = React.createContext({})
const Ceshi = () => {
  return (
    <AppContext.Provider value={{name: 'hook测试'}}>
    <A/>
    <B/>
    </AppContext.Provider>
  )
}
export default Ceshi 
export {AppContext} 

A组件

import React,{ useContext } from 'react';
import {AppContext} from 'Ceshi.react';
const A =() => {
    const { name } = useContext(AppContext)
    return (
        <p>A{name}</p>
    )
}
export default A

 

显示:Ahook测试,Bhook测试

六、useRef

只能为类组件定义ref属性,而不能为函数组件定义ref属性。想要在函数式组件中使用Ref,我们必须先了解两个Api,useRefforwardRef

1、返回一个可变的ref对象,该对象只有个current属性,初始值为传入的参数(initialValue)。
2、返回的ref对象在组件的整个生命周期内保持不变
3、当更新current值时并不会re-render,这是与useState不同的地方
4、更新useRef是side effect(副作用),所以一般写在useEffect或event handler里
5、useRef类似于类组件的this
6、每个组件的 ref 只跟组件本身有关,跟其他组件的 ref 没有关系
import React, { useRef } from 'react'
const LikeButton: React.FC = () => {
    let like = useRef(0)
    function handleAlertClick() {
        setTimeout(() => {
            alert(`you clicked on ${like.current}`)
        }, 3000)
    }
    return (
        <>
            <button
                onClick={() => {like.current = like.current + 1}}>{like.current}赞</button>
            <button onClick=handleAlertClick}>Alert</button>
        </>
    )
}
export default LikeButton

useRef与createRef的区别

组件依赖的props以及state状态发生变更触发更新时,createRef每次都会返回个新的引用;而useRef不会随着组件的更新而重新创建。

let refFromCreateRef = createRef()

可以通过useRef传入子组件,调用子组件的方法。

forwardRef: 将ref父类的ref作为参数传入函数式组件中

const FancyButton = React.forwardRef((props, ref) => (  
  <button ref={ref} className="FancyButton">    
    {props.children}
  </button>
));
// 可以直接获取到button的DOM节点
const ref = React.useRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

useImperativeHandle在函数式组件中,用于定义暴露给父组件的ref方法,用来限制子组件对外暴露的信息。

只有useImperativeHandle第二个参数定义的属性跟方法可以在父组件能够获取到。

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
//渲染 <FancyInput ref={inputRef} /> 的父组件
//可以调用 inputRef.current.focus()

 

参考:

https://www.jianshu.com/p/d600f749bb19

https://www.jianshu.com/p/014ee0ebe959

https://blog.csdn.net/u011705725/article/details/115634265

posted @ 2021-06-24 21:27  梁涛999  阅读(1374)  评论(0编辑  收藏  举报