React框架学习笔记第21页

React国际化，基于react-i18next

React国际化，基于react-i18next最近接到一个新的任务，一个项目需要集成到已有项目，并且要做国际化。国际化可以使web站点或者app在不同的国家或者地区使用。

确实菜，真的爱·2024-02-05 08:45

react项目实现前端国际化(react+react-i18next)

1.安装react-i18nextnpminstallreact-i18nexti18next--save2.代码结构i18n的配置i18n.jsimporti18nfrom"i18next";import

袖子味·2024-02-05 08:45

React 中 react-i18next 切换语言（项目国际化）

在React中，使用react-i18next切换中英文目录在React中，使用react-i18next切换中英文一、安装依赖二、文件配置1、config.ts2、zh.json3、en.json三、

Jas555·2024-02-05 08:12

前端开发中不同语言【react-i18next】

目录查看并设置语言单页面：htmllang编辑浏览器自定义翻译：react-i18next设置模块：staticData.ts散(重复利用)：命名空间.json应用准备html标签查看并设置语言单页面：

参宿7·2024-02-05 08:41

数据绑定原理

1、拼接字符串2、前端模板引擎3、react实现通过VirtualDOM算法检查DOM的变动的刷新机制。二、数据双向绑定原理指数据模型和视图之间的双向

weixin_30653023·2024-02-05 08:38

DataBinding使用详解-Google官方的视图绑定

几年前，数据绑定在便已在前端界风生水起，Angular.js、React.js、vue.js等热门前端框架都具备这种能力。

ZhangQiang-·2024-02-05 08:07

2024三掌柜赠书活动第四期： Next.js实战，构建现代化的可扩展Web应用

目录摘要前言Next.js简介关于《Next.js实战》实战示例最佳实践和进阶应用编辑推荐内容简介作者简介图书目录书中前言/序言《Next.js实战》全书速览结束语摘要：本文将介绍Next.js，一个流行的React

三掌柜666·2024-02-05 08:04

[Angular 基础] - 数据绑定(databinding)

的渲染过程及组件的创建&简单学习：[Angular基础]-Angular渲染过程&组件的创建Angular之中的databinding是一个相对而言更加复杂，以及我个人觉得相对而言比较灵活的部分——较之React

GoldenaArcher·2024-02-05 08:34

reactive 与 ref 的区别

在Vue.js中，reactive是Vue3引入的一个新的API，用于创建响应式对象。这种方法是CompositionAPI的一部分，它提供了一种更灵活的方式来组织和重用逻辑。

weixin_45782719·2024-02-05 07:12

React实例之完善布局菜单（一）

今天我们来用所学的知识来做一个布局菜单的组件,针对这个组件我之前写过一个教程React之布局菜单-CSDN博客，那个呢比较基础，这节课算是对那个教程的一个扩展和补充。

码蚁先生·2024-02-05 07:15

React实例之完善布局菜单（二）

我们继续未完的课程。我们已经设计完所有theme的有关逻辑和代码了。接下来就是菜单部分，首先，菜单分为菜单头和菜单列表，还有收缩模式和缩略模式。为配置能用化的考虑，我们在菜单配置方面采用了Json数组。而菜单本身的数据状态和App的业务逻辑是没有关联的。所以我们尽可能的把两者隔离开。组件间的状态共享一般通过Props、state、及Reducer这么种方式。对于单层状态的上下传递我们采用Props

码蚁先生·2024-02-05 07:15

React实例之完善布局菜单（三）

接着上篇的内容继续。规划界面布局。界面分为三个部分，左边为菜单部分，右边上部有个80px高度左右的功能区，下面是主内容区。依据这个设计，我们进行下面的步骤：在SMenu项目中创建一个目录：SLayout,这个目录里我们存储各种布局，我们先来示例一种，其它的我们根据需要可以自行设计。在这个目录中创建FullPage.jsx文件//SLayout/FullPage.jsximportBoxfrom'@

码蚁先生·2024-02-05 06:39

React Hook 中 createContext & useContext 跨组件透传上下文与性能优化

原文链接ReactHook中createContext&useContext跨组件透传上下文与性能优化-Postbird-猫既吾命本文是在：https://juejin.im/post/5ceb36dd51882530be7b1585

大猫会长·2024-02-05 06:02

React----Hooks函数组件----useContext

一、定义useContext可以实现跨越组件层级，实现数据共享。二、实现原理使用createContext创建一个上下文对象，用useContext来接收这个对象，在.Provider包裹想要传递数组的所有组件，当组件上层最近的更新时，该Hook会触发重渲染，并使用最新传递的value值，以实现跨组件的数据传递。三、示例问题：现在有三个组件，,，，大概的关系是，1和2是兄弟组件，3是2的子组件，现

尤记昨日书·2024-02-05 06:31

react 多层级组件传值方案（React.context 和 useContext）

React中，数据流是自顶向下的，如果兄弟组件通信，那就得先状态提升到父组件但我们平时开发过程中，经常碰到组件树层级很深，如果不同层级的组件需要使用同一份数据，那从顶层组件分别传递props的方案肯定是很麻烦的而且太深的

