react梳理之Hooks-CFANZ编程社区

Hooks

react的hooks其实就是内置功能性函数的使用,新版本的react有一些内置的函数,可以在函数式组件中去使用,究其根本其实就是应用一些比如于闭包之类的原理,来实现一些原本不支持的能力,常用的hooks有以下这些,我们一个个来看

useState()
useEffect()
useRef()
userContext()
userReducer()
useMemo()
useCallback()
自定义hooks

1. useState

useState的作用
useState()用于为函数组件引入状态,我们知道函数式组件是一个纯函数,在使用的过程中我们是无法拥有组件自己的状态的,但是有了useState之后我们函数式组件就拥有了自己的状态,实际上我们看其原理,有的依然不是自己的状态,只是通过闭包在使用这个钩子的时候在缓存中缓存了状态而已
useState使用

import React, { useState } from "react";

export default function Button() {
  const [buttonText, setButtonText] = useState("Click me, please");

  function handleClick() {
    return setButtonText("Thanks, been clicked!");
  }

  return <button onClick={handleClick}>{buttonText}</button>;
}

2. useEffect

useEffect的作用
useEffect的作用就是副作用,我们都叫做副作用钩子,我们可以用这个钩子来实现类组件中的钩子函数功能,类似于componentDidMount或者说是componentDidUpdate,也可以用作componentWillUnmount,这个useEffect可以实现这几个钩子的全部作用,可以做渲染完毕只执行一遍的钩子,也可以做数据变更时候监控的执行的钩子,也可以做组件卸载时候执行的钩子,useEffect在手,天下我有
useEffect参数
useEffect(() => {},[array])useEffect接收两个参数一个是要执行的逻辑函数,一个是监控的数据,当数据改变时会再次执行此钩子
useEffect使用 ===> componentDidMount

import React, { useState, useEffect } from 'react'
const AsyncPage = () => {
const [loading, setLoading] = useState(true)
  	useEffect(() => {
    	setTimeout(()=> {
      		setLoading(false)
    	},5000)
  	},[])
	return (
		loading ? <p>Loading...</p>: <p>异步请求完成</p>
	)
}

export default AsyncPage

useEffect使用 ===> componentDidUpdate
componentDidUpdate我们都知道是在组件更新之后执行的生命周期钩子函数,我们在使用useEffect的时候,如上方例子,把空数组修改为我们需要监控的数据,当组件更新的时候,数据做出更新的时候,都会重新执行useEffect,也就达到了我们使用componentDidUpdate的目的,当然了也不是完全相同的,例如componentDidUpdate是在首次渲染不会执行的,但是我们useEffect是首次渲染结束和每次监控数据的改变都会执行的
useEffect使用 ===> componentWillUnmount

import React, { useState, useEffect } from 'react'
const AsyncPage = () => {
	const [loading, setLoading] = useState(true)
  	useEffect(() => {
    	setTimeout(()=> {
      		setLoading(false)
    	},5000)
    	return ()=>{
    		console.log('组件被卸载了')
    	}
  	},[])
	return (
		loading ? <p>Loading...</p>: <p>异步请求完成</p>
	)
}

export default AsyncPage

3.useRef

useRef做什么用
useRef其实上就是对标类组件的createRef来出现的一个hooks,但是两者又有所不同,虽然我们都可以船舰ref对象,然后绑定到我们后续想要获取的dom上,从而找到这个dom以及dom中我们想要获取到的数据,但是createRef会在每次执行的时候返回一个新的对象,但是我们的useRef会在整个的周期中返回固定的对象,这也就导致了我们其实可以把useRef当作this使用,因为我们挂载在上边的值,并不会因为组件的刷新而被删除掉

import React, { useRef } from 'react';

const AsyncPage = () => {
	const refContainer = useRef(initialValue);
  	return(
    	<button ref={refContainer} onClick={()=>{
    		console.log(refContainer)
    	}}>
     	 	点我看看
    	</button>
  	);
}
export default AsyncPage

import React, { useRef } from 'react';

const AsyncPage = () => {
	const [loading, setLoading] = useState(true)
	const refContainer = useRef(0);
  	useEffect(() => {
    	setTimeout(()=> {
      		setLoading(false)
    	},5000)
  	},[])
  	return(
  	<div>
  		<p>loading状态是{loading}</p>
    	<button onClick={()=>{
    		refContainer.current += 1
    	}}>
     	 	点点看,点了次数也不会变
    	</button>
    	<p>你点了{refContainer.current}次</p>
    </div>
  	);
}
export default AsyncPage