From 1d0ad241cc1d26942635a87279595375b324b44d Mon Sep 17 00:00:00 2001 From: anuoua Date: Tue, 11 Apr 2023 14:57:57 +0800 Subject: [PATCH] doc: update README.md --- README-zh_CN.md | 38 +++++++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/README-zh_CN.md b/README-zh_CN.md index 607e066..9720c4a 100644 --- a/README-zh_CN.md +++ b/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(, 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,7 +240,7 @@ 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 @@ -239,7 +248,6 @@ render( - h - h2 (for jsx2) - Fragment - - FGMT: it is Fragment alias, will be removed when vite support `jsxImportSource` - createPortal - createContext - render