4-从零开始学react-hooks相关

keyword

  • useRef
  • 自定义hooks

useRef

  • 有两个作用,一个是存储dom,一个是存储数据
  1. 存储dom
// 获取dom
import React,  {useRef,useEffect} from 'react'

export default function RefPage() {
  const ref = useRef()
  useEffect(() => {
    console.log('查看挂载dom的ref:', ref) // 查看挂载dom的ref: {current: button}
  })
  return (
    <div>
      <button ref={ref} >我是绑定了ref的button</button>
    </div>
  )
}
  1. 存储数据state/props
// 存储props值,并用于对比
import React,  {useState,useRef,useEffect} from 'react'
// 首次挂载打印 1 4
// 每次修改props上的num后打印 5 3
// 卸载child组件打印 2 5
function Child(props) {
  const {num} = props;
  let ref = useRef(num)
  // 监听初始化挂载和卸载的副作用
  useEffect(() => {
    console.log('1',ref)
    return () => {
      console.log('2')
    }
  }, [])

  // 监听挂载/更新(利用ref可以区分开是挂载还是更新),和卸载的副作用
  useEffect(() => {
    if (ref.current !== num) {
      console.log('3',ref) // 更新后执行3 {current: 0}
      // ⚠️给ref重新赋值
      ref.current = num
    } else {
      console.log('4'); 
    }
    return () => {
      console.log('5')
    }
  }, [num])
  
  return (
    <div>num: {num}</div>
  )
}

export default function RefPage() {
  const [show, setShow] = useState(true)
  let [num, setNum] = useState(0)

  return (
    <div>
      {
        show ? <Child num={num}/> : ''
      }
      <button onClick={() => {setShow(false)}}>卸载child</button>
      <button onClick={() => {setNum(++num)}}>修改props的num</button>
    </div>
  )
}

自定义hooks

  • Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

  • hooks使用规则在此重申:1. 必须以use开头 2. 必须在函数或者hooks内调用,类组件不能使用 3. 必须在顶层使用,不可以放到任何条件or语句内

  • 简单使用

// 自定义一个返回屏幕尺寸的hook - hooks.js
const useClient = function() {
  return [{
    w: window.innerWidth,
    h: window.innerHeight
  }]
}
export {useClient}

// 使用 - MyHook.js
import {useClient} from './hooks.js'

export default function MyHook(){
	const [client] = useClient();
	return (
		<div>
			<p>w: {client.w}</p>
			<p>h: {client.h}</p>
		</div>
	)
}

  • 结合useState使用
// 定义hooks - hooks.js
import {useState} from 'react'

const useScrollY = function(){
	const [statey, setStateY] = useState(0);
	const scrollY = window.scrollY;
	const setScrollY = function(y){
		setStateY(y);
		window.scrollTo(0, y)
	}
	
	return [scrollY, setScrollY]
}
export default {useScrollY}


// 使用  MyHook.js
import {useState} from 'react'
import {useScrollY} from './hooks'
// 制造长列表数据
const arr = [...`.`.repeat(100)]

export default function MyHook(){
	const [scrolly, setScrolly] = useScrollY(0)
	useEffect(()=>{
		// scrolly在随着滚动而变化 
		// console.log("scrolly: ", scrolly);
		const fn = () => setScrolly(window.scrollY)
	    window.addEventListener('scroll', fn)
	    return () => {
	      window.removeEventListener('scroll', fn)
	    }
	})
	return (
		<div>
	      展示初始值{scrolly}
	      
	      <button onClick={() => {
	        setScrolly(200)
	      }}>修改scrollY</button>
	      
	      <ul>{
	        arr.map((item, index) => {
	        	return <li key={index}>这是第{item}</li>
	        })
	      }</ul>
	    </div>
   )

}

专栏系列快速链接

1-从零开始学react-认识react&jsx&props&state
2-从零开始学react-深入state,组件通讯,生命周期,受控组件
3-从零开始学react-其他api,初识hook
4-从零开始学react-hooks相关
5-从零开始学react - react-router-dom5
6-从零开始学react - redux相关
7-从零开始学react - 全家桶项目实战

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值