为什么要引入hook:为了能够在函数式组件(无状态组件)中使用state以及相关钩子函数
[参考]:(https://zh-hans.reactjs.org/docs/hooks-intro.html)
let {useState} from 'react';
const [count, setCount] = useState(0);
useState类似于state和setState的结合体,定义的是一个数组,
第一个参数代表state中的键,后一个setCount代表修改此键的方法,0代表默认值
let {useEffect} from 'react';
// 相当于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
这里处理业务逻辑,可以在此修改useState定义的值
}
自定义hook
function useFind(){
//名字加上use,更加规范
内部处理业务逻辑
调用
useEffect(()=>{
...
})
}
* [基础 Hook](https://zh-hans.reactjs.org/docs/hooks-reference.html#basic-hooks)
* [`useState`](https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate)
* [`useEffect`](https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect)
* [`useContext`](https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext)
* [额外的 Hook](https://zh-hans.reactjs.org/docs/hooks-reference.html#additional-hooks)
* [`useReducer`](https://zh-hans.reactjs.org/docs/hooks-reference.html#usereducer)
* [`useCallback`](https://zh-hans.reactjs.org/docs/hooks-reference.html#usecallback)
* [`useMemo`](https://zh-hans.reactjs.org/docs/hooks-reference.html#usememo)
* [`useRef`](https://zh-hans.reactjs.org/docs/hooks-reference.html#useref)
* [`useImperativeHandle`](https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle)
* [`useLayoutEffect`](https://zh-hans.reactjs.org/docs/hooks-reference.html#uselayouteffect)
* [`useDebugValue`](https://zh-hans.reactjs.org/docs/hooks-reference.html#usedebugvalue)