React17 Hooks(二)

1. useRef

useRef Hook就是createRef的Hook版本,只不过比createRef更强大一点。
在函数式组件中createRef和useRef都可以获取DOM元素。
createRef和useRef区别：useRef除了可以用来获取元素以外,还可以用来保存数据。
useState和useRef区别：useRef中保存的数据,除非手动修改,否则永远都不会发生变化。

const pRef = createRef();
const homeRef = createRef();

const pRef = useRef();
const homeRef = useRef();

console.log(pRef.current);
console.log(homeRef.current);

const [numState,setNumState] = useState(100);
const ageRef = useRef(numState)  
useEffect(() =>{
    ageRef.current = numState
},[numState]);

{/* useState和useRef的区别 */}
<p>上一次的值：{numState}</p>
<p>当前的值：{ageRef.current}</p>
<button onClick={() =>{setNumState(numState+1)}}>修改数据</button>

2. useImperativeHandle

useImperativeHandle Hook在使用 ref 时自定义暴露给父组件的实例值。
useImperativeHandle接受两个参数：
    第一个：外界传递过来的 ref
    第二个：回调函数
    
// jsx文件    
import React, { forwardRef, useImperativeHandle, useRef } from 'react';

function Child(props,childRef) {
    /**
     * 接受两个参数：
     *  第一个：外界传递过来的Ref
     *  第二个：回调函数
     */
    useImperativeHandle(childRef,() =>{
        return {
            myFocus: () =>{
                inpRef.current.focus();
            }
        }
    })
    const inpRef = useRef();
    return (
        <div>
            <p>Child组件</p>
            <input ref={inpRef} type="text" placeholder='请输入内容'/>
        </div>
    )
}

const ChildForWordRef = forwardRef(Child);

function UseImperativeHandle() {
  const childRef = useRef(); 
  // 获取函数式组件DOM方式 
  function btnClick() {
    console.log(childRef);
    console.log(childRef.current);
    // childRef.current.focus();
    childRef.current.myFocus();
  }
  return (
      <div>
          <ChildForWordRef ref={childRef}/>
          <button onClick={() =>{btnClick()}}>获取</button>
      </div>
  )
}


export default UseImperativeHandle        
    

3. useLayoutEffect

4. 自定义Hook

通过自定义Hook,可以将其它Hook的代码进行复用。
只要在函数名称前面加上use,那么就表示这个函数是一个自定义Hook,就表示可以在这个函数中使用其它的Hook。
在企业开发中,需要抽取代码并且抽取的代码中用到了其它Hook,那么就必须把这些代码抽取到自定义Hook中。