React-Hook中useEffect的Hook的使用

React-Hook中useEffect的Hook的使用

一般上来就直接给链接,我鼓励直接看文档:

https://reactjs.org/docs/hooks-effect.html

https://zh-hans.reactjs.org/docs/hooks-effect.html

Hook使用规则:
1. 只能在 函数 最外层调用Hook, 不要在循环、条件判断、或者子函数中调用
2. 只能在React的函数组件中调用Hook、不要在其他javascript函数中调用
(还有在自定义的Hook中可以调用)

在react Hook中我们已经使用过了state,但是如果全部使用react-hook就会有一个问题?就是class这种声明组件的方式可以使用生命周期,但是在Hook使用中怎样使用其他操作呢?

在react中就是使用Effect来使用生命周期,那Effect指的是哪个生命周期呢?

你可以看做useEffectHook 看做componentDidMountcomponentDidUpdatecomponentWillUnmount这三个函数的组合。

我们在使用怎应该如何使用呢?看下面简单的例子(来源于官网)

import React, { Fragment, useState, useEffect } from 'react'
import { Button } from 'antd'

const HookEffect = () => {
  const [count, setCount] = useState(0)

  // 相当于componentDidMount 和 componentDidUpdate
  // 如果需要使用componentWillUnmount则需要在内部return 一个函数该函数可以实现
  useEffect(() => {
    document.title = `You clicked ${count} times`
  })

  return (<Fragment>
    <h2>You Clicked {count} times</h2>
    <Button onClick={() => setCount(addcount(count))}>点击增加</Button>
  </Fragment>)
  function addcount (count) {
    count += 1
    return count
  }
}

export default HookEffect

以上代码就是最简单的effect的使用,但是这还不能满足我们的使用

我们需要使用effect进行优化,因为在项目开发中我们需要count这个变量在更新的时候再进行重新渲染,不需要无效的更新

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

上面这样的写法就可以避免无效的渲染,(之后我们会写一个例子,表述这个怎样避免)

那以上就基本的effet的使用,现在我们就要说怎样在effect中实现和class声明方式中的componentWillUnmount这个效果

就是在effect这个函数中return 一个函数就可以实现componentWillUnmount这个功能,就像这样

React-Hook中useEffect的Hook的使用

其实这个例子我们并不能看出来这个这个具体怎么使用,后面我们会写一个小例子综合使用一下useSate和useEffect

focusdroid:ReactHook综合使用小例子(useState、useEffect)​zhuanlan.zhihu.com

原文出处:知乎【focusdroid】

原文链接:https://zhuanlan.zhihu.com/p/101982906

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论