react-Hook（小记）

Hook

useState

react函数组件中定义数据进行渲染，如果数据发生改变而view视图模型是不会发生改变的，这时候就需要定义useState

const [data,setData]=useState(“定义初始值”)
//setData 用于改变data 数据的方法

useState中定义初始值这个值可以是 对象 是数组，或者函数，基本数据类型。

useEeffect

函数组件中没有组件生命周期的概念，但可以用函数组件提供的useeffect方法，来实现简单的生命周期中的操作。
useeffect方法提供了两个参数，第一个参数类型是以个函数 function（），第二个参数是一个数组。

在开发中使用useeffect，只写第一个参数function（），可以实现类似于类组件的componentdidmount（），和componentdidunmount（），挂载前和组件销毁前的两个阶段

useEffect(()=>{
 let timer=setTimeout(()=>{
 console.log(“五秒后的延迟输出”)
},5000)
//每次当组件渲染前就会执行定时器
//相当于componentdidmount（）组件挂载前
return （
  cleanTimeout(timer)
//在离开组件时执行销毁定时器的操作（由于定时器不会自动清除，需要手动清除，不然会一直执行）
//相当于componentdidUnmout() 离开组件前
）
})

useImperativeHandle

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用。

ref：定义 current 对象的 ref createHandle：一个函数，返回值是一个对象，即这个 ref 的 current
对象 [deps]：即依赖列表，当监听的依赖发生变化，useImperativeHandle 才会重新将子组件的实例属性输出到父组件
ref 的 current 属性上，如果为空数组，则不会重新输出。

import React, { useCallback, useRef } from 'react';
import ReactDOM from 'react-dom';

// 实现 ref 的转发
const FancyButton = React.forwardRef((props, ref) => (
  <div>
    <input ref={ref} type="text" />
    <button>{props.children}</button>
  </div>
));

// 父组件中使用子组件的 ref
function App() {
  const ref = useRef();
  const handleClick = useCallback(() => ref.current.focus(), [ ref ]);

  return (
    <div>
      <FancyButton ref={ref}>Click Me</FancyButton>
      <button onClick={handleClick}>获取焦点</button>
    </div>
  )
}

ReactDOM.render(<App />, root);

useImperativeHandle使用

在介绍 useImperativeHandle 之前一定要清楚 React 关于 ref 转发（也叫透传）的知识点，是使用 React.forwardRef 方法实现的，该方法返回一个组件，参数为函数（props callback，并不是函数组件），函数的第一个参数为父组件传递的 props，第二给参数为父组件传递的 ref，其目的就是希望可以在封装组件时，外层组件可以通过 ref 直接控制内层组件或元素的行为。

import React, { useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';

const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} type="text" />
});

const App = props => {
  const fancyInputRef = useRef();

  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      <button
        onClick={() => fancyInputRef.current.focus()}
      >父组件调用子组件的 focus</button>
    </div>
  )
}

ReactDOM.render(<App />, root);