这个框架让尤雨溪&Dan直呼厚礼蟹大家好，我是anuoua，上次写了篇文章《每个人心中都有一款自己的前端框架》，大家都知

大家好，我是anuoua，上次写了篇文章《每个人心中都有一款自己的前端框架》，大家都知道有个新的框架诞生了，今天这个框架正式开源了。

Unis 框架

Unis，一款融合了 Vue 和 React 特点的框架，如果你喜欢 Vue 的 @vue/reactivity，同时又喜欢 React （讨厌hooks），那么你会喜欢上它。

地址在这里 Github，欢迎一键三连 🤩。

特点

使用 Composition API，Vue 3 用户将会非常熟悉。
使用 JSX ，兼容 React 用法，Typescript 支持非常友好。
只有函数形态的组件，和 React 函数组件接近。
只运行一次（相比hooks）。
组件级别的精确更新。
简单易用，精简了 Vue 中过滤器、指令等概念，难度介于 Vue 和 React 之间，找到一个很好的平衡点。

组件

Unis 的组件和 React 基本一致，唯一的区别是 Unis 需要返回一个函数，和 Vue 3 的 setup 一样，这种形态的组件对于 Vue 和 React 中一部分“邪教粉”来说简直就是离经叛道，这种事情只能交给我这种没有包袱的人来做了。

function App(props) {
  return () => (
    <div>{props.title}</div>
  )
}

App.propTypes = {} // WIP
App.defaultProps = {} // WIP

render(<App title={'demo'} />, document.body)

Composition API

Vue 用户最熟悉不过了，不熟悉的可以查看组合式API，很多用法都一样，也有例外比如 Unis Context API 是 React 形态，并没有使用 Vue 中类似概念的 Provide/Inject。

响应式 API

function App() {
  const title = ref('demo')
  const state = reactive({ content: 'hello world!' })
 
  watch(title, (old, cur) => {
    console.log(old, cur);
  })

  return () => (
    <div>
      <h1>{title.value}</h1>
      <div>{state.content}</div>
    </div>
  )
}

生命周期 API，和 Vue 基本一致，可以查看生命周期。

onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onRenderTracked
onRenderTriggered
onErrorCaptured

Fragment

代码片段是基本特性。

function App() {
  return () => (
    <Fragment>
      <div>hello</div>
      <p>world</p>
    </Fragment>
  )
}

Teleport

怎么能少的了 Teleport 的支持，弹框，tooltip 等 UI 控件强烈依赖此特性。

function App() {
  const container = document.querySelector('#modal')
  return () => (
    <Teleport to={container}>
      <div>hello</div>
    </Teleport>
  )
}

Context API (实验中)

Context API 选择的是 React 形态，这种方式相对于 Provider/Inject 对类型提示更友好。

import { createContext } from '@unis/unis'

const SomeCtx = createContext()

function App() {
  const ctxState = SomeCtx.getValue()
  return () => (
    <div>{ctxState.context}</div>
  )
}

render(
  <SomeCtx.Provider value={{ context: 'hello' }}>
    <App />
  </SomeCtx.Provider>
, document.body)

Suspense （WIP）

React 推出的用于数据加载的 Suspense 特性挺诱人，所以 Unis 也是需要支持的，异步组件也是基于此特性，目前还在实现中。

这个框架让尤雨溪&Dan直呼厚礼蟹

Unis 框架

特点

组件

Composition API

Fragment

Teleport

Context API (实验中)

Suspense （WIP）

Todo example

Demo online

完