Hooks-useRef

useRef

1. 说明

• useRef 返回一个可变的 ref 对象，返回的 ref 对象在组件的整个生命周期内保持不变。
• 用途 :
  • 绑定DOM节点，或者React元素
  • 保持可变变量

2. 语法

2.1 语法格式

// 创建ref对象
const myRef = useRef()

2.2 语法说明

import { useRef } from 'react' // 引入

// 创建ref对象
const myRef = useRef()

// 获取
myRef.current

3. 使用

3.1 用途1- 保持可变变量

// 创建 ref 对象
const myRef = useRef(10)  // 参数: 初始值

// 点击按钮 赋值   
<button onClick={ () => console.log('ref值', myRef.current ++ )  }></button>

3.2 用途2- 绑定DOM节点

// 创建 ref 对象
 const iptRef = useRef()

// 绑定
<input ref={iptRef} type="text" />

// 获取值
console.log('iptRef', iptRef.current.value)

3.3 useRef 用在定时器上

• 报警告

let timer;  # 报警告  => 使用 useRef

useEffect(() => {
  timer = setInterval(() => {
    console.log('定时器')
  }, 1000)

  return () => {
    console.log('卸载')
    clearInterval(timer)
  }
}, [])

• 使用 useRef 用在定时器timerId 保存变量

// 创建 timerRef
const timerRef = useRef() 

useEffect(() => {
  // 存值
  timerRef.current = setInterval(() => {
    console.log('定时器')
  }, 1000)

  return () => {
    console.log('卸载')
    // 清除
    clearInterval(timerRef.current)
  }
}, [])

4. Demo - 动画案例

• 结构和样式

//结构
const Child = () => {
  // 点击背景
  const clickHandler = () => {}

  return (
    <div className="ref_container" onClick={clickHandler}>
      <div className="ref_el"></div>
    </div>
  )
}
// 样式
.ref_container {
  height: 660px;
  width: 375px;
  background: pink;
  border-top: 1px solid pink;
}
.ref_container .ref_el {
  background: red;
  width: 50px;
  height: 50px;
  margin-top: 100px;
}

• 通过 ref 获取元素

 const element = useRef();  // 创建 ref
 
 <div className="ref_el" ref={element} />     // 绑定ref元素

• 创建第一个动画 :

import anime from 'animejs';

// 第一个动画
function ml_animate01() {
  if (element) {
    anime({
      targets: element.current,
      translateX: 300,
      backgroundColor: '#ff8822',
      borderRadius: ['0%', '50%'],
      complete: () => {}
    })
  }
}

// 点击背景
const clickHandler = () => {
  ml_animate01()
}

• 创建第二个动画

// 第一个动画 : 移动到右侧
function ml_animate01() {
   complete: () => {
     // 第一个动画完了 执行第二个动画
     ml_animate02()
   }
}
// 第二个动画 : 返回原点
function ml_animate02() {
  if (element) {
    anime({
      targets: element.current,
      translateX: 0,
      backgroundColor: '#f00',
      borderRadius: ['50%', '0%'],
      complete: () => {}
    })
  }
}

• 配合 useStat 和 useEffect 切换动画

// 是否开始动画    true-开始动画  false-结束动画
const [isAnimate1, setAnimate1] = useState(false)
const [isAnimate2, setAnimate2] = useState(false)

useEffect(() => {
  isAnimate1 && ml_animate01()
}, [isAnimate1])

useEffect(() => {
  isAnimate2 && ml_animate02()
}, [isAnimate2])

// 动画1
function ml_animate01() {
  ...
  complete: () => {
    setAnimate1(false) // 第一个动画结束
    setAnimate2(true)  // 第二个动画开始
  }
}
// 动画2
function ml_animate02() {
  ...  
  complete: () => {
    setAnimate2(false) // 第二个动画结束
  }
}

// 点击背景
const clickHandler = () => {
  setAnimate1(true) // 第一个动画开始
}