Context

定义 Context

设计思想

1. 参考 React Context 做了改进，在开始定义时确认好数据的类型。因此，无论是在组件向下透传数据还是获取上层组件数据都能有良好的提示，解决了开发者在过程中乱透传数据的问题；
2. 禁止在异步任务中使用，以确保该 API 能获取当前组件；
3. 只能在子孙层组件获取到父组件数据，符合单项数据流。跨同级组件无法传递数据；
4. 不建议使用 Context 来代替 Store：Context 更适合管理少量的数据，而且跨层级较多容易紊乱。

// context.ts
import { createContext, RefImpl } from 'pl-vue';

const levelContext = createContext<{
  count: number

  // 组件透传数据，组件卸载后数据会被清理
  num?: RefImpl<number>
  add?: Function
}>({
  count: 0,  // 初始数据
});

使用 Context

// home.tsx
import { h, ref } from 'pl-vue';
import { levelContext } from './context';
import Comp from './comp';

export default function() {
  const num = ref(0);
  function add() {
    num.value++;
  }
  levelContext.provide({ num, add });

  return <div>
    <h2>{() => num.value}</h2>
    <Comp />
  </div>
}

// comp.tsx
import { h } from 'pl-vue';
import { levelContext } from './context';

export default function() {
  const { count, num, add } = levelContext.inject();

  return <div>
    <button onClick={() => add()}>add</button>
  </div>
}