首页 > 编程语言> 文章详细

将 Sencha EXTJS 迁移到 ReactJS

2023-07-19 15:01:26 阅读：269 来源： 互联网

标签：ExtJS HTML Javascript

使用 React 的优势

React源于Linux和Javascript程序员的开发圈子，他们希望创建软件的扩展，可以执行所有活动，以举例和简化Web开发和软件开发的过程。那么是什么让 React 如此重要呢？

ReactJs 环境为设置弹性或敏捷项目提供了充足的空间。这最大限度地减少了调试需求，减少了连接障碍的机会，并允许将来进行更自然的更改。但是还有一系列其他优势使 React 开发成为 Javascript 库的重要补充，例如：

首先，它简单，强大，并配备了具有活跃社区的API，以及现有的编码器和调试器数据库。
它是使用 MIT 许可证开发的，随着时间的推移不断更新和改进，并配备了使其对全球开发人员有用的更改。
该软件配备了强大的配套库，使其与移动应用程序开发非常兼容，也适用于跨平台开发。
应用程序开发和 Web 开发的最大挑战之一是将某些方面从旧系统迁移到新平台。使用 React，这种转换在调试过程和敏捷开发中变得更加舒适和省时。
熟悉 VSCode 和 Docker 的用户在使用 React 时会发现自己很自在，因为它是从基于现代 CSS 和 JavaScript 库构建的生态系统开发的。它简单、灵活，并允许在所有网络中进行更自然的改进。

使用 extjs 的替代品

Sencha Extjs 组件的完整迁移可能看起来既复杂又耗时，尤其是从一个前端框架迁移到另一个前端框架，但存在一个可能的解决方案：首先开发一个使用 Ext 中的域逻辑扩展的框架，然后导入所有视图和控制器。

让我们看一个示例应用程序，该应用程序使用 Extjs 作为其用户界面，并在 C# 作为后端上运行。该应用程序没有像Grunt，Gulp或任何节点包管理器这样的生态系统。Sencha 命令用于减少工作负载和创建新模块，而无需过多依赖 Extjs。使用代替 Extjs 的可能性之一是使用 iframe。以下是带有 iframe 的 Extjs 视图的示例代码：


Ext.define('App.view.utilities.desktop.ReactWindow', {
 extend: 'Ext.form.Panel',
alias: 'widget.App_view_utilities_desktop_ReactWindow',
bodyPadding: 5,
width: 600,
layout: {
type: 'vbox',
align: 'stretch'
},
initComponent: function() {
var me = this;
var dynamicPanel = new Ext.Component({
autoEl: {
tag: 'iframe',
style: 'border: none',
src: me.url
 },
flex: 1
});
Ext.apply(me, {
title: 'React',
defaults: {
labelWidth: 120
},
items: [dynamicPanel]
});
me.callParent();
}
});

在触发 iframe 时，用户可以将以下面板的代码添加到桌面：


this.addPanel(Ext.create('App.view.utilities.desktop.ReactWindow', {
url: 'react/mod/someurl/'
}));
[GUI]
* global.asax
* default.aspx
**** [app] -> extjs
**** [react] -> reactjs

继续讨论 React 组件

随着 iframe 的部署，用户现在可以通过在父窗口中插入自定义事件，从 React 子应用程序中打开新的 Ext 面板。以下代码中的 detail 属性成为与 react 组件链接的自定义事件的一部分：-


window.addEventListener('react', function(e) {
me.onReactEvent(e.detail, e);
});
class MyLinkCell extends React.Component {
clicked(e) {
const el = e.target;
const eventObj = {
'detail': {
'type': 'downloadlink',
'url': 'react/some/detail/url'
}
};
console.log('clicked - "react" event thrown:');
console.dir(eventObj);
if(window.parent) {
window.parent.dispatchEvent(new CustomEvent('react', eventObj));
}
}
render() {
const {rowIndex, field, data} = this.props;
const link = data[rowIndex][field];
return (
<Cell>
<a onClick={this.clicked} href='#'>{link}</a>
</Cell>
);
}
}

这些元素与Node.js和Angular.js等平台中使用的元素相同。通过导入 JSON 包，这可用于获取设备上的相关组件。

`watchify index.js --verbose -d -t babelify --sourceMapRelative . --outfile=bundle.js`

电网应用及其他

开发 React 网格应用程序要容易得多，可以通过运行以下代码来测试新环境的功能来动态执行这些应用程序。人们可以很容易地看到代码的显着减少，这使得编码元素变得更加简单，并改进了一般的敏捷开发过程。

一个很好的例子是将CSS填充样式与JavaScript按钮的注入，这些按钮可以具有应用程序所需的任意数量的功能。这也有助于在网页或应用程序中引入许多元素。


