函数式组件--React

函数式组件

函数式组件没有this,没有生命周期,所以不能使用string ref,在16.7之前没有state,所以函数式组件也叫纯渲染组件,或者无状态组件。
本质是一个常规函数,接收一个参数props,并返回一个reactNode。
注意事项:使用函数式组件,应该尽量避免在函数中声明子函数,否则,组件每次更新时都会重新创建这个函数

HOOK

语法:const [state, setState] = useState(initialState)
实则:const [状态,修改该状态的方法] = useState(初始值)

  1. 在一个函数组件中,可以使用useState定义多个状态
  2. useState返回的setState方法不会进行对象合并
  3. useState返回的setState方法同样是一个异步的方法
  4. 在使用hooks时要保证其调用顺序,不能再 if、for、while 等语句中调用 hooks,也不能在子函数中调用。只能在react 函数的最外层调用

useEffect

副作用钩子,用来处理函数组件中的副作用,用来取代生命周期函数
常规处理副作用有以下情况:

  1. 组件挂载完成之后做某事
  2. 组件挂载完成及更新完成做某事
  3. 组件更新完成做某事
  4. 组件即将卸载做某事
useEffect(()=>{//副作用函数
      return ()=>{ // 返回函数
      }
    },[依赖参数])
挂载阶段

从上向下执行函数,如果碰到useEffect就执行,并将useEffect的副作用函数推入到队列中,当组件挂载完成之后,就执行队列中的副作用函数,并将副作用函数的返回函数,推入到一个新的队列中

更新阶段

注意:更新阶段不同于其他阶段,对应的函数是否要执行,取决于依赖参数
从上向下执行函数,如果碰到useEffect就执行,并将useEffect的副作用函数推入到队列中,在组件更新完成之后,找出之前的返回函数队列,依次准备执行,在执行之前判断useEffect的依赖参数,如果依赖参数改变就执行,否则跳过当前项去看下一项,然后再执行副作用队列,执行时同样判断依赖是否变化,来决定其是否执行,如果执行,就重新获取其对应的返回函数

卸载阶段

组件即将卸载,找到其对应的返回函数队列,依次执行

依赖参数的取值情况
  1. 为空:组件的任何更新,该useEffect对应的返回函数和函数都执行
  2. 为空数组:不监听组件的更新
  3. 数组中有具体的依赖:对应的依赖数据有变化的时候才会执行

useRef

const ref = useRef(initialValue);

作用:

  1. 用于关联虚拟DOM的实例
  2. 跨组件的更新阶段进行数据传递
  3. initialValue: ref的初始值
  4. ref:ref 对象
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值