React Hooks

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了React Hooks脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

入门

无破坏性更改

  • 完全可选的
  • 100% 向后兼容
  • 现在可用

动机

  • 难以复用组件间有状态的逻辑
  • 复杂的组件变得难以理解
  • class 同样困扰着人和机器

Hooks 初体验

???? State Hook

import React, { useState } from 'react'

function Example() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => { setCount(count + 1) }}>click me</button>
    </div>
  )
}

&#x26a1;️ Effect Hook

import React, { useState, useEffect } from 'react'

function Example() {
  const [count, setCount] = useState(0)

  // 与 componentDidMount 和 componentDidUpdate 相似
  useEffect(() => {
    document.title = `clicked ${count} times`

    // 与 componentWillUnmount 相似
    return () => {
      // unsubscribe...
    }
  })

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => { setCount(count + 1) }}>click me</button>
    </div>
  )
}

️ Hooks 的规则

  • 只能在最顶层调用 Hooks
  • 只能在函数式组件内调用 Hooks

???? 构建自定义的 Hooks

自定义 Hooks 更像是一种约定而非功能。一个函数如果以 use 开头,并且调用其它 Hooks,则我们称它为自定义 Hook。

???? 其它 Hooks

  • useContext
  • usereducer

使用 State Hook

调用 useState() 是做什么的? 它声明了一个 "有状态变量"。

useState() 传递 argument 是用来做什么? 传递给 useState() Hook 的唯一 argument 是初始状态。

useState() 返回什么? 它返回一对值:当前状态更新状态的函数

import React, { useState } from 'react'

function Example() {
  const [count, setCount] = userState(0)
  
  return (
      <div>
        <p>{count}</p>
      <button onClick={() => { setCount(count + 1) }}>click me</button>
    </div>
  )
}

使用 Effect Hook

useEffect Hook 允许在函数式组件内执行副作用。

未被清理的 Effects

import React, { useState, useEffect } from 'react'

function Example() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    document.title = `You clicked ${count} times`
  })

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

useEffect 是用来做什么的? 通过使用 useEffect Hook 来告知 React 组件需要在 render 之后做一些事请。

为什么在组件中调用 useEffect 在组件内使用 useEffect 使我们能够在 effect 内访问 state 变量或者任何 PRop

useEffect 在每次 render 之后都运行吗? 是的!默认在初次 render 和之后的每次更新都运行 effect。

被清理的 Effects

import React, { useState, useEffect } from 'react'

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null)

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline)
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    }
  })

  if (isOnline === null) {
    return 'Loading...'
  }

  return isOnline ? 'Online' : 'Offline'
}

为什么从 effect 返回一个函数? 这是 effects 的可选的清理机制。

React 在何时清理 effect? React 在组件卸载之后执行清理工作。

Tip:使用多个 Effects 来分离关注点

将不同功能分割到多个 effects 来分离关注点。

Tip:跳过 Effects 来优化性能

通过给 useEffect 传递一个 deps 数组作为可选的第二个参数,来告诉 React 当 deps 没有改变时跳过 effects。

脚本宝典总结

以上是脚本宝典为你收集整理的React Hooks全部内容,希望文章能够帮你解决React Hooks所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。