![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
Pandora_417
以码为梦,不负韶华
展开
-
react原理
vdom和diff只比较同级,不跨级比较tag不相同就删掉重建,不再深度比较tag和key,二者都相同则认为是相同节点,不再深度比较JSX本质JSX就是createElement函数执行生成vnodepatch(elem,vnode)React的事件合成机制所有事件挂载到document上,event不是原生的,是SyntheticEvent合成事件对象作用:跨平台、兼容性、减少内存消耗setState和batchUpdate机制判断isBatchingUpdatestrans原创 2021-12-02 16:15:35 · 88 阅读 · 0 评论 -
react及相关重难点
state和setState(不可变值,异步,何时同步)jsx本质是什么(ReactDOM.render是一个语法糖,通过babel把jsx解析成React.createElement,在浏览器里生成虚拟DOM,再转成真实DOM)事件 (与 dom事件的区别)组件生命周期(SCU)函数组件 (和 class组件区别)组件通信方式(props\context\redux)受控组件 和 非受控组件(什么时候使用非受控组件)refs (如何使用获取元素)Protals(使用场景)context.原创 2021-12-01 10:21:40 · 1679 阅读 · 0 评论 -
React-router
路由模式:1、hashhttp://172.30.100.48:8001/#/purchase-manage/my-order2、h5 history是需要后端支持的,http://172.30.100.48:8001/purchase-manage/my-order/200HashRouter、Route及属性exact和path、Switch路由配置:1、动态路由 /product/:id2、懒加载 lazy Suspense及属性fallback...原创 2021-12-01 10:00:59 · 627 阅读 · 0 评论 -
redux和react-redux 的知识点
redux:storereducerdispatchaction单向数据流模型中间件redux-thunk redux-sagareact-redux:provider // 它接受store作为props,然后通过context往下传,这样react中任何组件都可以通过context获取storeconnect // 用于从 UI 组件生成容器组件。mapStateToProps // 即将state映射到 UI 组件的参数(props)mapDispatchToProps //原创 2021-12-01 09:49:52 · 96 阅读 · 0 评论 -
react高级特性
1、函数组件输入props 输出jsx 没有实例 没有生命周期 纯组件2、非受控组件特点 组件的value与state没有关系, setState实现不了的eg:文件上传、富文本编辑器ref(inputRef.current.value)dom元素defaultValue 和 defaultChecked3、Protals使用protals把元素渲染到body上ReactDOM.cerateProtals(<input/>,document.body)使用场景:o原创 2021-11-26 17:28:03 · 598 阅读 · 0 评论 -
react基础
setState不可变值(不能提前设置this.state.list = []这样子,必须使用setState。会生成新的值 但不会改变旧的值,数组可使用slice(),对象可使用Object.assign({}, obj1,obj2))可能是异步更新setState是异步的,但在setTimeout中是同步的在自定义的dom事件中是同步的(自定义的dom事件是需要销毁的,vue在beforeDestroy()周期中,而react在componentWillUNMount中。)可能会被合并原创 2021-11-26 10:59:40 · 483 阅读 · 0 评论 -
React真题演练(20道)
1、组件间如何通信?1、父子组件props2、自定义事件3、redux和Context2、JSX本质是什么createElement执行返回vnode3、Context是什么、怎么应用?1、父组件向子孙组件传递信息;2、简单的公共信息:主题色、语言;3、复杂的公共信息就使用redux4、shouldComponentUpdate用途(SCU)1、性能优化2、配合不可变值一起使用,不然容易报错5、redux数据流6、setState场景题(异步)7、什么是纯函数1、返回一个新原创 2021-11-19 11:43:00 · 1410 阅读 · 0 评论 -
两个虚拟表格的对比使用(antd-table虚拟列表和virtuallist-antd)
虚拟列表virtuallist-antd实现:优点:勾选、展开子表格、固定列、固定头、cell过长可折叠变成…缺点:会出现白屏、滑不动的情况antd的虚拟表格缺点:不能勾选、展开优点:响应快,滑动起来十分丝滑使用方法可参考这篇博客关于新手指导IntroJS,vue项目(vue3)和react项目(ant-design)的引用以下是虚拟列表virtuallist-antd的使用方法:/* * @Descripttion: 复杂的虚拟表格组件 ComplexVirtualTa原创 2021-09-18 11:05:24 · 6854 阅读 · 0 评论 -
ant design的虚拟表格实现不了勾选 、不能固定列 、不能展开子表格,但它依旧是一个很好的虚拟表格!
ant design的虚拟表格优点:虚拟表格,只渲染当前可视页面的数据,渲染速度快缺点:不能实现行勾选不能固定列不能展开子表格,实现树结构使用场景:只批量显示成千上万条数据,没有其他花里胡哨的功能的表格。————————————————————————————————————————————————————————以下是我自己写的代码,仅供参考封装的虚拟表格子组件——VirtualTable.jsx文件:/* * @Descripttion: 虚拟表格组件 VirtualTab原创 2021-09-15 10:14:24 · 2446 阅读 · 3 评论 -
关于新手指导IntroJS,vue项目(vue3)和react项目(ant-design)的引用
安装插件npm i introJs 一、vue3项目中引用intro作新手引导src/utils/util.js文件import introJs from 'intro.js'/** * @name: 新手指导 * @param {String} pathname 当前页面的path * @param {Array} stepsArr 步骤内容(包括element、intro) * @return {*} */export function guide (pathname, ste原创 2021-08-24 09:45:25 · 1293 阅读 · 0 评论 -
react项目 ant design框架[需求] ProTable::options::setting 增加持久化支持
react项目 ant design框架[需求] ProTable::options::setting 增加持久化支持columnsStateMap:设置columnsonColumnsStateChange: 监听columns的变化columnsStateMap columns 的状态枚举 {key:{ show,fixed }}} onColumnsStateChange columns 状态发生改变 (props: {key:{ show,fixed }}}) => void原创 2021-07-15 16:58:34 · 1018 阅读 · 0 评论