Next.js+React进门记010【使用React的useEffect钩子函数】

已于 2024-06-20 22:05:53 修改
阅读量124 收藏
点赞数 1
文章标签： javascript react.js 前端
于 2024-06-20 19:40:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaikyou3000/article/details/139841059
版权

计划：利用useEffect钩子函数的生命周期，在index和about页面切换时改变背景颜色。

在index.js页面的Home组件中增加一个useEffect钩子函数

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 } from 'react'
import Link from 'next/link'


export default function Home() {
  const bar =123456;
  const handleclick = useCallback((e) =>{
    console.log(e.target.href)
    e.preventDefault();//阻止链接到下一个页面
    alert(bar);
  },[]);

  useEffect(() =>{
    console.log("mount");
    document.body.style.backgroundColor = "lightblue";
    return (() =>{
      console.log("unmount");
      document.body.style.backgroundColor = "lightgreen";
    })
  },[]);

  return (
    <div className={styles.container}>
      <Head>
        <title>Index page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <Header />
      <Link href="/about" onClick={handleclick}>
      链接到about页面
      </Link>
       <Main page="index"/>

     <Footer />
    </div>
  )
}

查看index页面测试效果，测试成功，至此计划完成。

kaikyou3000
关注
Nextjs 不完全入坑指南
11-11 1921
nextjs 服务端渲染 seo ssg ssr
Next.js+React进门记012【useEffect、useCallback第二个参数用途的理解】
最新发布
kaikyou3000的博客
06-21 1060
◆useEffect第二个参数（数组）不为空、并且状态发生改变时，无名函数（也就是useEffect第一个参数）的return区块逻辑就会被再次执行。◆由于return区块逻辑属于无名函数（也就是useEffect第一个参数）中的一部分，无名函数不执行的情况下，当然return区块逻辑也不会被执行。打开index页面控制台，刷新页面，可发现useEffect函数的第一个参数（无名函数）已经加载完成，但return部分没有被执行。◆return区块逻辑记录的状态是上一次无名函数的执行状态。
NextJS开发：解决React Hook useEffect has a missing dependency
arslan-robot
11-21 1327
NextJS编译出现如下错误,原因是在使用useEffect时，当我们将函数的声明放在useEffect函数外面时。3、全局忽略，.eslintrc.json中增加如下配置。或者使用useState定义的历史变量,会报警告。2、将变量和函数内容移到useEffect内。4、使用useCallback(推荐)1、逐个添加注释忽略警告。
NextJS18+React中useEffect执行两次的原因及解决方法
arslan-robot
10-28 2126
useEffect是React Hooks中的一个方法，它用于在函数式组件中执行ui以外的附加操作，例如从接口获取数据等，useEffect可以在组件挂载、更新或卸载时执行。
探索高效React开发：Next.js数据钩子`next-data-hooks`
gitblog_00046的博客
04-13 334
探索高效React开发：Next.js数据钩子next-data-hooks next-data-hooksUse `getStaticProps`/`getServerSideProps` as react-hooks项目地址:https://gitcode.com/gh_mirrors/ne/next-data-hooks 在React世界中，管理组件的状态和获取异步数据是开发者们经常面对的...
详解Next.js页面渲染的优化方案
11-30
这些问题主要源于 Next.js 的特定生命周期钩子函数 `getInitialProps` 和 Webpack 的打包机制。 在 Next.js 中，`getInitialProps` 在页面渲染时判断浏览器是否处于首次渲染。如果是首次渲染，Next.js 将在服务器端...
homepage:我的主页是用React和Next.js构建的
05-08
3. **状态管理和生命周期方法**：React组件有其特定的状态和生命周期，通过`useState`或`useReducer`钩子管理组件状态，通过生命周期方法（在函数组件中为`useEffect`）控制组件在不同阶段的行为。 4. **Next.js...
Next.js 中的路由初学者指南，附有示例
qq_39652397的博客
03-12 5728
使用 Next.js 有很多好处，但一个非常有用的特性是它的文件路由系统。这种架构显着简化了在网站内创建路由的过程。在本教程中，我们将学习如何设置 Next.js 项目以及 Next.js 中的文件路由系统如何工作。 我们还将学习如何： 创建静态和动态页面 Link用, 以及它的一些 props实现页面转换 使用useRouter()钩子从 URL 获取查询参数 动态嵌套路由 ……还有更多。 我们将通过构建一个投资组合页面来了解所有这些。 Next.js 功能 Next.js 是一个基于 R
React + Node.JS巧妙实现后台管理系统实践经验
weixin_42963591的博客
01-31 1316
目前因学业任务比较重，没有好好的完善，现在比较完善的只有题库管理，新增题库，修改题库以及登录的功能，但搭配小程序使用，主体功能已经实现了 此后台系统是为了搭配我的另一个项目 School-Partners学习伴侣微信小程序而开发的。是一个采用Taro多端框架开发的跨平台的小程序。感兴趣的可以看一下之前的文章 希望大佬们走过路过可以给个star鼓励一下,感激不尽~ https://github....
React.Component 钩子函数
qq_43621905的博客
03-19 326
1.constructor(props, context) 构造函数，在创建组件的时候调用一次。 2.componentWillMount() 在组件render之前立即调用 Tip1: 不建议在此请求数据，由于请求数据接口一般都是异步，这时候render已经被执行，建议在componentDidMount 数据 Tip2: 如果在服务端渲染，该钩子函数将被调用两次，一次服务端，一次浏览器端，而c...
next.js实战之访问Web API
蛐蛐的博客
09-17 791
文档：​​​​​​迁移到 Next.js: Migrating from Create React App | Next.js | Next.js 中文网 1.简介 由于 Next.js 使用预渲染，因此只有在客户端时，您才需要安全地访问这些 Web API。 在服务端执行渲染时，访问不到Web API 2.解决 由于next.js使用react，可以使用useEffect来在客户端执行代码 import { useEffect, useState } from 'react'
[译] 为何 React 18 中 useEffect 会运行两次?
tonylua的博客
06-03 5655
原文：https://flaviocopes.com/react-useeffect-two-times/在 2022 年 3 月发布的 React 18 的发布公告中，数量可观的新特性扑面而来。而对 useEffect() 的默认行为的改变，可能就此被淹没了。如果你的应用在更新到 React 18 之后行为迥异，或许正是因为 useEffect() 默认变为被运行 2 ...
官网《Next.js —— 服务端对“整洁”路由的支持》
ab110911的博客
07-02 650
在前面一节中，我们学习了如何为我们的应用创建一个“整洁”的URLs，基本上我们可以得到如‘http://localhost:3000/p/my-blog-post’这样的url。 但是，这只能在我们的客户端运行。当我们重新加载这个页面时，它会返回一个404页面。这是因为实际上根本没有一个叫“p/my-blog-post”的页面目录。 运用Next.js cunstom server API...
useEffect使用指南
热门推荐
大灰狼的小绵羊哥哥的博客
07-02 6万+
最近在写一些React的应用，用上了最新的Hooks。Hooks好用，但是对于刚上手Hooks的小伙伴来说，坑也挺多的。所以决定总结一下Hooks的使用经验，从useEffect开始。useEffect用于处理组件中的effect，通常用于请求数据，事件处理，订阅等相关操作。这里以数据请求为例，来深入介绍useEffect的用法。 最基本的使用 首先，举一个简单的例子： import Re...
Next.js（一）基础
weixin_45566730的博客
05-19 1万+
Next.js 是什么？ Next.js 是一个灵活的React 框架，它提供了构建块来创建快速的 Web 应用程序。 Web 应用程序的构建块 在构建现代应用程序时，您需要考虑一些事项。如： 用户界面- 用户将如何使用您的应用程序并与之交互。 路由- 用户如何在应用程序的不同部分之间导航。 数据获取- 您的数据所在的位置以及如何获取数据。 渲染- 何时何地渲染静态或动态内容。 集成- 您使用哪些第三方服务（CMS、身份验证、支付等）以及您如何连接到它们。 基础设施- 部署、存储和运行应用程序代码的位置（
Next.js + TypeScript 搭建一个简易的博客系统
程序员成长指北
09-11 9981
最近想攻关一个 node.js 框架。希望找到一个能够帮我们把大部分事情都做好的框架，可以直接上手快速开发。不像传统的 Express、Koa 需要配置大量中间件。按照这个想法，谷歌了一...
ReactHooks, Next.js 与 Axios一起使用的问题
eswang的CSDN博客
10-23 8038
前言 关于ReactHooks的介绍这里就不多说了，同时网上也有很多关于如何把React和Axios结合在一起使用的教程，近来也有很多如何使用ReactHooks和Axios一起使用的教程，这些教程获取接口数据的方式大多是用生命周期函数，包括在Hooks之前的生命周期函数以及Hooks中的新生命周期函数useEffect。而在Next.js这个SSR框架中情况是不一样的。 Hooks 这里主要参考...
react 使用react-i18next 如何不通过i18n.js配置翻译的json
06-02
使用 `react-i18next` 不需要通过 `i18n.js` 配置翻译的 json 文件。您可以通过以下步骤使用 `react-i18next`： 1. 安装 `react-i18next` 和 `i18next`： ``` npm install react-i18next i18next --save ``` 2. 在您的应用程序中导入 `react-i18next`： ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import { useTranslation, initReactI18next } from 'react-i18next'; import i18n from 'i18next'; i18n.use(initReactI18next).init({ lng: 'en', fallbackLng: 'en', resources: { en: { translation: { 'welcome': 'Welcome to my app' } }, fr: { translation: { 'welcome': 'Bienvenue sur mon application' } } } }); function App() { const { t } = useTranslation(); return ( <div> <h1>{t('welcome')}</h1> </div> ); } ReactDOM.render(<App />, document.getElementById('root')); ``` 在以上示例中，我们使用 `useTranslation` 钩子来访问翻译函数 `t`，然后在组件中使用 `t('welcome')` 来获取翻译后的字符串。 您可以使用类似的方法添加更多的语言和翻译文本。例如，添加一个名为 `ja` 的新语言并在 `resources` 对象中添加对应的翻译文本： ```javascript resources: { en: { translation: { 'welcome': 'Welcome to my app' } }, fr: { translation: { 'welcome': 'Bienvenue sur mon application' } }, ja: { translation: { 'welcome': '私のアプリへようこそ' } } } ``` 这样，您就可以通过 `useTranslation` 钩子轻松访问 `t` 函数并在应用程序中使用翻译文本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值