under a singular head tag.
Ext.define("ExtJSApplication.view.DatePicker", {
id: "componentId",
extend: "Ext.Component",
config: {
reactComp: null
 },
afterRender: function () {
this.setReactComp(this.createReactCmp());
},
createReactCmp: function () {
return ReactDOM.render(
React.createElement(ReactLibrary.DatePicker, {
onDateChange: this.onDateChange.bind(this) 
}), document.getElementById(this.id)
);
},
onDateChange: function () {
// do something...
 }
}
setConfiguration = appName => {
this.getConfiguration(appName).then(module =>
 this.setState(
{
appName,
configuration: module.default
},
this.configurationSetCallback
)
);
};
getConfiguration = appName => {
switch (appName) {
case "/automated_actions":
return import(/* webpackChunkName: "automated_actions" */ `../../configurations/automated_actions`);
case "/audit_groups":
return import(/* webpackChunkName: "audit_groups" */ `../../configurations/audit_groups`);
case "/product_manager":
return import(/* webpackChunkName: "product_manager" */ `../../configurations/product_manager`);
case "/mirroring":
return import(/* webpackChunkName: "mirroring" */ `../../configurations/mirroring`);
case "/adgroup_negative_keywords":
return import(/* webpackChunkName: "adgroup_negative_keywords" */ `../../configurations/adgroup_negative_keywords`);
defalt
return import(/* webpackChunkName: "default_configuration" */ `../../configurations`);
}
};
export default new ConfigurationBuilder()
.withGridName("AUTOMATED_ACTIONS")
.withGridDisplayName("Automated Actions")
.withEntityType("automated action")
.withDefaultSort([{ sort: "asc", colId: "S312001" }])
.withGetColumns("/api/flatview/automated_action/columns_extended/")
.withGetData("/api/flatview/automated_action/")
.withColumnsMapping(columnsMapping)
.withLocalizedValue(getLocalizedValue)
.withActionsData(actionsData)
.withDialogs(dialogs)
.build();

ReactJS的维持情况如何

因此，您的 Web 应用程序已在 ReactJS 上运行，并且每分钟都在快速进行转换。但是跨平台开发和其他应用程序呢？

ReactJS 使用了许多工具，这使得在其他包上使用元素和标签变得更加简单。在以下从用户那里收集数据的商店的代码片段示例中，可以看到id标签和函数的层间有多干净。迁移方案的最大麻烦之一是确保一切按过去的方式工作，并且在迁移后功能或设计没有变化。

由于原生的Javascript架构，在导航，设计，动画和控制方面已经有许多相同的应用程序。虽然迁移往往会改变代码与大型机架构一起设计的语法和一般顺序，但即使迁移到 ReactJS，某些元素和功能也保持不变。对于许多使用 ExtJS 的人来说，下面的代码可能看起来很熟悉，因为 ReactJS 使用相同的语法。它只是更干净，并且具有多用途的触感。


import React, { Component } from 'react';
export default class UsersGrid extends Component {
constructor(props) { 
super(props);
this.store = Ext.create('Ext.data.Store', {
fields: ['email', 'name'], 
data: [ 
{ "id": 1, "email": "", "name": "" }, 
{ "id": 2, "email": "landerson1@tripod.com", "name": "Larry Anderson" },  { "id": 3, "email": "gcarroll2@census.gov", "name": "Gerald Carroll" },  
{ "id": 4, "email": "asimpson3@patch.com", "name": "Angela Simpson" },  { "id": 5, "email": "dmorales4@digg.com", "name": "Debra Morales" } 
]         });
}     render() { 
// create a dom element for the grid's renderTo config
return <div ref="target"/> 
}
componentDidMount() { 
// once the target is rendered, create and attach a grid
this.grid = Ext.create('Ext.grid.Panel', { 
title: 'Users',
height: 500,
width: 800, 
renderTo: this.refs.target, 
store: this.store,
columns: [ 
{ text: 'Email', flex: 1, dataIndex: 'email' }, 
{ text: 'Name', flex: 1, dataIndex: 'name' } 
] 
});
} 
componentWillUnmount() { 
// clean up the grid when this component is removed 
 this.grid.destroy(); 
} 
}

HTML 应用程序呢？由于ReactJS的弹性架构，将ReactJS框架的应用程序与更平衡的实用程序和设计方法相结合的机会更高。对于碰巧知道如何剖析网页的吹毛求疵的人群，检查任何 ReactJS 系统中的元素都会显示类似于下面看到的代码。请注意，即使进行了过渡，法律的结构和语法也没有变化。

由于 ReactJS 比同类产品轻，因此发生故障和其他问题的可能性较小。连接链接和构建查询块也变得更加简单。简而言之，ReactJs 尽管由于迁移的需要而在行业中引起了轰动，但它仍然保持得非常好。


Import React from 'react'; 
import ReactDOM from 'react-dom'; 
import UsersGrid from './UsersGrid';
Ext.onReady(function() {
ReactDOM.render( 
<UsersGrid/>,
document.getElementById('root')
); });
<x-tabpanel> 
<x-panel title="Users" layout="fit">
<x-grid
store={this.store} 
columns={[ 
{ text: 'Email', flex: 1, dataIndex: 'email' },  
{ text: 'Name', flex: 1, dataIndex: 'name' }
]}   /> 
</x-panel>
<x-panel title="Something Else">
// various other content here 
 </x-panel> 
</x-tabpanel>

怀疑 ReactJS

一些开发人员可能会建议，看待 ReactJS 的最佳方式是作为一把瑞士军刀，它可以执行多种功能，同时紧凑且始终可访问。对于人群中似乎仍然对扩展持怀疑态度的较晚条目，以下是在考虑其使用时弹出的常见查询的一些答案。

ReactJS与Angular2等原生ExtJS组件不同，因为它们缺乏路由系统。用户必须根据需要重写目标框架中的一些自定义组件。然而，相反，关于可用于实现包管理器的构建工具的数量，有无穷无尽的选择列表。ReactJS也使用像Babel JS这样的转译器或polyfill。

类通常使用 ES6+ 类扩展进行定义，该扩展包括 React 和 JSX 组件。与 Extjs 不同，React 类在设置域中初始化的方式不同，必须手动添加。脚手架元素的以下代码很好地反映了这一点：-

npm install -g create-react-app 
create-react-app my-app
cd my-app/
npm start
sencha app init --ext@6.5.1 --modern MyApp my-app
sencha app watch 
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div> 
);
}
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.App {
text-align: center;
} 
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 80px;
}
.App-header { 
background-color: #222;
height: 150px; 
padding: 20px;
color: white;
} 
.App-intro {
font-size: large; 
} 
@keyframes App-logo-spin {
from { transform: rotate(0deg); } 
to { transform: rotate(360deg); }
}

