ورقة غش إطار عمل Deku الوظيفي للـ Virtual DOM

Deku هي مكتبة خفيفة وأنيقة تعتمد على دوال JavaScript النقية لبناء واجهات المستخدم عبر تقنية Virtual DOM.

المكونات الوظيفية ودورة الحياة (Functional Components)

/** @jsx element */
import { element } from 'deku';

function render({ props, children, context, path }) {
  return (
    <div class="card" hidden={props.hidden} style={{ color: context.theme.color }}>
      <h2>{props.title}</h2>
      {children}
    </div>
  );
}

function onCreate({ props, dispatch, path }) {
  // Triggered on component mount
}

function onUpdate({ props, nextProps, dispatch }) {
  // Triggered when props change
}

function onRemove({ props, dispatch }) {
  // Triggered on component unmount
}

export default { render, onCreate, onUpdate, onRemove };

---

التصيير والتكامل مع مخزن Redux

import { createStore } from 'redux';
import { dom, element } from 'deku';
import App from './app';

const store = createStore(reducer);

// Bind renderer to DOM mounting container
const render = dom.createRenderer(document.getElementById('root'), store.dispatch);

// Subscribe to store updates
function update() {
  render(<App state={store.getState()} />, { theme: { color: '#333' } });
}

store.subscribe(update);
update();

---

أوراق غش ذات صلة

• Virtual-DOM
• Redux