react中hook基本使用

转载

mob604756fc093d 2021-07-19 11:20:00

文章标签 生命周期初始化函数对象自定义循环语句 文章分类 代码人生

react中hook使用

react中什么是hook

它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
hook的主要作用是为了让组件内的逻辑更加清晰，并且可以通过自定义hook来达到复用逻辑。
hook只能使用在函数组件中，class组件不支持，所有hook默认约定名称用use开头。

hook基本使用（useState,useEffect）

useState作用

创建初始化值，代替constructor中的this.state；
使用是根据第一个参数，修改根据第二个参数

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

const HookDemo =  (props) =>{
  const [number, setNumber] = useState(1);

  useEffect(()=>{
    setNumber(3)
    console.log('初始化打印,number发生改变');
  },[])

  return (
    <div>{number}</div>
  )

}

export default HookDemo;

useEffcct使用

对应组件生命周期中的Mount阶段和Update阶段。
useEffcct中的两个参数，

副作用函数，副作用函数还可以返回一个函数对象，这个函数对象用来清除副作用，不用清除副作用则不用返回。对应class生命周期中的卸载componentWillUnmount，更新componentWillUpdate。
数组（可选），里面传入副作用函数中使用到的数据变量，并且这个变量得具有一定变化的特性，第二个参数主要用于优化，防止进行重复渲染

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

const HookDemo =  (props) =>{
  const [number, setNumber] = useState(1);

  useEffect(()=>{
    // setNumber(3) 第一次执行，之后当number发生改变再次执行
    console.log('初始化打印,number发生改变');
    const time = setTimeout(()=>{
      console.log('执行')
    },2000)
    return (
      // 销毁
      () =>{
        clearTimeout(time)
      }
    )

  },[number])

  return (
    <div>{number}</div>
  )

}

export default HookDemo;

hook使用

hook和生命周期函数一样，必须写在函数最顶层。
而且hook不应该被嵌套进条件或者循环语句中。
hook只能在函数组件或者自定义hook中被使用，而不能用于普通函数或者class组件中

------------恢复内容开始------------

react中hook使用

react中什么是hook

它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
hook的主要作用是为了让组件内的逻辑更加清晰，并且可以通过自定义hook来达到复用逻辑。
hook只能使用在函数组件中，class组件不支持，所有hook默认约定名称用use开头。

hook基本使用（useState,useEffect）

useState作用

创建初始化值，代替constructor中的this.state；
使用是根据第一个参数，修改根据第二个参数

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

const HookDemo =  (props) =>{
  const [number, setNumber] = useState(1);

  useEffect(()=>{
    setNumber(3)
    console.log('初始化打印,number发生改变');
  },[])

  return (
    <div>{number}</div>
  )

}

export default HookDemo;

useEffcct使用

对应组件生命周期中的Mount阶段和Update阶段。
useEffcct中的两个参数，

副作用函数，副作用函数还可以返回一个函数对象，这个函数对象用来清除副作用，不用清除副作用则不用返回。对应class生命周期中的卸载componentWillUnmount，更新componentWillUpdate。
数组（可选），里面传入副作用函数中使用到的数据变量，并且这个变量得具有一定变化的特性，第二个参数主要用于优化，防止进行重复渲染

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

const HookDemo =  (props) =>{
  const [number, setNumber] = useState(1);

  useEffect(()=>{
    // setNumber(3) 第一次执行，之后当number发生改变再次执行
    console.log('初始化打印,number发生改变');
    const time = setTimeout(()=>{
      console.log('执行')
    },2000)
    return (
      // 销毁
      () =>{
        clearTimeout(time)
      }
    )

  },[number])

  return (
    <div>{number}</div>
  )

}

export default HookDemo;