前端开发 React
刷新
手动实现-React-Redux

博主头像 50行代码 实现Redux 核心功能 Redux 帮助你管理“全局”状态 - 那些应用程序的许多部分都需要的状态 redux的核心就是对数据状态进行管理，创建一个数据仓库 官方文档：https://www.reduxjs.cn/ Redux顺序分四大步： 初始化 订阅 发布 执行匹配和更新 <!DO ...

基于React的SSG静态站点渲染方案

博主头像 基于React的SSG静态站点渲染方案 静态站点生成SSG - Static Site Generation是一种在构建时生成静态HTML等文件资源的方法，其可以完全不需要服务端的运行，通过预先生成静态文件，实现快速的内容加载和高度的安全性。由于其生成的是纯静态资源，便可以利用CDN等方案以更低的成 ...

初探富文本之基于虚拟滚动的大型文档性能优化方案

博主头像 初探富文本之基于虚拟滚动的大型文档性能优化方案 虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。具体来说，虚拟滚动只渲染用户浏览器视口部分的文档数据，而不是整个文档结构，其核心实现根据可见区域高度和容器的滚动位置计算出需要渲染的列表项，同时不渲染额外的视图内容。虚拟滚动 ...

next-route

在目录结构中，我们精心创建的每一个文件最终都会经过处理，转化为相应的页面路由。然而，值得注意的是，某些特殊文件格式在生成过程中并不会被当作路由路径来处理。 app |-auth login page.tsx password page.tsx //最后生成的路由路径 //·localhost:300 ...

next.js app目录 i18n国际化简单实现

最近在用next写一个多语言的项目，找了好久没找到简单实现的教程，实践起来感觉都比较复杂，最后终于是在官方文档找到了，结合网上找到的代码demo，终于实现了，在这里简单总结一下。 此教程适用于比较简单的项目实现，如果你是刚入门next，并且不想用太复杂的方式去实现一个多语言项目，那么这个教程就挺适合 ...

重启React Native老项目的奇幻之旅：填坑实录与解决方案分享

博主头像 这两天为了重启五年前基于 React Native（版本 0.59.9）开发的老项目，经过各种填坑查询等操作，最终把它成功地运行起来了。 在这篇文章中，我将详述那些遭遇的挑战以及对应的解决方案，以期为同样面临此类困境的开发者提供宝贵的经验参考。 这个项目涉及到的环境基本版本信息如下： react: ...

React 学习之 createElement

博主头像 React 学习之 createElement React 元素 在 React 中，元素是 React 应用的最小构建块。 一个 React 元素是 React 对象的一个轻量级、静态的表示。 它们被 React 用于知道屏幕上什么应该被渲染，并在数据改变时保持 UI 的更新。 React 元素是 ...

React 学习之 Hello World

博主头像 React 学习之 Hello World React 简介 React是一个用于构建用户界面的JavaScript库，由Facebook开发并维护。React通过声明式的方式来构建UI，使得代码更易于理解和测试。React的核心概念包括组件（Component）和虚拟DOM（Virtual DOM ...

React组件封装：文字、表情评论框

博主头像 1.需求描述 根据项目需求，采用Antd组件库需要封装一个评论框，具有以下功能： 支持文字输入 支持常用表情包选择 支持发布评论 支持自定义表情包 2.封装代码 ./InputComment.tsx 1 import React, { useState, useRef, useEffect, for ...

react native工程打包成apk

博主头像 react-native工程打包成apk 1. 生成签名密钥 使用jdk自带的keytool生成密钥 以管理员身份运行如下命令 keytool -genkey -v -keystore my-test3-key.keystore -alias my-key-test3 -keyalg RSA -ke ...

一个支持Sora模型文本生成视频的Web客户端

博主头像 大家好，我是 Java陈序员。 最近 Open AI 又火了一把，其新推出的文本生成视频模型 —— Sora,引起了巨大的关注。 Sora 目前仅仅只是发布预告视频，还未开放出具体的 API. 今天，给大家推荐一个最近十分火热的开源项目，一个支持使用 Sora 模型将文本生成视频的 Web 客户端。 ...

你真的会用 npx 吗❓❓❓

Hello，大家好！ 日常开发中大家应该经常使用 npm install xxx 来安装包依赖，那是否注意到npm升级到 npm@5.2.0 之后，在 npm 二进制命令旁边安装了一个 npx 二进制文件呢？ 没有 npx 命令前 在没有 npx 命令之前，我们想要执行项目中安装的可执行脚本，以安装 ...

React jsx 语法解析 & 转换原理

jsx介绍 jsx是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法，用于描述UI界面，并且可以和JavaScript代码结合使用。 比起vue中的模板语法，更加灵活，且不需要学习模板语法中的特定标签，比如：v-if ...

react 事件函数中 this 绑定问题

在使用类方式创建组件时，类中定义一个函数，并且绑定到元素的点击事件上，此时这个函数中this指向并不是当前这个组件。 组件代码如下： class App extends React.Component { // 组件数据 constructor() { super() this.state = { ...

商智C店H5性能优化实战

博主头像 前言 商智C店，是依托移动低码能力搭建的一个应用，产品面向B端商家。随着应用体量持续增大，考虑产品定位及用户体验，我们针对性能较差页面做了一次优化，并取得了不错的效果，用户体验值（UEI）从一般提升到良好。本文详细记录了优化思路及过程，期望给正在或打算做用户体验提升的小伙伴提供一些参考。 一、性能优 ...