React论坛 今日: 0|主題: 520|排名: 77 

介绍 本文基于React+antd，给大家演示一个完整的全屏demo。 起因是开发今天给我提了一个sql编辑器输入框比较小，不支持放大，不太方便。希望能够全屏显示，联想到自己以后可能也会需要，便研究并记录之。 其实我觉得也没有很小（orz） 全屏 大家应该都在web页面里面见过全屏按钮，点击它以后页面就成了全屏，经常会在代码 ...

有段时间没更新博客了，之前计划由浅到深、从应用到原理，更新一些RN的相关博客。之前陆续的更新了6篇RN应用的相关博客（传送门），后边因时间问题没有继续更新。主要是平时空余时间都用来帮着带娃了，不过还是要挤挤时间来总结下，目标是完成由浅到深、由应用到原理的RN系列博客。本篇算是属于原理部分的博客，不过不在 ...

React前端环境搭建 　　React简介(来源知乎)：   1.1.1 React 是什么 React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES来自：React 官方网站 狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架，广义来讲 React 不仅仅是 js 框架本身，更是一套完整的前端开发生态体系，这套体系包括 ...

前言 最近做的项目使用了微前端框架single-spa。 对于这类微前端框架而言，通常有个utility应用，也就是公共应用，里面是各个子应用之间可以共用的一些公共组件或者方法。 对于一个团队而言，项目中公共组件和方法的使用难点不在于封装不在于技术，很多时候在于团队内部成员是否都能了解这些组件，以避免重复开发，从而提升 ...

需求 - 要在react项目中实现颜色获取器功能 解决方案 - 使用react-color 依赖 - git地址：https://github.com/casesandberg/react-color - 文档地址：http://casesandberg.github.io/react-color/#api-onChange 使用 1. 安装react color 依赖 yarn add react-color @types/react-color 项目中没有使用typescript时，不需 ...

本文主要对在React应用中可以采用的一些性能优化方式做一下总结整理 前言 目的 目前在工作中，大量的项目都是使用react来进行开展的，了解掌握下react的性能优化对项目的体验和可维护性都有很大的好处，下面介绍下在react中可以运用的一些性能优化方式； 性能优化思路 对于类式组件和函数式组件来看，都可以从以下几个 ...

    一、是什么 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook，官方给出的动机是解决长时间使用和维护react过程中常遇到的问题，例如： 难以重用和共享组件中的与状态相关的逻辑 逻辑复杂的组件 ...

前言 自从 React 推出 hooks 的 API 后，相信大家对新 API 都很喜欢，但是它对你如何使用它会有一些奇怪的限制。比如，React 官网介绍了 Hooks 的这样一个限制： 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中 ...

前言 　　从深圳回长沙已经快4个月了，除了把车开熟练了外，并没有啥成长和进步，长沙这边要么就是连续下一个月雨，要么就是连续一个月高温暴晒，上班更是没啥子意思，长沙这边的公司和深圳落差挺大的，至于幸福指数，额，我感觉除了离家近之外，并没有什么其它感觉，同样是每天除了上班就是在上下班的路上，而且人开始变 ...

CodeMirror是一款在线的支持语法高亮的代码编辑器。官网： http://codemirror.net/ 安装： npm install react-codemirror2 codemirror --save 使用： 1 import 'codemirror/lib/codemirror.js'; 2 import 'codemirror/lib/codemirror.css'; 3 // 主题风格 4 import 'codemirror/theme/solarized.css'; 5 // 设 ...

预先了解 setState 的两种传参方式 1、直接传入新值 setState(options); 列如： const [state, setState] = useState(0); setState(state + 1); 2、传入回调函数 setState(callBack); 例如： const [state, setState] = useState(0); setState((prevState) => prevState + 1); // prevState 是改变之前的 state 值，return ...

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。 React 是一个开源 JavaScript 库，开发人员使用它来创建基于 Web 和移动的应用程序，并且支持构建交互式用户界面和 UI 组件。React 是由 Facebook 软件工程师 Jordan Walke 创建，React 的第一个版本在七年前问世，现在，Fa ...

  React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：   官方解释： https://react.docschina.org/docs/forwarding-refs.html#forwarding-refs-to-dom-components   个人代码实例 理解 ...

我们在写一些 UI 组件时，若不考虑动效，就很容易实现，主要就是有无的切换（类似于 Vue 中的 v-if 属性）或者可见性的切换（类似于 Vue 中的 v-show 属性）。 1. 没有动效的弹窗 在 React 中，可以这样来实现： interface ModalProps { open: boolean; onClose?: () => void; children?: any; } const Modal = ({op ...

 函数组件比类组件更加方便实现业务逻辑代码的分离和组件的复用，函数组件也比类组件轻量，没有react hooks之前，函数组件是无法实现LocalState的，这导致有localstate状态的组件无法用函数组件来书写，这限制了函数组件的应用范围，而react hooks扩展了函数组件的能力。可是在使用的过程中，也要注意下面这些问题，否 ...

本文详细讲解了 react-dnd 的 API 以及用法，并且附上了可供参考的 Demo，希望能够给需要的朋友提供一下帮助。 一、概念 React DnD 是一组 React 高阶组件，使用的时候只需要使用对应的 API 将目标组件进行包裹，即可实现拖动或接受拖动元素的功能。将拖动的事件转换成对象中对应状态的形式，不需要开发者自己判断拖动状态 ...

1.什么是react-router react-router是第三方为react开发单页应用开发出来的一个库，只有学习了react-router之后，我们就可以使用react开发spa应用了，源码地址： https://github.com/ReactTraining/react-router 官网地址：https://reacttraining.com/react-router/ 2.什么是spa应用 spa的全称是signal page applicati ...

1、useState：让函数式组件拥有状态 用法示例： // 计数器 import { useState } from 'react' const Test = () => { const [count, setCount] = useState(0); return ( <> <h1>点击了{count}次</h1> <button onClick={() => setCount(count + 1)}>+1</button> </> ); ...

TypeScript 版GitHub(国外地址) | TypeScript 版码云(国内镜像) JavaScript 版GitHub(国外地址) | JavaScript 版码云(国内镜像) 此框架使用与二次开发，前端框架使用 react，UI 框架使用 ant-design，全局数据状态管理使用 redux，ajax 使用库为 axios。用于快速搭建中后台页面。欢迎各位提issue react react-router- ...

一、 使用create-react-app创建react应用 1.1. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServer…） 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架 ...