获取引用和其他问题

使用 Extjs 获取引用需要重组 CSS 工作表中的标签元素，然后在 Javascript 部分进行更改。使用 Ext JS，有很多方法可以获取对特定组件的引用。然而，在ExtJS方面，有一些细微的差异是不容忽视的。用户会发现 ReactJS 中的引用系统更具声明性。

让我们继续讨论组件属性。例如，假设有一个列表或选项卡带有边框、填充或边距，必须调整为另一种颜色。这些更改可以很容易地表现出来，因为 React 组件具有在元素本身上设置的属性。但是，如果用户碰巧在运行时更改了它们怎么办？在运行时进行这些更改只会导致在浏览器中再次替换组件。但是，系统为在组件属性中获取声明性更改而经历的步骤数通常太长，并且需要额外的编码。

更自然的替代方法是定义一个全局变量或状态对象，将组件的属性传递给其 props。由于 ReactJS 仅提供视图，因此用户可以安装状态管理解决方案，例如 Redux 或 Mobx。React 社区还通过完全专注于允许用户随时随地推送和拉取代码的 GitHub 功能来简化代码共享过程。

由于互联网上JSON文件的复杂性，共享组件应用程序和更重要的元素似乎风险更大，但最初的用户表示此类问题似乎很少见。但是，从文件扩展名为 .json 的远程源获取数据时可能会出现问题。处理大量数据集的应用程序构建者和编码人员可能会发现从同一终端窗口加载每个数据集很乏味。幸运的是，ReactJS 库支持多表视图，并且还具有合理的扩展，用于在关系数据库管理系统上执行操作。

用户可以使用 loadRecord（）方法将数据文件直接导入到可以根据 CSS 元素设置样式的表中。鉴于网站支持它，这也为简单的拖放让路。

出现的一个重要问题是 React 是否有任何特定于库的事件。虽然主 shell 客户端不允许任何此类功能，但用户可以使用 DOM 事件并在组件中安装自定义事件。可以进一步对活动进行编码，以使用库组件和元素来设置 React 应用程序的样式。

游戏可以修改为HTML支持的模板系统。React 配备了服务器端渲染（SSR）解决方案，例如 renderToString 和 renderToNodeStream（react-dom 包），非常适合具有多个窗格且需要快速加载时间的应用程序。

超越 ExtJS 的优势

人们可以看到将 Extjs 组件迁移到 ReactJS 平台的功能以及它提供的优势。作为结束语，请记住，完全迁移可能不是最佳选择，尤其是当员工和 IT 人员在大型机上工作时。

查看 ReactJS 中的 localStorage 库，以了解有关如何在不篡改任何现有进程的情况下存储数据和代码的更多信息。强烈建议创建各种元素以及子类、插件和 mixins 的网络图，以避免混淆。始终从最小的组件开始迁移过程，然后转到更广泛的域。

如果转移到新的 ReactJS 代码库，请使用将定义导入的唯一元素的 MVP 功能。但是，Ext JS为每个按钮，标签，列表，复选框和文本框实现组件的方式存在缺点。用户可能会被毫无用处的垃圾代码所淹没。但是，可以使用一些缩进和代码编辑来修复如此广泛的系统。

标签：ExtJS,HTML,Javascript
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9