介绍

Dojo 鼓励编写简单的、模块化组件，并称之为部件，它仅实现应用程序大量需求中的单一职责。部件被设计成可在各种场景中组合和复用，能以响应的方式连接在一起，以满足更复杂的 web 应用程序需求。

部件使用渲染函数返回的虚拟节点描述其预期的结构。然后，在应用程序运行时，Dojo 的渲染系统会持续地将部件每一层渲染的内容转换为对应的、高效的 DOM 更新。

功能描述
响应式设计Dojo 部件是围绕响应式的核心原则设计的，这样在应用程序中传播变化的状态时，就可以确保可预见的、一致的行为。
封装部件创建独立、封装的部件，这些部件可通过各种配置组合在一起，从而创建出复杂且漂亮的用户界面。
DOM 抽象框架提供了恰当的抽象，这意味着 Dojo 应用程序不需要直接与命令式 DOM 打交道。
高效渲染Dojo 的渲染系统可以检测出部件层次结构中特定子节点的状态变化，这样当更新发生时，只需要高效的重新渲染应用程序中受影响的部分。
企业级跨领域的应用程序需求，如国际化、本地化和样式主题，可以轻松地添加到用户创建的部件中。

基本用法

定义部件

src/widgets/MyWidget.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  3. const factory = create();
  5. export default factory(function MyWidget() {
  6.     return <div>Hello from a Dojo widget!</div>;
  7. });

设置部件属性

  • 为了使部件能更好的复用，需要使用类型化的属性接口来抽象出 state, 配置和事件处理函数
  • 使用 create 工厂为部件提供中间件
  • 通过为节点指定 key 属性，来区分同一类型的兄弟元素，此示例中是两个 div 元素。这样当应用程序中的状态发生变化，需要更新 DOM 节点时，框架就可以高效、准确地定位到相关元素

src/widgets/Greeter.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import icache from '@dojo/framework/core/middleware/icache';
  4. const factory = create({ icache }).properties<{
  5.     name: string;
  6.     onNameChange?(newName: string): void;
  7. }>();
  9. export default factory(function Greeter({ middleware: { icache }, properties }) {
  10.     const { name, onNameChange } = properties();
  11.     let newName = icache.get<string>('new-name') || '';
  12.     return (
  13.         <div>
  14.             <div key="appBanner">Welcome to a Dojo application!</div>
  15.             {name && <div key="nameBanner">Hello, {name}!</div>}
  16.             <label for="nameEntry">What's your name?</label>
  17.             <input
  18.                 id="nameEntry"
  19.                 type="text"
  20.                 value={newName}
  21.                 oninput={(e: Event) => {
  22.                     icache.set('new-name', (e.target as HTMLInputElement).value);
  23.                 }}
  24.             />
  25.             <button
  26.                 onclick={() => {
  27.                     icache.set('new-name', undefined);
  28.                     onNameChange && onNameChange(newName);
  29.                 }}
  30.             >
  31.                 Set my name
  32.             </button>
  33.         </div>
  34.     );
  35. });

组合部件

  • 通过将部件组合在一起形成多层结构，以满足更复杂的应用程序需求
  • 为子部件提供 state 和事件处理函数等属性(properties)
  • 使用 icache 中间件管理 state，并当状态变更时，失效或重新渲染受影响的部件

src/widgets/NameHandler.tsx

  1. import { create, tsx } from '@dojo/framework/core/vdom';
  2. import icache from '@dojo/framework/core/middleware/icache';
  4. import Greeter from './Greeter';
  6. const factory = create({ icache });
  8. export default factory(function NameHandler({ middleware: { icache } }) {
  9.     let currentName = icache.get<string>('current-name') || '';
  10.     return (
  11.         <Greeter
  12.             name={currentName}
  13.             onNameChange={(newName) => {
  14.                 icache.set('current-name', newName);
  15.             }}
  16.         />
  17.     );
  18. });

渲染到 DOM 中

  • 使用框架中的 renderer 函数将部件挂载到 DOM 中
  • 也可以对 Dojo 应用程序在页面中呈现的位置做更多控制，以便稳步地采用较小的子组件，甚至支持一个页面中存在多个应用程序或框架

src/main.tsx

  1. import renderer, { tsx } from '@dojo/framework/core/vdom';
  3. import NameHandler from './widgets/NameHandler';
  5. const r = renderer(() => <NameHandler />);
  6. r.mount();