2021.11.9

Teafulソース分析

ステータス管理ライブラリ.活発な就活では、フレームワークを使わずに簡単なアプリケーションを開発する難題に直面する企業が多い.reactを使ったことがありますし、直接DOMを操作するよりもJSXというスタイルのコードを使うほうがずっときれいだと思いますので、似たようなJSXを作成して使いました.次は結果

import $ from './elements.js';

import { useStore } from './store.js';

export default function App() {
  const [state, dispatch] = useStore();

  const { count } = state;

  const handleClickPlus = () => {
    dispatch({ type: 'plus' });
  };

  const handleClickMinus = () => {
    dispatch({ type: 'minus' });
  };

  return (
    $.div({}, [
      $.h1({}, ['Simple Counter']),
      $.p({}, [count]),
      $.p({}, [
        $.button({ onClick: handleClickPlus }, ['plus']),
        $.button({ onClick: handleClickMinus }, ['minus']),
      ]),
    ])
  );
}

GitHub: https://github.com/gringrape/vanilla-js-projects/tree/main/03-functional-component-counter
ここでブラインドポイントは、ステータスが更新されると、すべての構成部品に新しいインスタンスが作成されます.反応物の調和過程に比べて、非常に非効率な過程にすぎない.

/// store
const initialState = {
  count: 0,
};

const reducer = (state, action) => ({
  plus: () => ({ count: state.count + 1 }),
  minus: () => ({ count: state.count - 1 }),
})[action.type]();

const store = {
  updateView: null,
  state: initialState,
  dispatch(action) {
    this.state = reducer(this.state, action);
    this.updateView();
  },
  initiate({ update }) {
    this.updateView = update;
  },
};

export const useStore = () => [
  store.state,
  store.dispatch.bind(store),
];

export default store;


/// view 업데이트의 정체...
function update() {
  root.innerHTML = ''; // 모두 나가주세요...
  root.appendChild(
    App(),
  );
}

ドームの論理を必要な位置だけ更新する必要がある.実は最初はちょっと違う様子を想定していました.

反応ユニットは上のように木構造(ルート,階層の図形)を構成しているので,特定のノードの値をusStateのようなhookに一緒に渡すと,対応するviewを殺す.
いずれにしても、やるべきことは簡単です.使用状態のノードの下を更新します.インスタンス参照を購読または転送すればよい.teafulでどのような方法が使われているかを理解してください.

GitHub: https://github.com/teafuljs/teaful/blob/master/package/index.js