要点：
- 可以在不编写class的情况下使用 state 以及其他react特性。
- Hook没有破坏性改动， 完全是可选的，且向后兼容。
- 主要是为了解决逻辑复用的问题。
- 鼓励开发者将业务通用逻辑封装成React Hook 而不是工具函数。
动机：
- 在hook出现之前，React 并没有提供一种很好的将可复用行为‘附加’到组件的途径（比如连接store）,如果想复用逻辑，只能通过render props 或HOC 的形式，但是这样会让组件的结构变得复杂，同时组件嵌套也太多，造成‘嵌套地狱’（比如很多的Provider 和Consumer）
Hook是什么？
- Hook实际上是一些函数，这些函数与React生成的Fiber节点相关联。
- Hook实际上是利用了闭包，用闭包保存变量，并且在合适的时机触发fiber更新或者执行副作用。
- Hook依赖于React特定的上下文，在React之外使用Hook 不会有任何效果。
使用Hooks的好处：
- 如果业务逻辑变更，需要在函数式组件中使用生命周期和状态， 就不需要再把函数式组件转化为类组件，扩大函数组件的应用范围。
- 易于提取可复用逻辑，是组件更简单。
Hook使用注意点：
- 不要在条件语句中使用
- 不要在循环中使用
- useEffect 接受的函数返回值只能是函数或者undefined.
常用hook
- useState()
- 在组件中保存变量，在设置变量时会触发组件的更新（如果有多个变量，是否会触发多次更新）。
- 接收的参数可以是值或者函数，如果是函数，在组件挂载时执行
- setState会将这一次的变量和上一次的变量进行比较，如果是同一个，便会跳过此次执行， 不会触发更新。
- useEffect()
- 在react的生命周期里执行一些副作用(除了状态相关的逻辑，比如网络请求，监听事件，查找 dom)，接收两个参数，第一个参数是函数，第二个参数为依赖数组，数组里的值发生变化便会触发useEffect，如果数组为空,默认是在组件的挂载和销毁时执行。第一个参数可返回一个函数，在组件卸载时执行。
-
useContext()
-
useMemo()
const handleClick = useMemo(() => {},[])
- 同useCallback()用法。
- useMemo()可返回函数或者返回值，处理计算结果的的缓存或引入组件，防止重复挂载。
- 第二个参数：不传数组，每次更新都会重新计算；传入空数组，只会计算一次；传入依赖对应的值，当对应的值发生变化时，才会重新计算(可以依赖另外一个 useMemo 返回的值)
// useMemo示例
function Child({ count }){
return <p>当前传递的count为：{count}</p>
}
export default function HookDemo {
const [count1, setCount1] = useState(0)
const [count2, setCount2] = useState(10)
const child = useMemo(() => {
message.info('重新生成child组件')
return <Child count={count1} />
},[count1])
return <div>{child}</div>
}
- useCallback()
const handleClick = useCallback(() => {callback},[])
- 存储参数中使用的回调，当依赖数组发生变化时，该回调才会重新创建。
- 可以说是 useMemo 的语法糖，能用 useCallback 实现的，都可以使用 useMemo, 在 react 中我们经常面临一个子组件渲染优化的问题，尤其是在向子组件传递函数props时，每次 render 都会创建新函数，导致子组件不必要的渲染，浪费性能，这个时候，就是 useCallback 的用武之地了，useCallback 可以保证，无论 render 多少次，我们的函数都是同一个函数，减小不断创建的开销
- useRef()
- 一般用取dom引用和组件的值。
- 在函数组件中的一个全局变量，不会因为重复 render 重复申明， 类似于类组件的 this.xxx
- 返回一个可变的ref对象，其.current属性被初始化为传入的参数(initialValue)。返回的ref对象在组件的整个生命周期内保持不变。
forwardRef: 应用父组件的ref实例，成为子组件的一个参数，可以引用父组件的ref绑定到子组件自身的节点上。
- useImperativeHandle()
- 第一个参数接收一个通过 forwardRef 引用父组件的ref实例，第二个参数为回调函数，返回一个对象，对象里面存储需要（按需）暴露给父组件的属性或方法。
官方建议useImperativeHandle和forwardRef同时使用，减少暴露给父组件的属性，避免使用ref这样的命令式代码。
举例：
function Chindren (props, ref) {
const childRef = useRef()
const introduce = useCallback (() => {
console.log('this is my introduction')
}, [])
useImperativeHandle(ref, () => ({
introduce: () => {
introduce()
}
}));
return (
<div ref={childRef }> { props.count }</div>
)
}
const ChildrenComp= forwardRef(Chindren )
function App () {
const [ count, setCount ] = useState(0)
const parentRef = useRef(null)
const onClick = useCallback (() => {
setCount(count => count + 1)
parentRef.current.introduce()
}, [])
return (
<div>
点击次数: { count }
<ChildrenComp ref={parentRef } count={count}></ChildrenComp>
<button onClick={onClick}>点我</button>
</div>
)
}
8.自定义Hook
- 基本使用：
// 编写自己的Hook
function useCounter(initialValue){
const [count, changeCount] = useState(initialValue)
// 减少
const decrease = () => { changeCount(count - 1) }
// 增加
const increase = () => { changeCount(count + 1) }
// 重置
const resetCounter = () => { changeCount(0)}
return [count, {decrease, increase, resetCounter}]
}
export default function myHookView () {
const [count, controlCount] = useCounter(10)
return (
<div>
<Button onClick={ controlCount.decrease }>减少</button>
</div>
)
}
- 返回DOM的钩子
// modal框示例
function useModal(){
const [visible, setVisible] = useState(false)
const toggleModalVisible = () => { changeVisible(!visible)}
return [
(<Modal visible={visible} onOk={toggleModalVisible(visible)} onCancel={toggleModalVisible}>弹窗内容</Modal>), toggleModalVisible]
}
export default function HookDemo () {
const [modal, toggleModal] = useModal()
return (
<div>
{modal}
<Button onClick={toggleModal}>打开弹窗</button>
</div>
)
}
网友评论