UI5和React比较

最新推荐文章于 2024-05-23 09:48:34 发布

原创最新推荐文章于 2024-05-23 09:48:34 发布 · 449 阅读

0 ·

CC 4.0 BY-SA版权

Fiori 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了UI5与React在实现数据绑定方面的差异，通过一个简单的列表展示与详细内容显示的例子，展示了React如何实现类似UI5中element binding的效果。UI5基于MVC和JQuery，而React则采用声明式开发，更倾向于自动更新UI。虽然React在业界被认为是更先进的开发方式，但根据具体项目和团队熟悉度，UI5的TCO可能相当。

通过React来实现类似UI5中element binding的效果

UI5整体采用了MVC的设计，提供了单向的、双向的，各种数据绑定，有属性绑定，有列表绑定，还有element binding。

现在流行的技术框架和语言都采用”声明式“的开发方式，比如Google的Flutter, Apple的Swift UI,还有Facebook的React。

下面我来用React来实现和之前类似的效果，上面是一个列表，点击某行，下面展示详细内容。用这个非常简单的小例子，来看看两者实现的思路不同。界面采用Fundamental Style的设计。

UI

主要包含两个函数组件，一个列表和一个表单:

EmployeeList.js:

import React from 'react';

export default function EmployeeList({employees, onSelect}) {

    return (<ul class="fd-list">
      {
           employees.map(
            emp => <li class="fd-list__item">
            <span class="fd-list__title">{emp.Name}</span>
             <span class="fd-list__secondary fd-has-color-status-1">{emp.Salary}</span>
        </li>
        )
      }
    </ul>);
}

export function Employee({employee}) {
    return (

        <form class="fd-form">
            <div class="fd-form-item">
                <br />
                <br />
                <label class="fd-form-label" for="input-1b">name:</label>
                <input class="fd-input fd-input--compact" type="text" id="input-1b" placeholder="Field placeholder text" value={employee.Name}/>
                <label class="fd-form-label" for="input-1b">salary:</label>
                <input class="fd-input fd-input--compact" type="text" id="input-1b" placeholder="Field placeholder text" value={employee.Salary}/>
  
            </div>
        </form>
    );
}

主页面，添加事件函数

EmployeeMain.js:

import React, { useState } from 'react';
import EmployeeList, { Employee } from './EmployeeList';
import data from './employee.json';

export default function EmployeeMain() {

    const [emp, setEmp] = useState(data[0]);

    const onSelect = ID => {

        setEmp(data.filter(d => d.ID === ID)[0]);
    };

    return (
        <div>
            <EmployeeList employees={data} onSelect={onSelect} />
            <Employee employee={emp} />
        </div>
    );
}

修改EmployeeList.js，添加事件监听：

return (<ul class="fd-list">
      {
           employees.map(
            emp => <li class="fd-list__item" onClick={e => {onSelect(emp.ID)}}>
            <span class="fd-list__title">{emp.Name}</span>
             <span class="fd-list__secondary fd-has-color-status-1">{emp.Salary}</span>
        </li>
        )
      }
    </ul>);