【文件属性】:
文件名称:json-schema-visualizer:使用React,Redux,Typescript,Webpack和JSONPath的JSON Schema Visualizer
文件大小:435KB
文件格式:ZIP
更新时间:2021-03-25 13:20:01
TypeScript
json模式可视化器
使用React,Redux,Typescript,Webpack和JSONPath的JSON Schema Visualizer。
优化以处理非常大的JSON对象/文件。
演示版
用法
npm install
npm start
本地服务器将在
性能优化实现:
我使用对象而不是数组作为数据类型来存储可能需要存储在redux存储中的潜在重列表数据,以减少时间复杂性,尤其是在状态更新期间。
在整个应用程序生命周期中,rows(IRow)数据仅计算一次,并保存在状态中,这与从每个渲染的json内容进行状态重新计算相反。
我创建了单独的对象(IQueriedPaths和ICollapsedPaths)来监视和保存状态更新,而不是不断更新行本身(IRow),这会非常昂贵。
对于需要循环遍历对象值的情况,我使用了..in循环而不是Object.keys,后者需要循环两次
【文件预览】:
json-schema-visualizer-main
----package.json(1KB)
----package-lock.json(267KB)
----dist()
--------index.html(397B)
--------app.bundle.js(1.76MB)
----src()
--------interfaces()
--------index.tsx(304B)
--------components()
--------selectors()
--------styles()
--------utils()
--------store()
----tsconfig.json(120B)
----.gitignore(310B)
----webpack.config.js(817B)
----README.md(2KB)
网友评论
相关文章
- typescript-webpack-react-redux-boilerplate:使用TypeScript进行React和Redux
- react-webpack-typescript-template:一个react模板,使用react,react-dom,webpack,typescript,redux,react-redux,redux-logger,redux-thunk,redux-promise,connected-react-router ..
- react-typescript-webpack-project:React Typescript和Webpack
- react-redux-webpack-template:使用React,Redux和Webpack的简单SPA