react-hooks

常用：

useState

const [state, setState] = useState(initialState);

在初始状态，state 与传入的第一个参数 initialState 的值相同。

setState 函数用于更新 state。

eg:

import React, {useState} from 'react'export default function Test() {const [name, setname] = useState('zli')return (
{name} //'zli' {setname('zll')//'zll'}}>changeName   
)}

useEffect

const [name, setname] = useState('zli')
//副作用处理useEffect(()=>{//如果在这里对name做了修改，那么数组中必须指明对应的依赖（即状态）setname(name.toUpperCase());return () => {console.log('在这里组件被销毁')}
},[name])

说明：

（1）第二个参数如果是空数组，那么第一个参数只走一次；

（2）如果 [name] name作为依赖存在；

（3）只要被修改，第一个参数就会走一次；

（4）在这里可以看作是对状态数据的再次加工处理。

useCallback

防止因为组件重新渲染，导致方法再次被创建，起到缓存作用。

  const [name, setname] = useState('zli')const myFn = useCallback(()=>{console.log(name);},[name])

说明：

（1）只有 name 改变，函数才会重新生成一次；

（2）如果传入空数组，函数首次执行生成，之后不变；

（3）如果不传数组，每次都会生成新的函数。

useMemo

对状态数据进行计算，最终返回一个结果。

const getResult = useMemo(()=>list.map(n=>n**2),[list])

useRef

const refContainer = React.useRef(initialValue)

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue)

特点：

• useRef 是一个只能用于函数组件的方法；
• useRef 是除字符串 ref、函数 ref、createRef 之外的第四种获取 ref 的方法；
• useRef 在渲染周期内永远不会变，因此可以用来引用某些数据；
• 修改 ref.current 不会引发组件重新渲染；
• useRef 在每次重新渲染后都保持不变，而 createRef 每次都会发生变化。

自定义hooks:

（1）必须以 “use” 开头；

（2）当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中；

（3）再解释：将复杂代码封装到函数中。