【GHS】React Hook 入门使用

编程开发   © 文章版权由 admin 解释,禁止匿名转载

#楼主# 2020-12-30

1、没有比官网说的更好的 HOOK
1. React Hook 官方

2. 用我们自己的话说,它是一个钩子函数,用来处理组件间的状态的一系列方法,暂时理解为一个高阶函数吧,可以替换 class 类的写法,省去生命周期的写法。

3. hook 一直说的副作用到底是啥?

  之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM,统一把这些操作称为“副作用”,或者简称为“作用”。

2、React Hook 可以做什么
对于已经习惯使用class 的一些同学,使用生命周期函数也可以很方便的帮我们处理一些状态,比如render函数渲染页面, compnentDidMount 里调用接口,comnentWillUnmount销毁组件...,熟练使用这些生命周期函数也不是说有问题,但是在某一些事情上,比如在更新状态的时候,需要对比下组件前后的数据,需不需要更新,如componentDidUpdate(prevProps, prevState), 组件销毁的时候,我们是不是还要处理下其他脏活累活等等。上面的多余的操作,React Hook 可以在 hook 函数里面,可以帮我们做这些事。3、React Hook 怎么做(用)
我们继续沿用官网的demo来讲,(官网已经讲的很透彻了)

import React, { useState } from 'react';

function Example() {
// 声明一个新的叫做 “count” 的 state 变量
const [count, setCount] = useState(0);

return (

You clicked {count} times
setCount(count + 1)}>
Click me


);
}

export default Example上面的代码的意思很简单: 定义一个 count = 0 的变量,和一个 setCount 的方法,来修改count 变量。简单的理解 useState就是 count,setCount 执行的一个规则。 最后我们导出这组件,你在需要的地方可以导入这个组件。 这个方法很简单,只是纯粹的做了一个计数器,没有复杂的逻辑,我们加一个逻辑,当count 变化的时候,与之有关联的组件也随变化.

成为第一个回答人

评论

登录后才可发表内容
  • 主题

    106

  • 帖子

    82

  • 关注者

    0

Copyright © 2019 凯特网.   Powered by HYBBS 2.3.4  

Runtime:0.0916s Mem:2047Kb