React

• 站长8个月前React
  Next.js的创建与使用NextJs是React的服务器渲染框架，区别于官方SSRNext最大的特点是可以渲染出Ajax异步请求渲染出来的结果，本网站目前使用的前端框架就是NextJs本文章默认你已将学会了React，如果你不会React可以去去搜索React相关的文章来学习一下React下面我讲一下NextJs和React的区别，Reac他和其他两个框架的主要区别就是官方只会提供核心库剩余的像：路由（react-rou
  • 827
  • 0
  • 0
• 站长9个月前React
  Next.js中app router获取router.pathname我访问了/article/5863462212751页面，控制台打印/article/[id]，这就是我们预期的结果。现在讲解一下代码的思路。先获取完整的URL然后获取params对象，将url转为数组变成这样然后根据params中的value进行匹配，如果value和url中的元素匹配成功就置换成，代码简单,思路清晰。代码:
  • 196
  • 0
  • 0
• 站长9个月前React
  antd5+Next.js样式按需抽离前言antdesign组件库升级到5后，他的css样式解决方案也发生了变化，从less变为了css-in-js，但是这种方案对SSR非常不友好：为了不出现闪屏的情况，会在服务器中将style标签插入html，导致SSR首屏的HTML文件会非常的大。所以将首屏需要的CSS内容抽离成CSS文件，这样的话既可以防止首页闪屏又减少了首屏体积，也可以使用CDN加速静态文件。解决但是我在使用中发现了一些问题，

  
  • 470
  • 0
  • 0
• 站长2年前React
  再见，CSS-in-JS大家好，我ssh。在过去的开发中，我一直在用styled-component库作为CSS的解决方案。它有很多优点，灵活、可复用性强、功能强大、可以接受动态JS变量传入组件等等……但今天我看到一篇文章，说都是Spot团队的人已经决定抛弃CSS-in-JS的方案了，因为对他们来说，性能损耗已经远远超过其灵活性的优势了。接下来，我来和大家分享一下这篇嗨，我是Sam,来自的软件工程师，也是广泛使用的Rea
  • 731
  • 0
  • 0
• 站长2年前React
  React中这几个常用的自定义Hook，你学会了吗？useSetState在还没有推出之前，我们写组件都是组件，在中，我们更新状态的方法是，而是会自动帮我们将多个状态进行合并处理的，什么意思呢？当我们在某个方法中使用修改数据的时候，会自动将其它不需要修改的值进行保存，后续我们用到的时候还是之前没有修改过的值，而现在在使用这个时，如果我们设置的状态是一个对象，我们还需要先将没有变化的数据重新赋值回来，这样后面才能用到，类似下面这样的：上面的伪代码是在

  
  • 805
  • 0
  • 0
• 站长2年前React
  Next.js使用SWC按需打包ant design 4.x本文只针对Next.js中的SWC按需编译样式antdesign组件库4.x版本，5版本采用了cssinjs无需按需编译在Next.js13以后系统全面使用SWC进行编译，如果你的项目中使用了babel对antd进行按需加载打包，那么在编译时系统会默认使用babel，包括后来Next.js的打包工具以及部分实验性功能也无法使用。我在一番查找后找到了插件使用方法很简单。需要注意的是，这个插件的nex
  • 751
  • 0
  • 0
• 站长2年前React
  Next.js中使用Server Component请求数据在Next.js的更新中最大的变化就是增加了app文件夹，以及servercomponent。在新的Next.js中我们做SSR也不在需要getServerSideProps和getInitProps来在服务器请求数据，因为这两个服务器生命周期函数只能在page路由中使用，在通过状态管理来传值非常不方便。在本次更新中推出了函数。无论是组件还是路由都可以再组件内部进行服务器声明周期的fetch请求。
  • 724
  • 0
  • 0
• 站长2年前React
  react中 input中输入后自动失去焦点问题小组小伙伴开发过程中，遇到遍历input渲染在页面，再通过input框操作修改数据的过程中，出现input失去焦点问题。去帮忙排查问题的时候，起初分析是onChange方法的问题，因为项目里业务逻辑比较复杂，方法的转换有很多层级，从上到下一步步排查都没能找到原因。偶然间看到外层遍历的key值用的时间戳，再想到react的机制，便知道原因了代码示例如下：可以看到key值使用了时间戳这个时候的ke
  • 768
  • 0
  • 0
• 站长2年前React
  Next.js 13 发布了前言上周发布了Next.js的一个全新的版本13，它带来了全新的理念（servercomponent），作为一名Next.js的爱好者，我们有必要重新学习和认识下它。Turbopack首先是最引入注目的，在Next13中加入了全新的打包工具Turbopack，它是出自Webpack作者TobiasKoppers之手，官方描述是：开发时更新速度比Webpack快700倍、比Vite快10倍，是不是有

  
  • 687
  • 0
  • 0
• 站长2年前React
  React父组件调用子组件的方法React组件化开发中子组件可以通过传递变量或者父组件的方法来实现和父组件的通信或者调用函数传值，但是父组件如何调用子组件的方法呢？很多介绍Hooks的文章并没有讲到useImperativeHandle，我以使用React18+TypeScript开发的项目为例，组件使用Hooks。以下是我精简过后的代码。方法1父组件:父组件:子组件:方法2其实类似方法1只是接收时有一个小小的变化父组件:子组件
  • 1240
  • 0
  • 0