chore: update README.md

anuoua · Sep 4, 2022 · 959b626 · 959b626
1 parent 99e47d2
commit 959b626
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 94 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -15,32 +15,17 @@ npm i @unis/unis
 ## Vite 开发
 
 ```jsx
-npm i vite rollup-plugin-reassign -D
+npm i vite @unis/vite-preset -D
 ```
 
 vite.config.js
 
 ```jsx
 import { defineConfig } from "vite";
-import { reassign } from "rollup-plugin-reassign";
+import { unisPreset } from "@unis/vite-preset";
 
 export default defineConfig({
-  esbuild: {
-    jsxFactory: 'h',
-    jsxFragment: 'Fragment'
-  },
-  reassign({
-    include: ["**/*.(t|j)s?(x)"],
-    targetFns: {
-      "@unis/unis": {
-        use: 1,
-        useState: 1,
-        useProps: 1,
-        useContext: 1,
-        useReducer: 2,
-      },
-    },
-  })
+  plugins: [unisPreset()]
 });
 ```
 
@@ -51,16 +36,14 @@ index.html
   ...
   <body>
     <div id="root"></div>
-    <script type="module" src="./index.jsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>
 ```
 
-index.jsx
-
-```jsx
-import { h } from '@unis/unis'
+index.tsx
 
+```tsx
 function App() {
   return () => (
     <div>
@@ -74,14 +57,14 @@ render(<App />, document.querySelector('#root'))
 
 ## 用法
 
-Unis 并不是 React 的复刻，而是保留了 React 使用体验的全新框架，Unis 的用法很简单，熟悉 React 的也可以很快上手。
+Unis 并不是 React 的复刻，而是保留了 React 使用体验的全新框架，unis 的用法很简单，熟悉 React 的可以很快上手。
 
 ### 组件
 
-在 Unis 中组件是一个高阶函数。
+在 unis 中组件是一个高阶函数。
 
 ```jsx
-import { h, render } from '@unis/unis'
+import { render } from '@unis/unis'
 
 const App = () => {
   return () => ( // 返回一个函数
@@ -96,15 +79,15 @@ 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 编译策略，rollup-plugin-reassign 帮我们补全了 Callback Reassign 代码。
 
 ```jsx
 const App = () => {
   let [msg, setMsg] = useState('hello');
   /**
    * Compile to:
    * 
-   * let [msg, setMsg] = useState('hello', ([$0, $1]) => { msg = $0, setMsg = $1 });
+   * let [msg, setMsg] = useState('hello', ([$0, $1]) => { msg = $0; setMsg = $1 });
    */
   return () => (
     <div>{msg}</div>
@@ -114,7 +97,7 @@ const App = () => {
 
 ### Props
 
-Unis 直接使用 props 会无法获取最新值，所以 Unis 提供了 useProps。
+Unis 直接使用 props 会无法获取最新值，所以 unis 提供了 useProps。
 
 ```jsx
 const App = (p) => {
@@ -132,7 +115,7 @@ const App = (p) => {
 
 ### 副作用
 
-Unis 保留了和 React 基本一致的 useEffect ，但 deps 是一个返回数组的函数。
+Unis 保留了和 React 基本一致的 `useEffect` 和 `useLayoutEffect` ，但 deps 是一个返回数组的函数。
 
 ```jsx
 const App = () => {
@@ -155,23 +138,23 @@ const App = () => {
 
 ### 自定义 hook
 
-Unis 的自定义 hook ，在有返回值的场景需要搭配 use 方法使用，原因则是前面提到的 Callback Reassign 编译策略。
+Unis 的自定义 hook ，在有返回值的场景需要搭配 `use` 方法使用，原因则是前面提到的 Callback Reassign 编译策略。自定义 hook 的命名我们约定以小写字母 `u` 开头，目的是用于区分其他函数，同时在 IDE 的提示下更加方便的导入。
 
 ```jsx
-// 创建 hook，hook 为高阶函数
-const Count = () => {
+// 创建自定义 hook 高阶函数
+const uCount = () => {
   let [count, setCount] = useState(0);
   const add = () => setCount(count + 1);
   return () => [count, add]
 }
 
 // 通过 `use` 使用 hook
 function App() {
-  let [count, add] = use(Count());
+  let [count, add] = use(uCount());
   /**
    * Compile to:
    * 
-   * let [count, add] = use(Count(), ([$0, $1]) => { count = $0; add = $1 });
+   * let [count, add] = use(uCount(), ([$0, $1]) => { count = $0; add = $1 });
    */
   return () => (
     <div onClick={add}>{count}</div>
@@ -184,7 +167,7 @@ function App() {
 ### Fragment
 
 ```jsx
-import { h, Fragment } from '@unis/unis'
+import { Fragment } from '@unis/unis'
 
 function App() {
   return () => (
@@ -199,7 +182,7 @@ function App() {
 ### Portal
 
 ```jsx
-import { h, createPortal } from '@unis/unis'
+import { createPortal } from '@unis/unis'
 
 function App() {
   return () => createPortal(
@@ -212,7 +195,7 @@ function App() {
 ### Context
 
 ```jsx
-import { h, createContext, render } from '@unis/unis'
+import { createContext, render } from '@unis/unis'
 
 const ThemeContext = createContext('light')
 
@@ -245,6 +228,7 @@ render(
   - h
   - h2 (for jsx2)
   - Fragment
+  - FGMT: it is Fragment alias, will be removed when vite support `jsxImportSource`
   - createPortal
   - createContext
   - render
@@ -256,6 +240,7 @@ render(
   - useState
   - useReducer
   - useContext
+  - useMemo
   - useEffect
   - useRef
   - useId