前言 学习总结使用，文章中如有错误的地方，请指正。该系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用redux实现面包屑；引入使用其他常用的组件，比如highchart、富文本等，后续会继续完善。 github地址：https://github.com/huangtao5921/react-antDesgin-admin （欢
一、环境介绍1.安装create-react-app脚手架npm install -g create-react-app2.在pacgage.json配置文件，install 依赖库文件3.npm start 启动服务，就可以localhost:3000 本地展示页面二、为什么使用react+redux1.react使项目像搭积木简单，但是一个页面嵌套很多组件，子组件必须要通过父组件传递参数才能渲
首先来说一下什么是react组件，它其实是页面上的一部分，例如标题、搜索框、按钮等都可以是一个组件。react的组件又分为函数组件和class组件。 函数组件定义可以如下： 这是一个函数组件，它的本质其实是JavaScript函数。它接收唯一带有数据的“props”（代表属性）对象与并返回一个Rea ...
转载
2021-09-17 11:05:00
315阅读
2评论
react
原创
2023-03-10 10:05:58
94阅读
const element = <div />; 不过，React 元素也可以是用户自定义的组件： const element = <Welcome name="Sara" />; 当 React 元素为用户自定义组件
原创
2022-07-31 00:01:54
119阅读
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title></title> 6 <script src="react/react-0.14.7/build/react.js"></script> 7 <script
转载
2016-07-24 08:25:00
183阅读
2评论
谈到React优化，估计说的最多的就是减少子组件渲染，减少真实DOM操作等。一 减少渲染1. shouldComponentUpdate通过对Props和State的浅比较，如果没有变化，return false，避免重复多余的render方法调用，省去虚拟DOM的生成和对比过程，提高性能。早期类似的技术有pureRender，16版本中可以直接让class组件继承PureCompon
列表渲染优化 由于 diff 算法在比较的时候默认情况下只会进行同层同位置的比较 所以在渲染列表时可能会存在性能问题 往后添加元素 往前添加元素 让 diff 算法递归比较同层所有元素 给列表元素添加 key, 告诉 React 除了和同层同位置比, 还需要和同层其它位置比 官方文档：https:/
原创
2022-04-30 21:52:00
411阅读
译自 https://addyosmani.com/blog/profiling-react-js/今天，我们介绍一下如何使用 React Profiler API 分析 React 组件的渲染性能。出于演示目的，我们将使用一个电影排队 APP 。The React Profiler API
React Profiler API 会分析渲染和渲染成本，以帮助识别
翻译
2022-03-31 11:32:31
958阅读
1.ES6 类的知识ES6类的继承 2.创建类组件创建类组件
创建一个构造函数(类)
+ 要求必须继承React.Component/PureComponent这个类
+ 我们习惯于使用ES6中的class创建类「因为方便」
+ 必须给当前类设置一个render的方法「放在其原型上」：在render方法中，返回需要渲染的视图
从调用类组件「new Vote(
原创
2023-06-18 19:20:01
167阅读
prev<Overlay isVisible={popupMenu.isVisible} onBackdropPress={() => setPopupMenu({ ...por
原创
2023-02-14 09:06:06
69阅读
说明：代码：//lessrequire('./static/less/index.less')//核心varReact=require('react')varReactDom=require('react-dom')varReactRouter=require('react-router-dom')varRouter=ReactRouter.BrowserRoutervarRoute=ReactR
原创
2018-05-04 06:09:16
2097阅读
点赞
为了更好的用户体验，我们需要考虑在用户滚动到下一屏时，渲染下一屏的组件。
转载
2022-03-22 14:53:47
791阅读
原创
2022-05-28 01:28:04
117阅读
如果路由路径不渲染 React.js 组件，可能有以下几个原因：路由配置错误：确保你的路由配置正确无误。检查路由路径是否与组件的路径匹配，以及是否正确导入和注册了组件。组件未正确导入：确保你在需要渲染组件的地方正确导入了组件。检查组件的导入语句是否正确，并且组件是否在正确的文件路径下。组件未正确注册：如果使用了路由库（如 React Router），确保你正确注册了组件。检查路由配置中是否将组件与
react渲染过程1、React整个的渲染机制就是React会调用render()函数构建一棵Dom树， 2、在state/props发生改变的时候，render()函数会被再次调用渲染出另外一棵树，重新渲染所有的节点，构造出新的虚拟Dom tree跟原来的Dom tree用Diff算法进行比较，找到需要更新的地方批量改动，再渲染到真实的DOM上，由于这样做就减少了对Dom的频繁操作，从而提升的性
转载
2023-06-28 16:56:21
140阅读
react渲染1 、渲染方式：component ——每次都会触发组件的生命周期 //component /kerm 'pao nent/成分；组件render —— 内联模式渲染，性能会更高，props需要传递到函数内 //render v .使成为；给与；children ——会一直渲染 不管匹配模式 //children n.孩子们2、渲染机制渲染过程：react渲染整个渲染机制就是Reac
转载
2023-09-26 16:51:46
122阅读
什么是React的零渲染问题？如何解决零渲染问题？React源码是如何处理的？ 阅读本文可以略知一二。
原创
2022-10-07 22:57:14
332阅读
1.函数组件创建：在SRC目录中，创建一个 xxx.jsx 的文件，就是要创建一个组件；我们在此文件中，创建一个函数，让函数返回JSX视图「或者JSX元素、virtualDOM虚拟DOM对象」；这就是创建了一个“函数组件”！！
调用：基于ES6Module规范，导入创建的组件「可以忽略.jsx后缀名」，然后像写标签一样调用这个组件即可！！
... 调用组件的时候，我们可以给调用的组件设置(传递)
原创
2023-06-10 10:17:46
213阅读
reselect是什么？ reselect是配合redux使用的一款轻量型的状态选择库，目的在于当store中的state重新改变之后，使得局部未改变的状态不会因为整体的state变化而全部重新渲染，功能有点类似于组件中的生命周期函数shouldComponentDidUpdate，但是它们并不是一
转载
2020-10-16 15:09:00
88阅读
2评论
