杂记react

安装： npx expo install expo-speech 引入使用： import * as React from 'react'; import { View, StyleSheet, Button } from 'react-native'; import * as Speech fro ......

用 rootVisualElement 方法绘制按钮和用 GUILayout.Button 绘制按钮混用的案例 using System.Collections; using System.Collections.Generic; using NUnit.Framework; using Unity ......

react菜单Menu导航栏实现 //定义选中的下标 const [currentIndex, setCurrentIndex] = useState(initIndex) //选中样式改变(tailwind) const getCurClass = (index) => { return curr ......

有时候你希望两个组件的状态始终同步更改。要实现这一点，可以将相关状态从这两个组件上移除，并把这些状态移到最近的父级组件，然后通过 props 将状态传递给这两个组件。 这被称为“状态提升”，这是编写 React 代码时常做的事。 事件一般以onXXX开头，比如内置元素div的click事件可以叫on ......

1.订阅发布模式进行兄弟组件通信的案例 1.构建一个调度中心 var bus = { list: [], //订阅 subscribe(callback) { this.list.push(callback) console.log(this.list) }, //发布 publish(name, ......

1.订阅发布模式的定义 订阅发布模式简单来说就是订阅者进行订阅，发布者进行发布，发布者发布时会通过调度中心通知到每一个订阅者。订阅者根据发布的内容选择是否进行对应的操作。 2.实现一个最简单的订阅发布 订阅发布模式的核心就是调度中心。一个最简单的调度中心里面应该具有三个要素 订阅方法，发布方法，回调 ......

1.状态提升(中间人模式)的定义 React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件 上.在父组件上改变这个状态然后通过props分发给子组件。 2.状态提升的使用 简单讲解一下下面的代码，下面模拟了一个电影列表和详情页面。 进行通信的是列表的item和详情组件。 可 ......

在React中子组件给父组件传参通过回调函数来进行。 父组件给子组件传递一个回调函数作为属性。 子组件在需要传递参数的地方调用父组件传递的回调函数即可。 import React, { Component } from 'react' class Navbar extends Component { ......

首先解释React前后端同构、React首屏渲染的概念。然后通过这2个概念解决服务端渲染完成后浏览器端重复渲染的问题。更多技术干货详见www.linuxprobe.com ......

在有些网络环境中，端口是一种比较稀缺的资源，而我们又恰好有多个前端项目需要发布，我们可以采取将多个项目映射到同一个端口上面的方案加以解决。 本教程前端项目主要以react为主，部署在linux服务器上。 1. 将项目资源的访问地址修改为相对方式 在react项目package.json中，添加或者修 ......

import AMapLoader from '@amap/amap-jsapi-loader'; export default class AMaps { options: any; //初始参数 instance: any; //实例 geocoder: any; //地理编码 placeSea ......

ps：以前有写过类似的随笔，今天再次做个总结。 1.安装node.js 去node官网下载吧，这里不赘叙了； 2.安装脚手架create-react-native-app npm i -g create-react-native-app 这个安装过程有快有慢，看运气，我的是几秒就完成了； 3.使用脚 ......

function A() { return (<> This is A component </>) } function B() { let msg = useContext(MsgContext); return (<> This is B component:::: {msg} </>) } ......

代码案例 function A({ onGetAName }) { const name = `> ${new Date().getTime()} <`; return ( <div> This is A component ! {/*箭头函数形式来调用事件函数*/} <button onClick ......

1.受控组件的定义 React组件的数据渲染是否被调用者传递的 props 完全控制，完全控制则为受控组件，否则非受控组件。即React 的 state 成为组件的唯一数据源。 下面用一个小案例来演示，案例中todolist组件的唯一数据源就是State，todolist组件就是一个受控组件 imp ......

1.非受控组件的定义 非受控组件即状态不是完全由React的state来控制的组件 React要编写一个非受控组件，可以 使用 ref 来从 DOM 节点中获取表单数据，就是非受控组件。 import React, { Component } from 'react' export default ......

线段树 线段树合并&&分裂 可持久化线段树 线段树分治 Seg—beats 兔队线段树 历史最值&&历史版本和 Q：维护一种数据结构，支持对数列 \(\{a\},\{b\}\) 的如下操作 对 \(\{a\}\) 区间加，之后令 \(b_i\leftarrow \max(b_i,a_i)\) 历史最 ......

1.属性的定义 props 是正常是外部传入的，组件内部也可以通过一些方式来初始化的设置，属性不能被组件自己更 改，但是你可以通过父组件主动重新渲染的方式来传入新的 props。 这就是React中的单向数据流 2.属性的特点 属性是描述性质、特点的，组件自己不能随意更改，必须由父组件进行更改 3. ......

相似点： 都是纯js对象，都会触发render更新，都具有确定性（状态/属性相同，结果相同） 不同点： 1. 属性能从父组件获取，状态不能 2. 属性可以由父组件修改，状态不能 3. 属性能在内部设置默认值，状态也可以，设置方式不一样 4. 属性不在组件内部修改，状态要在组件内部修改 5. 属性能设 ......

效果： 代码： /** * 复制浏览器内容 * @param templateString 需要复制的内容 */ export const copyBrowerString = (templateString: string) => { const textArea = document.creat ......

React 中复制静态文件到 build的文件夹中 环境：umi 框架 前提：在跟目录下放置了Dockerfile 文件，在build时需要自动复制到dist文件夹里面。 1. 安装 copy-webpack-plugin 插件 2. .umirc.ts 文件中使用copy命令 import { d ......

React.PureComponent 是 React 的一个组件，主要用于性能优化，可以避免不必要的渲染。它的主要特点是： 如果组件的 props 和 state 没有发生变化，则不会重新渲染(此处原理类似React.memo)。 可以自动检查深层对象和数组，判断其是否需要重新渲染（是深层比较)。 ......

React.usecallback与React.memo的区别： React.useCallback 和 React.memo 是两种不同的优化方式： 主要功能： 它们都可以避免不必要的渲染，提高 React 应用的性能。 React.useCallback 是 Hoc（高阶组件）的解决方案，可以用 ......

教程推荐 平台慕课网 博主正在创建网站，招募一批前端+Laravel开发的自学团队，无偿提供大量课程，前期当徒弟后期当同事未来未来希望是合作者。欢迎参观：ihopeso.cn React18+Next.js13+TS，B端+C端完整业务+技术双闭环 前端框架及项目面试－聚焦Vue3/React/We ......

直播小程序源码，react-native自定义文本输入框 Examples from props: ... _onChange = (label, value) => { this.setState({ [label]: value }); }; render() { return ( <View ......

在 React 应用程序中我们遇到以下警告消息： Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your applica ......

精神状态未知，今天考完了人机对话，期中考试将在一周后进行​。这几天进行了多科模拟考试，分数平平无奇，而今晚的物理成为击倒我的最后一枪​，轻舟已撞大冰山TAT ​分析：物理的计算是我的强项，但是选择题错的太多，​主要弱点是分析电路故障，​以及对概念的理解不清。 回想过去的两个月，我浪费了许多时间，也是 ......

官方文档：https://reactnavigation.org/docs/navigating-without-navigation-prop/ 修改APP.js import { NavigationContainer } from '@react-navigation/native'; imp ......

随着移动应用开发框架数量的增加，2018年Vue Native的引入让开发者有能力使用Vue.js代码来创建React Native移动应用。 因为 Vue Native 围绕 React Native 包装了 Vue.js 语法，所以框架非常相似。例如，两者都是跨平台框架，这意味着相同的代码库可以 ......

先说结论: setState处在同步的逻辑中会异步更新状态，更新真实dom。 连续调用 setState 不会连续进行虚拟dom的对比和页面的更新 setState处在异步的逻辑中，同步更新状态，更新真实dom。 1.同步状态 先看同步状态 /* eslint-disable react/no-di ......