Next.js+React进门记016【自定义钩子函数（custom hooks）】

最新推荐文章于 2024-09-16 08:47:17 发布

kaikyou3000

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量336

点赞数 4

文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/kaikyou3000/article/details/140067960

版权

React允许开发者以“use”开头开发自定义的钩子函数（custom hooks），该函数可以将重用的逻辑代码整合进来，任何页面需要使用该逻辑时，只要调用该函数就可以了。自定义的钩子函数目的是让项目代码变得简洁，减轻开发工作量。

计划：将index.js页面上的记数功能，添加信息功能，背景颜色显示功能，分别用自定义钩子函数整合起来，使about.js页面也能利用这些功能。

首先创建useCounter自定义函数，用来整合计数功能

useCounter自定义函数的使用方法

保存代码并在index.js页面使用计数功能，一切显示正常

接下来创建useInputArray自定义函数，用来整合添加信息功能

useInputArray自定义函数的使用方法

保存代码并在index.js页面使用添加信息功能，一切显示正常

最后创建useBgColor自定义函数，用来整合背景颜色显示功能

useBgColor自定义函数的使用方法

至此，index.js页面代码更新如下：

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'
import { Header } from '../components/Header'
import { useCallback, useEffect, useState } from 'react'

const useCounter = () => {
  const[bar, setBar] = useState(1);
  const[isShow, setIsShow] = useState(true);
  const handleClick = useCallback((e) =>{
    console.log(bar); 
      setBar((prevBar) => prevBar + 1);
  },[bar]);
  const handleDisplay = useCallback(() => {
    setIsShow((prevIsShow) => {
      console.log(prevIsShow);//打印前一次状态
      if (prevIsShow){
        return false;
      }else{return true;}
    });
  },[]);
  return {bar, isShow, handleClick, handleDisplay};
}

const useInputArray = () => {
  const[text, setText] = useState("a");
  const[array, setArray] = useState([1,2,3]);
  const handleChange = useCallback((e) => {
    console.log(text);
    if (e.target.value.length > 5) {
      alert("输入不能超过5个字符");
      return;
    }
    setText(e.target.value.trim());
  },[]);
  const handleAdd = useCallback(()=>{
    setArray((prevArray) =>{
      console.log(prevArray);
      if(prevArray.some((item) => item === text)){
        alert("相同数组元素已经存在！");
        return prevArray;
      }
      const newArray = [...prevArray, text];
      return newArray;
    });
  },[text]);
  return {text, array, handleChange, handleAdd};
}

const useBgColor = () => {
  useEffect(() =>{
    document.body.style.backgroundColor = "lightblue";
    return (() =>{
      document.body.style.backgroundColor = "lightgreen";
    })
  },[]);
}

export default function Home() {
  const{bar, isShow, handleClick, handleDisplay} = useCounter();
  const{text, array, handleChange, handleAdd} = useInputArray();
  useBgColor();
  
  return (
    <div className={styles.container}>
      <Head>
        <title>Index page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      {isShow ? <h1>{bar}</h1> : null}
      <button  onClick={handleClick}>
      累计按钮
      </button>
      <button onClick={handleDisplay}>
        {isShow ? "不显示" : "显示"}
      </button>
      <button onClick={handleAdd}>追加</button>
      <ul>
        {console.log(array)}
        {array.map(item => {
          return(<li key={item}>{item}</li>);           
        })}
      </ul>
      <input type="text" value={text} onChange={handleChange} />
       <Main page="index"/>
     <Footer />
    </div>
  )
}

为了让about.js页面也能够使用以上useCounter，useInputArray，useBgColor三个自定义钩子函数的功能，需要将这个三个函数分别分离到单独文件上，以供about.js调用。

①在项目根目录下新建customhooks文件夹和useCounter.js文件

useCounter.js文件代码

import { useCallback, useState } from 'react'