友人C君~·2024-02-05 06:31

React Native for Arcgis 地图开发 LocationCtrl （十五）

定位工具封装和使用LocationCtrlimportReact,{useState,useEffect}from'react';import{View,Text,ScrollView,StyleSheet

haibalai·2024-02-05 06:16

React 组件跨层级数据共享：createContext、useContext、useMemo

createContext问题背景：跨组件传值原本组件传递需要一层一层props传递，传递太过繁琐importReactfrom'react'functionNeedData(props){return

真·skysys·2024-02-05 06:00

iOS -RAC使用

一、简介ReactiveCocoa可以说是结合了函数式编程和响应式编程的框架，也可称其为函数响应式编程（FRP）框架，强调一点，RAC最大的优点是提供了一个单一的、统一的方法去处理异步的行为，包括delegate

搬砖的crystal·2024-02-05 06:11

react-native 安卓项目gradle优化

profile报告命令./gradlewcleanapp:assembleDebug--profile1.png1、debug环境禁止crashLytics上报2、避免LegacyMultideximage.png2.png记录2018-11-0611:05cleangradlewcleanapp:assembleDebug--profile1、修改参数，加快buildorg.gradle.jvm

小马将过河·2024-02-05 06:08

react+mobx强制刷新之后会使保存的状态丢失怎么解决

问题描述使用mobx储存了我的导航但是发现我强制刷新页面，存储的状态就丢失了解决方案本地存储使用浏览器的本地存储（localStorage或sessionStorage）将状态数据保存在客户端。这样，即使页面刷新，数据也能被恢复。classAppStore{//...其他代码...constructor(){makeAutoObservable(this);conststoredNavData=l

T3165919332·2024-02-05 05:33

回顾 | Pre VS Code Day - 用 GitHub Codespaces 构建 OpenAI 应用实战

编辑：AlanWang排版：RaniSun微软Reactor为帮助广开发者，技术爱好者，更好的学习.NETCore,C#,Python，数据科学，机器学习，AI，区块链,IoT等技术，将每周三到周六，组织

MicrosoftReactor·2024-02-05 05:02

How To Set Up ESLint, TypeScript, Prettier with Create React App

Note:CRA3.0willincludeTSlintingwithESLintoutofthebox,https://github.com/facebook/create-react-app/issues

RoyChina·2024-02-05 05:29

vue3中watch监听的使用方式

vue3中使用watchaaabbbcccimport{ref,watch,reactive}from'vue';exportdefault{setup(){//constmytext=ref("")constselect

葫芦娃y·2024-02-05 04:37

css实现翻牌抽奖效果

css实现翻牌抽奖效果实现效果React代码css代码总结实现效果React代码importReact,{FC,useEffect,useState}from'react'importstylesfrom

神说要有光 ye·2024-02-05 04:21

css动效：气泡在屏幕上随机漂浮

css实现气泡随机漂浮效果实现效果React代码css代码总结实现效果React代码//泡泡随机漂浮//这里的封装逻辑是基于每个泡泡大小一样进行封装的importReact,{FC,useState,useEffect

神说要有光 ye·2024-02-05 04:21

CSS-in-JS

传统的CSS代码写在一个单独的样式表文件中，在ReactApp中通过引入样式文件的方式加载。但是，随着应用程序的增加，样式表文件也变得庞大，难以维护。

阿鲁纳塞多撒·2024-02-05 03:46

React核心知识点总结（全）

React知识点总结（全）一：React脚手架（create-react-app（cra））1：安装cnpminstall-gcreate-react-app2:初始化项目create-react-appdemoNmae3

pray Serendipity·2024-02-05 03:15

React-hooks 自定义分享（这里有你想要的自定义hooks）

React-hooks自定义分享（这里有你想要的自定义hooks）useLastDatauseUpdateEffectuseAsyncMemouseAsyncEffect最近忙到飞起，完全没有时间写文章

pray Serendipity·2024-02-05 03:15

React中css-in-js的使用

CSS-in-JS在React社区的热度是最高的，这是因

月光晒了很凉快·2024-02-05 03:45

React基础原理（state数据，setState方法，获取页面Dom节点，事件绑定，生命周期）

React基础原理（state数据，setState方法，获取页面Dom节点，事件绑定，生命周期）React组件内部state数据当state中的数据发送变化以后，会调用render方法重新渲染VDOM

pray Serendipity·2024-02-05 03:45

什么是 CSS-in-JS?

这种方法在许多现代前端框架和库（如React、Vue和Angular）中变得越来越流行，因为它提供了一种组件化的方式来处理样式。

文摘资讯·2024-02-05 03:14

css-in-js

CSS-in-JS在React社区的热度是最高的，这是因为React本身不会管用

大聪明码农徐·2024-02-05 03:14

css-in-js 之 vue

CSS-in-JS就是可以使用JS来编写CSS样式，这原本是React的专属，现在可以在Vue中应用，依赖包：vue-styled-components。

佛天华·2024-02-05 03:44

React简介

是用于动态构件用户界面/视图的js库，由Facebook开源React特点采用转化模式、声明式编码，提高开发效率即组件复用率2.ReactNative可以使用React语法进行移动端开发3.使用虚拟DOM

廿二的学习日记·2024-02-05 02:45

reacr-native CodePush和AMap3DMap冲突报错duplicatesymbol _aes_encrypt_key128

RN集成react-native-code-push和react-native-amp3dios中出现了报重复的问题具体信息如下duplicatesymbol_aes_encrypt_key128in:

HT_Jonson·2024-02-05 02:20

muduo库的模拟实现——Reactor部分

Channel模块和EventLoop模块、Poller模块是紧密关联的，其中通过EventLoop模块创建出来的对象就是一个Reactor，EventLoop对象里面有一个Poller对象，用来监控事件

JJP不会CPP·2024-02-05 01:20

vue3 图形验证码组件

/components/piccode.vue//vue3图形验证码import{reactive,onMounted,ref,toRefs,defineEmits}from"vue";exportdefault

路过的假面骑士dcd·2024-02-04 22:47

react 脚手架安装

react脚手架react的create-react-app脚手架：项目的整体技术架构：react+webpack+es6+eslint脚手架项目的特点：模块化，组件化，工程化项目的创建npminstall-gcreate-react-appnpmroot-g

hk_faith·2024-02-04 22:07

LLM应用开发与落地：使用gradio十分钟搭建聊天UI

这时候的你可能在苦恼中，毕竟react.js,next.js,css,html也不是每个人都那么熟练，对吧？

前行的七哥·2024-02-04 21:55

react 中 key的作用

2).详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较：比较规则如下：a.

HEY_439·2024-02-04 19:58

字面跳动前端面试题：React Hook为什么不能放在if/循环/嵌套函数里面？

答：首先，ReactHooks是为了简化组件逻辑和提高代码可读性而设计的。将Hook放在if/循环/嵌套函数中会破坏它们的封装性和可预测性，使得代码更难维护和理解。

张培跃吧·2024-02-04 18:06

前端vue/react项目压缩图片工具@yireen/squoosh-browser

想要在前端项目中压缩图片，然后再上传到后端保存，就需要一个压缩工具的帮助，暂时有两个依赖库可以选择：image-conversion和yireen/squoosh-browser，看了官方仓库地址和更新时间等详情，发现还是yireen/squoosh-browser最新一些，所以就选择了yireen/squoosh-browser。@yireen/squoosh-browser地址：@yireen

1024小神·2024-02-04 18:52

手写一个 vue 项目的webpack 的配置 1

最近闲下来了，就做做技术分享系列文章计划分为三篇手写一个vue的webpack配置手写一个react的项目webpack实践手写一个webpack的脚手架我们经常在项目中遇到修改webpack的配置，但是只是单纯的依靠脚手架

hegege·2024-02-04 18:39

Vue前端框架选型论证

前端框架的演变1.1前端框架的演变历史1.2web1.0时代1.3后端MVC时代1.4前端MVC时代1.5MVP时代1.6MVVM时代2.前端框架的演变总结3.前端MVVM三大框架AngularJS、Vue、React

秋枫落落·2024-02-04 18:17

『GitHub圈选周刊13』推荐5款本周让人爱不释手的开源项目

孜孜孜孜不倦·2024-02-04 18:43

RN安卓首屏白屏优化处理

mReactRootView=createRootView();mReactRootView.startReactApplication(getReactNativeHost().getReactInstanceManager

田_19ab·2024-02-04 17:03

React-Native启动页及ICON设置

本文将从Android和IOS两端分别详细介绍APP是如何设置名称、图标以及启动页的。首先我们到图标工厂上传一张1024x1024的图标，然后一键生成所有尺寸的图标，下载下来供两端使用。icon.pngIOS端设置名称在Xcode中点击你的项目修改右侧DisplayName就是APP的名称image.png设置图标将上面下载好的图标组文件夹打开，将ios目录下的AppIcon.appiconset

无穷369·2024-02-04 15:48

react 图片压缩

common.jsexportconstcommon={//这里的获取exif要将图片转ArrayBuffer对象，这里假设获取了图片的baes64//步骤一//base64转ArrayBuffer对象base64ToArrayBuffer:(base64)=>{base64=base64.replace(/^data\:([^\;]+)\;base64,/gmi,'')varbinary=ato

铭赟·2024-02-04 15:07

vue/react通用上传前图片压缩

vue/react通用上传前图片压缩当做一些自研项目或者用不了antd等上传组件或者第三方包的时候,又有上传图片等需求,同时现阶段图片文件较大,后端限制大小的时候,如何处理?

A Wonder·2024-02-04 15:37

React安装依赖 node_modules中有下载依赖项但package.json文件中没有依赖

React安装依赖node_modules中有下载依赖项但package.json文件中没有依赖直接在下载依赖项后加-S就可以解决随机id生成器(uuid、nanoid)npminstallnanoid-S-S

Z_Wonderful·2024-02-04 15:32

推荐频道

React框架学习笔记