react专题

React 第三十八章 React 中的位运算

位运算是一种计算机编程中常用的操作，它直接对二进制位进行操作。二进制，指的就是以二为底的一种计数方式，常见的还有八进制、十进制、十六进制。十进制0123456789101112131415二进制0000000100100011010001010110011110001001101010111100110111101111八进制012345671011121314151617十六进制012345

react-visible-observer：一个超级简单的滚动加载 npm 库

随着现代网页应用的复杂性增加，懒加载和无限滚动已经成为提升用户体验和性能优化的重要技术。然而，许多现有解决方案要么过于复杂，要么性能欠佳。 react-visible-observer npm 库是一个简单而高效的解决方案，旨在简化这些功能的实现。本文将详细介绍如何在你的 React 项目中集成该库，实现轻松的基于滚动的加载。什么是 react-visible-observer？ react

React-Native中网络请求

转载请标明出处:http://blog.csdn.net/u010046908/article/details/50916511本文出自:【李东的博客】前几篇文章写了关于React-Native中自己遇到的this的问题和组件嵌套的问题做了总结。今天要写的是关于React-Native中的网络请求的实现。 1.get的请求方式的实现 <code class="hljs coffees

react-native遇到的坑，及解决方法

在react-native 0.26.0 版本 1. 引入头文件 var 类名＝ './类名' 会报Super expression must either be null or a function, not undefined 解决方法 export const 类名＝ './类名'; 2. 添加tabBar 时添加 selected = { this.state.sel

React Native 之样式使用（三）

在 React Native 中，使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了web 上的 CSS 的命名，只是按照 JS的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。建议使用StyleSheet.create来集中定义组件的样式。常见的做法是按顺序声明和使用styl

React渲染流程

在 React 渲染分为两个阶段，Render 和 Commit，Render 是修改 React 组件的状态，把需要更新的组件标记为待更新，在 Commit 阶段将待更新的组件进行渲染并最终更新到浏览器的 Dom 树中。 Render 阶段是可以并执行操作的，组件状态如有变更，保留新的状态，抛弃老的状态，这个阶段就是虚拟 Dom 更新阶段，不是简单销毁并重新构建，而是通过一系列比较算法只更新有

【React】打包扫描出现高风险文件 YUI 版本太低 JSEncrypt

漏洞定位扫出漏洞的情况，多是在说下面几个工具： jquery js-cookie jsencrypt 参考链接 YUI:2.9.0 (Link) http://www.cvedetails.com/cve/CVE-2012-5883/ 1.于是在打包后的代码中搜索 YUI（不区分大小写，不进行全字匹配），果然搜到了一段注释： 2.认了这个事情，接下来就容易多了。

React: Context 的几种用法

/** @Desc: Context 的几种用法* @Author: Reda* @Date: 2023-08-12 17:48:17*/import React, { Component, createContext, useContext } from "react";const AppContext = createContext();/*** 1. Provider 和 Consumer

能读 React 源码的人，很吃香！

近 3、4 年来，随着前端技术渐渐趋于稳定，同质化现象已经越来越明显，大家同样是用 React/Vue，工作内容也是高度相似，企业为了在众多求职者中发掘更优秀的人才，就只能不断提高招聘标准。拿 React 举例，你可能觉得自己对 React 已经足够深入，做好了充分的准备。但其实面试官并不关心你会不会 setState，reducts，反而会关注你对 React 的原理有着怎样的了解。这种基

使用React.createContext()在React应用中传递数据，nolan出品

React.createContext() 是React中的一个API，用于创建一个“上下文”，这是一种在组件树中传递数据的方法，而无需手动将props逐级传递。这个方法接受一个参数，即默认值，当组件在树中上层没有找到对应的Provider时，就会使用这个默认值。 React.createContext() 返回一个对象，该对象包含两个React组件：Provider和Consumer。

React 中 Ant Design Upload 组件的异步 action 设置

在 React 中使用 Ant Design 的 Upload 组件时，如果需要在 action 属性中动态地设置一个基于某个异步状态（比如 storeAuth.url）的值，需要确保在 action 被设置之前 storeAuth.url 已经有了有效的值。以下是一些可能的步骤和解决方案： 1、状态管理：确保有一个状态管理库（如 Redux、MobX、Context API 等）来管理

React: memo

React.memo 允许你的组件在 props 没有改变的情况下跳过重新渲染。 const MemoizedComponent = memo(SomeComponent, arePropsEqual?) React 通常在其父组件重新渲染时重新渲染一个组件。你可以使用 memo 创建一个组件，当它的父组件重新渲染时，只要它的新 props 与旧 props 相同时，React 就不会重新渲

react组件渲染性能优化之函数组件-useCallback使用

useCallback主要就是对函数进行缓存,useCallBack这个Hooks主要是解决React.memo不能缓存事件的问题 useCallBack(fn, dependencies) ：fn想要缓存的函数，dependencies有关是否更新 fn 的所有响应式值的一个列表比如：UseCallBackOptimize组件传递了一个事件函数给ChildCom2、ChildCom3，

windows7上react-native环境搭建

最近为在用为知笔记的时候说试用期已经结束，坑！已经用为知笔记那么久了，没想到还是csdn良心啊，不废话了，在此记录一下：主要是基于以下几篇文章才搭成功的 http://www.open-open.com/lib/view/open1451012403948.html http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%

前端面试题大合集4----框架篇(React)

一、React 合成事件 Dom事件流分三个阶段：事件捕获阶段，目标阶段，事件冒泡阶段 React在事件绑定时有一套自身的机制，就是合成事件。如下比较直观： react中事件绑定：<div className="dome" onClick={this.handleClick}>普通的事件绑定：<div class="dome" onclick="handleClick()"> Re

React Native 之原生组件和核心组件（二）

原生组件在 Android 开发中是使用 Kotlin 或 Java 来编写视图；在 iOS 开发中是使用 Swift 或 Objective-C 来编写视图。在 React Native 中，则使用 React 组件通过 JavaScript 来调用这些视图。在运行时，React Native 为这些组件创建相应的 Android 和 iOS 视图。由于 React Native 组件就是

REACT选择状态结构

构建状态的原则当你编写一个包含某种状态的组件时，你必须选择使用多少个状态变量，以及它们的数据应该是什么形状。虽然即使状态结构欠佳，也可以编写正确的程序，但有一些原则可以指导您做出更好的选择：组相关状态。如果始终同时更新两个或多个状态变量，请考虑将它们合并到单个状态变量中。避免状态上的矛盾。当国家的结构方式使几个国家可能相互矛盾和“不同意”时，你就为错误留下了空间。尽量避免这种情况。避免冗余

react-native start ERROR Packager can't listen on port 8081

D:\rnworkspace\Hello>react-native start Scanning 568 folders for symlinks in D:\rnworkspace\Hello\node_modules (41ms) ┌────────────────────────────────────── ───────────────────────────────────

react native Exception in thread main java.util.zip.ZipException: error in opening zip file

1.问题 D:\rnworkspace\Hello>react-native run-android JS server already running. Building and installing the app on the device (cd android && gradlew.bat install Debug)... Downloading https://serv

AntDesign React 简单封装一个带错误提示的输入框

背景没想到官方没有提供纯粹的带错误提示的输入框，官方提供了启用错误样式 status 属性。但是展示错误信息提示却需要捆绑Form 和 Form.Item。说实话有点不友好，我就一个简单的输入框，想要用户输入时用正则校验，错误时提示一些错误信息。然后表单数据就这么一个输入，完全没必要写一整个Form 来管理提交数据，为了这一个输入对接 Form 那一堆 API 属实是水代码。加一个错误提示

React 第二十四章 shouldComponentUpdate

React 中的 shouldComponentUpdate 是一个生命周期方法，用于控制组件是否需要重新渲染。文档地址：https://zh-hans.reactjs.org/docs/react-component.html#shouldcomponentupdate shouldComponentUpdate 接收两个参数：nextProps 和 nextState。可以在这个方法中根

React-hooks：useMemo

useMemo 是一个 React Hook，它在每次重新渲染的时候能够缓存计算的结果。 const cachedValue = useMemo(calculateValue, dependencies) 参数 calculateValue：要缓存计算值的函数。它应该是一个没有任何参数的纯函数，并且可以返回任意类型。React 将会在首次渲染时调用该函数；在之后的渲染中，如果 depen

react 类组件和函数组件声明周期对比

React 的类组件和函数组件在生命周期方面存在一些差异。以下是它们之间的对比：类组件的生命周期 React 类组件的生命周期可以分为三个阶段：挂载、更新和卸载。 1、挂载阶段： constructor()：组件实例化时调用，用于初始化状态和绑定方法。 componentWillMount()（已弃用）：在组件挂载前调用，但在React 17.0之后，该钩子已被废弃。 render()：

React 第二十七章 Hook useCallback

useCallback 是 React 提供的一个 Hook 函数，用于优化性能。它的作用是返回一个记忆化的函数，当依赖发生变化时，才会重新创建并返回新的函数。在 React 中，当一个组件重新渲染时，所有的函数都会被重新创建。这可能会导致一些问题，特别是在涉及到将函数作为 prop 传递给子组件时，因为每次父组件重新渲染时，子组件都会接收到一个新的函数 prop，从而触发子组件的不必要的重新

React 之 useCallback（缓存函数）（十八）

useCallback 是一个允许你在多次渲染中缓存函数的 React Hook。 useCallback 是一个 Hook，所以应该在组件的顶层或自定义 Hook 中调用。你不应在循环或者条件语句中调用它。如果你需要这样做，请新建一个组件，并将 state 移入其中。 //fn：想要缓存的函数。此函数可以接受任何参数并且返回任何值。//dependencies：有关是否更新 fn

创建React项目(新手小白篇)

开发小白，本篇主要记录创建React项目时遇到的问题及其解决方法。 React版本:18.3.1 React.js 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它是一个用于构建交互式的、可重用的 UI 组件的开源库。React 主要用于构建单页面应用(SPA)，但也可以与其他 JavaScript 库和框架集成，用于开发更复杂的应用程序。 1.Re