export const useCounter = () => {
    const[bar, setBar] = useState(1);
    const[isShow, setIsShow] = useState(true);
    const handleClick = useCallback((e) =>{
      console.log(bar); 
        setBar((prevBar) => prevBar + 1);
    },[bar]);
    const handleDisplay = useCallback(() => {
      setIsShow((prevIsShow) => {
        console.log(prevIsShow);//打印前一次状态
        if (prevIsShow){
          return false;
        }else{return true;}
      });
    },[]);
    return {bar, isShow, handleClick, handleDisplay};
  }

②在customhooks文件夹下新建useInputArray.js文件

useInputArray.js文件代码

import { useCallback, useState } from 'react'

export const useInputArray = () => {
    const[text, setText] = useState("a");
    const[array, setArray] = useState([1,2,3]);
    const handleChange = useCallback((e) => {
      console.log(text);
      if (e.target.value.length > 5) {
        alert("输入不能超过5个字符");
        return;
      }
      setText(e.target.value.trim());
    },[]);
  
    const handleAdd = useCallback(()=>{
      setArray((prevArray) =>{
        console.log(prevArray);
        if(prevArray.some((item) => item === text)){
          alert("相同数组元素已经存在！");
          return prevArray;
        }
        const newArray = [...prevArray, text];
        return newArray;
      });
    },[text]);
    return {text, array, handleChange, handleAdd};
  }

③在customhooks文件夹下新建useBgColor.js文件

useBgColor.js文件代码

import { useEffect } from 'react'

export const useBgColor = () => {
    useEffect(() =>{
      document.body.style.backgroundColor = "lightblue";
      return (() =>{
        document.body.style.backgroundColor = "lightgreen";
      })
    },[]);
  }

修改index.js文件代码，分别导入和使用useCounter.js、useInputArray.js、useBgColor.js

index.js页面代码更新如下：

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'
import { Header } from '../components/Header'
import { useCounter } from '../customhooks/useCounter'
import { useInputArray } from '../customhooks/useInputArray'
import { useBgColor } from '../customhooks/useBgColor'

export default function Home() {
  const{bar, isShow, handleClick, handleDisplay} = useCounter();
  const{text, array, handleChange, handleAdd} = useInputArray();
  useBgColor();
  
  return (
    <div className={styles.container}>
      <Head>
        <title>Index page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      {isShow ? <h1>{bar}</h1> : null}
      <button  onClick={handleClick}>
      累计按钮
      </button>
      <button onClick={handleDisplay}>
        {isShow ? "不显示" : "显示"}
      </button>
      <button onClick={handleAdd}>追加</button>
      <ul>
        {console.log(array)}
        {array.map(item => {
          return(<li key={item}>{item}</li>);           
        })}
      </ul>
      <input type="text" value={text} onChange={handleChange} />
       <Main page="index"/>
     <Footer />
    </div>
  )
}

测试index.js页面各功能显示正常

同样修改about.js文件代码，分别导入和使用useCounter.js、useInputArray.js、useBgColor.js

about.js页面代码更新如下：

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { Footer } from '../components/Footer'
import { Main } from '../components/Main'
import { Header } from '../components/Header'
import { useCounter } from '../customhooks/useCounter'
import { useInputArray } from '../customhooks/useInputArray'
import { useBgColor } from '../customhooks/useBgColor'


export default function About() {
  const{bar, isShow, handleClick, handleDisplay} = useCounter();
  const{text, array, handleChange, handleAdd} = useInputArray();
  useBgColor();

  return (
    <div className={styles.container}>
      <Head>
        <title>About page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
       <Header />
       {isShow ? <h1>{bar}</h1> : null}
      <button  onClick={handleClick}>
      累计按钮
      </button>
      <button onClick={handleDisplay}>
        {isShow ? "不显示" : "显示"}
      </button>
      <button onClick={handleAdd}>追加</button>
      <ul>
        {console.log(array)}
        {array.map(item => {
          return(<li key={item}>{item}</li>);           
        })}
      </ul>
      <input type="text" value={text} onChange={handleChange} />
       <Main page="about"/>

     <Footer />
    </div>
  )
}

刷新index.js页面，点击About链接