React
关注
分享
扫一扫
文章平均质量分 55
豆浆油条_煎bingo子
2646507129
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
border影响父元素的高度-解决方案
现象：在为Menu组件添加样式时发现，当我点击某个tab时父元素的高度会撑开，原因是boder-bottom设置为2px，第一反应是将border-sizing设置为border-box，使得和属性包括内容，内边距和边框，但不包括外边距。但是无效，因为我没有为父元素设置宽高。 1655864862453解决：换一种方法解决，在menu-item添加border-bottom的样式与点击时的样式一样，但颜色设置为transparent就行！ 1655865242469...原创 2022-06-22 10:50:05 · 1281 阅读 · 1 评论 -
mobx装饰器报错
报错：Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators-legacy", "decorators".原因：这个实验性语法需要启用以下解析器插件之一:"decorator -legacy"， "decorator "解决：安装babel插件转换器即可yarn add @babel/plugin-proposal-decorator原创 2022-05-16 17:06:32 · 3497 阅读 · 0 评论 -
关于react中的state整理
react怎么检测到数据的变化？react状态变化只能通过setState()，调用setState()就会更新状态重新渲染dom为什么不直接更新state？1.如果试图直接更新state，则不会重新渲染组件2.需要使用setState()方法去更新state，它调度对组件state对象的更新，组件通过重新渲染来响应react中，在执行setState()方法后发生了什么？咱们可以将“render”分为两个步骤：1.虚拟DOM渲染：当render方法被调用时，它会返回一个新的原创 2022-04-21 11:55:08 · 1116 阅读 · 0 评论 -
React 16.6的懒加载组件
React 16.6 添加了一个使代码拆分更容易的新功能：React.lazy()。我们通过一个小演示看看如何以及为什么要使用此功能。我们有一个显示股票列表的应用程序，当单击一只股票时，它会显示一个图表：可以去github下载源码GitHub - pomber/react-lazy-preload-demo: Lazy loading (and preloading) components in React16.6Lazy loading (and preloading) components..原创 2022-04-14 19:21:15 · 982 阅读 · 1 评论 -
超超超详细-实现一个简单的基于 React Fiber 的 React
我们将从头一步一步来开始重写React，遵循真正的React代码的架构，但没有优化和非必要的功能。本次博客基于16.8版本使用hooks：createElement函数 render渲染函数 并发模式 Fibers 渲染和提交阶段 调和Reconciliation 函数组件 Hooks首先，先回顾一下基本概念：我们先定义了一个react元素，接着获取节点，最后渲染到容器中：const element = <h1 title="foo">Hello</h1>原创 2022-04-07 20:04:52 · 1038 阅读 · 1 评论 -
超超详细ReactRouter v6版本的基本使用
先附上官网的地址：react-router-v6 · GitHub Topics · GitHub一.概述 React Router 以三个不同的包发布到 npm 上，它们分别为： react-router: 路由的核心库，提供了很多的：组件、钩子。 react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如<BrowserRouter>等。 react-router-native: ..原创 2022-03-27 09:57:20 · 4542 阅读 · 3 评论 -
记录一下好用的库
moment.js是javascript日期处理时间类库：http://momentjs.cnlodash是一套工具库，内部封装了很多字符串、数组、对象等常见数据类型的处理函数：https://www.lodashjs.comreact-sortable-hoc是一个可实现水平，垂直拖拽排序的react库：http://clauderic.github.io/react-sortable-hoc/#/basic-configuration/basic-usage?_k=8mrml8...原创 2022-03-21 16:56:41 · 180 阅读 · 0 评论 -
Switch‘ (imported as ‘Switch‘) was not found in ‘react-router-dom‘
问题：使用<Switch>标签报错原因：最新版本是"react-router-dom": "^6.2.1"已经将Switch改为Routes。解决：（1）将<Switch>标签改为<Routes>标签（2）卸载原先版本，再安装6以下的版本npm uninstall react-router-domnpm install react-router-dom@5...原创 2022-02-13 23:04:51 · 825 阅读 · 1 评论 -
关于setState 更新状态的两种方式
setState 更新状态的两种写法（1）setState(stateChange,[callback])—对象式的setState 1.stateChange为状态改变对象（该对象可以体现出状态的更改） 2.callback是可选的回调函数，它在状态更新完毕，页面也更新后才被调用（render调用后） this.setState({count:count+1})（2）setState(updater,[callback])—函数式的setState 1.update原创 2021-03-15 23:18:34 · 1014 阅读 · 0 评论 -
关于setState是异步与同步的
关于setState是异步与同步的1). 看setState()更新状态是异步还是同步的?a. 执行setState()的位置? 在react控制的回调函数中: 生命周期勾子 / react事件监听回调 非react控制的异步回调函数中: 定时器回调 / 原生事件监听回调 / promise回调 /...b. 异步 OR 同步? react相关回调中: 异步 非reac异步回调中: 同步2). 关原创 2021-03-15 23:10:53 · 160 阅读 · 0 评论 -
antd4.0版本中,类式组件如何使用Form表单form属性
antd官网中可以通过console.log(this.formRef.current)输出的方法与antd3版本中form属性的方法基本一致-如何在父组件中使用到子组件的this.myForm呢？涉及到组件间通信，通过子组件向父组件传递一个this.myForm属性，react原生的办法是传递一个函数类型的props来接收this.myForm，从而将this.myForm从子组件交付给父组件，父组件就可以使用这个对象。在子组件UpdateForm中通过React.createRef(原创 2021-03-06 09:48:15 · 4784 阅读 · 4 评论 -
Warning: [antd: Icon] Empty Icon
开始是使用3.x版本，使用显示错误import { Form, Icon, Input, Button } from 'antd';<Form.Item> <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Pa原创 2021-02-25 21:26:40 · 1926 阅读 · 0 评论 -
使用react脚手架创建react项目时发生错误
解决：1.重新卸载掉React脚手架- npm uninstall -g create-react-app- yarn global remove create-react-app2.重新安装React脚手架npm i -g create-react-app3.开始创建您的项目create-react-app 您的项目原创 2021-02-18 23:03:27 · 400 阅读 · 0 评论 -
jsx基本语法规则
先上个简单的react例子叭~~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-12-23 12:51:46 · 236 阅读 · 1 评论 -
虚拟DOM与真实DOM
先来个简单的React例子~~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2020-12-21 12:42:38 · 231 阅读 · 2 评论 -
创建虚拟DOM的两种方式
需求：使用React创建以下标签使用jsx创建虚拟DOM // 1.创建虚拟DOM const VDOM = <h1 id="title"><span>Hello React</span></h1>;//此处不要写引号，因为不是字符串// // 2.渲染虚拟DOM到页面 ReactDOM.render(VDOM,document.getElementById('test'));<!-- jsx创建虚拟DOM是js创建虚拟DOM的语法糖原创 2020-12-21 12:22:46 · 857 阅读 · 1 评论 -
初识React
O 是什么?-用于构建用户界面的javascript库 -e.g:如何获取学生信息呢？ 1.发送请求获取数据--->需要我们自己做 2.处理数据（过滤，整理格式等）--->需要我们自己做 3.操作DOM呈现页面--->React所做的就是这一步-所以React是一个将数据渲染为HTML视图的开源Javascript库。O 谁开发的？O为什么要学？1.原生javascript操作DOM繁琐，效率低(DOM-API操作 UI)2.使用javascrip原创 2020-12-21 12:10:58 · 132 阅读 · 0 评论