动画react fiber three
React 中虚拟DOM是什么，为什么需要它？
注意：本节主要讲React中的虚拟DOM，但是虚拟DOM并不是React中特有的内容。 1. React 中虚拟 DOM是什么？ 虚拟DOM是对真实DOM的描述，虚拟DOM是JS对象，实际上就是 JSX 通过 babel 转换成 React.createElement()，然后这个函数执行后变成的 ......
2023最新高级难度react面试题,包含答案。刷题必备！记录一下。
好记性不如烂笔头 内容来自 面试宝典-高级难度react面试题合集 问: 如何实现 React 中的组件缓存策略？ 在React中，我们可以使用多种策略来实现组件的缓存，包括但不限于以下几种方法： 使用React.memo() React.memo()是一个高阶函数，它可以接收一个组件作为参数，并返 ......
2023最新初级难度react面试题,包含答案。刷题必备！记录一下。
好记性不如烂笔头 内容来自 面试宝典-初级难度react面试题合集 问: 请详述 React.js 是什么？ React.js 是一个由 Facebook 开发的开源 JavaScript 库，用于构建用户界面（User Interface，UI）。它是目前 Web 开发领域最流行和广泛使用的库之一 ......
2023最新中级难度react面试题,包含答案。刷题必备！记录一下。
好记性不如烂笔头 内容来自 面试宝典-中级难度react面试题合集 问: 请详述 React 中的 HOC（高阶组件）的概念和应用场景？ 在 React 中，高阶组件（High Order Component，简称 HOC）是一种设计模式，它允许我们将共享的功能提取出来，形成一个新的可复用组件。HO ......
three.js 汽车行驶效果
实现原理是使用TWEEN.Tween实现动画效果 实现 汽车模型加载 使用Promise编写模型的异步加载方法 Car.prototype.loadCar = function (position, rotation) { let onProgress = function (xhr) { }; r ......
Vue动画效果-商品加入购物车
购物类app中常有商品加入购物车的动画需求 主要实现代码 type Fn = (...args: any[]) => void interface Events { [name: string]: Fn[] } export class EventEmitter { events: Events c ......
Unity DOTS《群体战斗弹幕游戏》核心技术分析之3D角色动画 鲨鱼辣椒 鲨鱼辣椒
最近DOTS发布了正式的版本, 我们来分享现在流行基于群体战斗的弹幕类游戏，实现的核心原理。今天给大家介绍大规模战斗群体3D角色的动画如何来实现。 DOTS 对角色动画支持的局限性 截止到Unity DOTS发布的版本1.0.16,目前还是无法很好的支持3D角色动画。在DOTS 的baker过程种， ......
three.js 使用 sortObjects 和 renderOrder 处理网格修改后覆盖模型的问题
问题效果： 目标效果 处理此问题首先需要了解three的渲染机制： 渲染机制 threejs的渲染器是基于webGL的。它的渲染机制是根据物体离照相机的距离来控制和进行渲染的。也就是说，它根据物体的空间位置进行排序，然后根据这个顺序来渲染物体。对于透明的物体，是按照从最远到最近的顺序进行渲染。控制渲 ......
React 组件通信方式
人生的游戏不在于拿了一副好牌，而在于怎样去打好坏牌，世上没有常胜将军，勇于超越自我者才能得到最后的奖杯。 1. 父子组件通信方式 1.1 父组件传递到子组件 直接通过属性进行传递，数据的传递可以提高组件的复用性。 1.2 子组件传递到父组件 通过回调函数（callback）来实现。 ref 标记：父 ......
THREE.JS开发《我的世界》
转自：https://www.cnblogs.com/sincw/p/9161922.html 一，准备工作 1）库/框架选型 H4 ......
dom断点可定位react组件值修改
react组件的值修改，也可以使用dom断点来定位。 之前一直误区，认为react组件的修改，不能用dom断点来拦截，实际上在涉及到修改具体原生组件属性的时候，也可定位。 例如： react组件内部使用了input组件，react组件值变化导致input的value发生改变，使用dom断点就可定位。 ......
svg+css实现带灰色背景的loading加载动画组件
<template> <svg class="load" viewBox="25 25 50 50" :style="{ width: loadWidth, height: loadWidth }" > <circle class="loading_bg" cx="50" cy="50" r="20 ......
React 组件懒加载
只有不断学习和成长，才能适应这个快速变化的世界。 1. 懒加载 1.1 React 懒加载 React 中懒加载 Lazy 与 Suspense 需要搭配使用。 React.lazy 定义： React.1azy 函数能让你像渲染常规组件一样处理动态引入的组件。其实就是懒加载。 为什么代码要分割？ ......
Unity DOTS《群体战斗弹幕游戏》核心技术分析之3D角色动画
最近DOTS发布了正式的版本, 我们来分享现在流行基于群体战斗的弹幕类游戏，实现的核心原理。今天给大家介绍大规模战斗群体3D角色的动画如何来实现。 DOTS 对角色动画支持的局限性 截止到Unity DOTS发布的版本1.0.16,目前还是无法很好的支持3D角色动画。在DOTS 的baker过程种， ......
记Redux下载后，运行examples/todos时，报错Error: error:0308010C:digital envelope routines::unsupported 和 Failed to load config "react-app" to extend from.
1、Redux 下载 下载地址 git clone https://github.com/reactjs/redux.git 进入examples/todos，下载依赖： npm install 2、问题复现及解决 执行命令 npm run start 此时终端报错： Error: error:03 ......
一篇随笔学习React18组件通信与插槽
了解什么是jsx -> https://www.cnblogs.com/senior-shef/p/17872695.html 一、了解props 1、什么是props React支持两种组件，DOM组件和React组件。DOM组件指的是所有的HTML和SVG标签。比如说，如果我们想要使用标签，在R ......
富文本里解析vue、react组件
react 封装的渲染富文本的组件： RenderRtf.tsx import { useState, useEffect, useRef } from "react"; import parse from "html-react-parser"; import ReactDOM from "rea ......
React 整洁代码的 10 个最佳实践（译）
作者：大家的林语冰链接：https://www.zhihu.com/question/36516604/answer/3279585231来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 React 整洁代码的 10 个最佳实践（译）免责声明 本文属于是语冰的直男翻译了 ......
CSS进阶3-transform 动画-渐变(线性渐变、镜像渐变)-关键帧
1. 动画 介绍：改变盒子在平面内的形态（平移、缩放、旋转、倾斜） 属性： 平移：transform：translate(值1 ，值2);(默认为X轴，translateY--下移) — —平移依然在原来文档流。 移动：transform：translate(值1，值2)；可右斜移动 代码： /* ......
回到页面顶部（回到顶部、过渡动画）
项目背景： vue 1.创建 backtop.vue 的回到顶部逻辑的组件 <template> <transition name="back-up-fade"> <div class="back-top" :style="{ bottom: bottom + 'px', right: right ......
51k+ Star！动画图解、一键运行的数据结构与算法教程！
hello-algo（《Hello 算法》） —— 动画图解、一键运行的数据结构与算法教程，支持 Java、C++、 Python、 Go、 JS、 TS、 C#、 Swift、 Rust、 Dart、 Zig 等语言。 ......
react中数组的操作
添加元素：你可以使用push方法来在数组的末尾添加一个元素，或者使用unshift方法来在数组的开头添加一个元素。你也可以使用concat方法或者扩展运算符...来合并两个数组。 let arr = [1, 2, 3]; arr.push(4); // arr is now [1, 2, 3, 4] ......
React项目报错：Element type is invalid: expected a string可能的原因
React项目报错：Element type is invalid: expected a string 起因：用了屎一样的React Antd组件库，坑太多实在用不下去了，代码不变直接改成Tdesign，于是就开始了解决无穷无尽的报错。。。 Element type is invalid: exp ......
react项目vite报错:UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??='
问题： vite报错:UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??=' 今天clone一个vite的项目，安装依赖后运行npm run dev报错： UnhandledPromiseRejectionWarni ......
react18 typeScript useSelector 提示state 类型未知
解决方案 store/index.tsx import { configureStore } from '@reduxjs/toolkit'; import { useSelector, useDispatch } from 'react-redux' import type { TypedUseS ......
react 使用 antd 创建全局loading
代码如下： import ReactDOM from 'react-dom'; import { Spin } from 'antd'; export const showGlobalLoading = () => { const dom = document.createElement('div' ......
交互式页面动画网站
Flash动画综合设计并发布、嵌入到网页 【作业要求】 自己选定主题，创意制作Flash动画，并与网页进行集成 【实验环境】 l 所需硬件环境为微机； l 所需软件环境为Flash8.0 【创意内容】 使用引导线做运动路径 使用遮罩层 种子发芽和小鱼游动考虑整体审美架构 加入背景音乐 通过色彩、元素 ......
更新react版本号
[求更新react版本号 · Issue #52 · DataV-Team/DataV-React](https://github.com/DataV-Team/DataV-React/issues/52) package.json 设置 overrides 可以解决这个问题 "overrides" ......
2023-11-30 记录实用小案例 —— react监听页面返回时执行事件
useEffect(() => { const handlePageBack = () => { // 此处写你想要触发的事件 }; // 监听浏览器的 popstate 事件，即页面返回事件 window.addEventListener('popstate', handlePageBack); ......
React 受控和非受控组件
无论你做什么，都要相信自己可以做到，因为你的潜力是无限的。 把父组件的状态变成属性传递给子组件，子组件接受这个属性，听命于父组件。这个子组件就是叫做受控组件。在受控与非受控组件有两种理解方案，第一：狭义上的受控与非受控，就是我们在表单中的受控与非受控组件。第二：广义上的受控与非受控组件，就是 Rea ......