vue技术栈上手react hook__Vue.js
发布于 22 天前 作者 banyungong 178 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

1. 简介

Hook是React16.8的新增特性,hook必须要在函数组件中使用,但是hook对于使用vue的同学来和vue是很多的共同点的,让我们来看一下hook都有什么特性:

  • 使用usesState维护状态
  • useEffect代替生命周期(componentDidMountcomponentDidUpdatecomponentWillUnmount
  • 其他 Hook

2. 基本语法

对于我们的基本开发,使用usesStateuseEffect基本能完成基础开发,让我们看一下基本的用法:

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

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

  useEffect(() => {
    console.log("初始化");
    return () => {
        console.log("结束");
    }
   }, []);
   
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

2.1. useState

useState用于维护状态,如在vuedata的定义的变量,改变变量的方式必须使用setCount函数,如setCount(count + 1),用于驱动视图,基本用法如下:

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

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

点击按钮时,使用setCountcount进行自增,视图中的count同时会更新。

2.2. useEffect

useEffect中合成了componentDidMountcomponentDidUpdatecomponentWillUnmount三个生命周期,其中基本使用用法如下:

useEffect(() => {
  console.log("初始化");
  return () => {
      console.log("结束");
  }
}, []);

useEffect支持传入两个参数,其中第一个是需要执行的回调函数,第二个是非必传参数,类型是数组。 回调函数支持返回一个函数,当组件卸载时执行。第二个数组参数用于依赖监听,当数组中的变量更新时,触发useEffect的回调函数。

3. 实践应用

3.1. 请求数据

初始化请求数据(useEffect的第二个参数需要传入一个空数组,保证只执行一次):

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

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

  useEffect(() => {
    // 在这里进行数据请求
    axios.get().then(res=>{}).catch(err=>{}).finally(()=>{});
   }, []);
   
  return (
    <></>
  );
}

监听请求数据。有时候我们有这样的需求,当父组件传如的参数,如id,改变时我们就需要请求数据。在vue中我们使用watch来监听id的变化来进行数据请求,在react hook的参考写法如下:

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

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

  // 依赖props.id,当props.id变化时执行回调函数
  useEffect(() => {
    // 在这里进行数据请求
    axios.get().then(res=>{}).catch(err=>{}).finally(()=>{});
   }, [props.id]);
   
  return (
    <></>
  );
}

3.2. 全局资源的开启与关闭

vue中,我们常在mounted这个生命周期进行一些全局资源的开启,如dom的事件绑定,定时器的开启等,同时需要在beforeDestroy中将开启的资源给关闭,在react hook的参考写法如下:

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

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

  useEffect(() => {
    // 开启来定时器
    let timer = setInterval(() => {
    	console.log("执行");
    }, 5000);
    // 返回的函数中清除定时器
    return () => {
        clearImmediate(timer)
    }
}, []);
   
  return (
    <></>
  );
}

上面的例子中,我们使用useEffect的回调函数中开启了定时器(也可以是事件绑定等),然后return的函数中清除了定时器。return的函数将在组件卸载时执行。

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Atdow 原文链接:https://juejin.im/post/6924980060634284045

回到顶部