Context

上下文也是 Gyron 中的一个重要部分，很多功能都是依靠上下文进行实现。比如 Router 库提供的 userRouter，还比如 Redux 库提供的 useStore 都是通过上下文信息实现的。

Provide & Inject

有的时候我们可能不关心组件中间发生了什么，而是需要知道上上层组件的内容，表单的数据管理就是一个很好的例子。

表单数据传递往往会遇到层级问题，中间可能会穿插多个 layout 组件进来，有的时候又会忘记将数据往下进行传递，我们可以通过 Provide 和 Inject 进行跨组件通讯。

form.jsx
import { useReactive, useProvide, FC } from 'gyron'
import { FormItem } from './formItem'

const Form = FC(() => {
  const state = useReactive({
    value: 'Gyron.js',
  })


  useProvide()('form-data', state)


  return <FormItem></FormItem>
})

我们先声明了一个 Form 表单组件，使用了一个通用的 FormItem 组件管理表单输入的每一项。

formItem.jsx
import { Input, FC } from './input'

const FormItem = FC(() => {
  return <Input />
})

FormItem 在这里只是为了简单表明中间有一个层级，实际在使用过程中可能会遇到更多的组件嵌套。

input.jsx
import { useInject, FC } from 'gyron'

const Input = FC(() => {

  const state = useInject()('form-data')


  return (
    <input
      value={state.value}
      onChange={(e) => (state.value = e.target.value)}
    />
  )
})

Input 组件使用 useInject 接收 Form 表单传递过来的数据，然后在这里对数据进行更改。

RootContext

RootContext 主要服务于第三方库的开发者，它需要结合 createPlugin 方法一起使用。更详细的信息可以阅读链接里的内容。插件