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>
  )
}

2. 存储数据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 - 全家桶项目实战