React Hook使用

2020-03-10 本文已影响0人 koala949

要点：

可以在不编写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>
  )
 }

React Hook使用

要点：

动机：

Hook是什么？

使用Hooks的好处：

Hook使用注意点：

常用hook

猜你喜欢

热点阅读