doc: update README.md

README-zh_CN.md

@@ -9,7 +9,7 @@ Unis 是一款比 React 更简单易用的前端框架
 ## 安装
 
 ```bash
-npm i @unis/unis
+npm i @unis/core @unis/dom
 ```
 
 ## Vite 开发
@@ -21,8 +21,8 @@ npm i vite @unis/vite-preset -D
 vite.config.js
 
 ```jsx
-import { defineConfig } from "vite";
-import { unisPreset } from "@unis/vite-preset";
+import { defineConfig } from "vite"
+import { unisPreset } from "@unis/vite-preset"
 
 export default defineConfig({
   plugins: [unisPreset()]
@@ -35,7 +35,7 @@ tsconfig.json
 {
   "compilerOptions": {
     "jsx": "react-jsx",
-    "jsxImportSource": "@unis/unis"
+    "jsxImportSource": "@unis/core"
   }
 }
 ```
@@ -75,7 +75,7 @@ Unis 并不是 React 的复刻，而是保留了 React 使用体验的全新框
 在 unis 中组件是一个高阶函数。
 
 ```jsx
-import { render } from '@unis/unis'
+import { render } from '@unis/dom'
 
 const App = () => {
   return () => ( // 返回一个函数
@@ -90,11 +90,13 @@ render(<App />, document.querySelector('#root'))
 
 ### 组件状态
 
-Unis 中的 `useState` 用法和 React 相似，但是要注意的是 unis 中 `use` 系列方法，定义类型必须为 `let` ，因为 unis 使用了 Callback Reassign 编译策略，rollup-plugin-reassign 帮我们补全了 Callback Reassign 代码。
+Unis 中的 `useState` 用法和 React 相似，但是要注意的是 unis 中 `use` 系列方法，定义类型必须为 `let` ，因为 unis 使用了 Callback Reassign 编译策略，[@callback-reassign/rollup-plugin](https://github.com/anuoua/callback-reassign) 帮我们补全了 Callback Reassign 代码。
 
 ```jsx
+import { useState } from "@unis/core"
+
 const App = () => {
-  let [msg, setMsg] = useState('hello');
+  let [msg, setMsg] = useState('hello')
   /**
    * Compile to:
    * 
@@ -111,6 +113,8 @@ const App = () => {
 Unis 直接使用 props 会无法获取最新值，所以 unis 提供了 useProps。
 
 ```jsx
+import { useProps } from "@unis/core"
+
 const App = (p) => {
   let { some } = useProps(p)
   /**
@@ -129,6 +133,8 @@ const App = (p) => {
 Unis 保留了和 React 基本一致的 `useEffect` 和 `useLayoutEffect` ，但 deps 是一个返回数组的函数。
 
 ```jsx
+import { useEffect } from "@unis/core"
+
 const App = () => {
 
   useEffect(
@@ -152,16 +158,18 @@ const App = () => {
 Unis 的自定义 hook ，在有返回值的场景需要搭配 `use` 方法使用，原因则是前面提到的 Callback Reassign 编译策略。自定义 hook 的命名我们约定以小写字母 `u` 开头，目的是用于区分其他函数，同时在 IDE 的提示下更加方便的导入。
 
 ```jsx
+import { use, useState } from "@unis/core"
+
 // 创建自定义 hook 高阶函数
 const uCount = () => {
-  let [count, setCount] = useState(0);
-  const add = () => setCount(count + 1);
+  let [count, setCount] = useState(0)
+  const add = () => setCount(count + 1)
   return () => [count, add]
 }
 
 // 通过 `use` 使用 hook
 function App() {
-  let [count, add] = use(uCount());
+  let [count, add] = use(uCount())
   /**
    * Compile to:
    * 
@@ -178,7 +186,7 @@ function App() {
 ### Fragment
 
 ```jsx
-import { Fragment } from '@unis/unis'
+import { Fragment } from '@unis/core'
 
 function App() {
   return () => (
@@ -193,7 +201,7 @@ function App() {
 ### Portal
 
 ```jsx
-import { createPortal } from '@unis/unis'
+import { createPortal } from '@unis/core'
 
 function App() {
   return () => createPortal(
@@ -206,7 +214,8 @@ function App() {
 ### Context
 
 ```jsx
-import { createContext, render } from '@unis/unis'
+import { createContext } from '@unis/core'
+import { render } from '@unis/dom'
 
 const ThemeContext = createContext('light')
 
@@ -231,15 +240,14 @@ render(
 完整项目请查看
 
 - [packages/unis-example](packages/unis-example) Todo 示例
-- [stackbliz](https://stackblitz.com/edit/vitejs-vite-4cfy2b) 试用
+- [stackbliz](https://stackblitz.com/edit/vitejs-vite-8hn3pz) 试用
 
 ## API
 
 - Core
   - h
   - h2 (for jsx2)
   - Fragment
-  - FGMT: it is Fragment alias, will be removed when vite support `jsxImportSource`
   - createPortal
   - createContext
   - render