Skip to content

Commit bdf2602

Browse files
committed
docs: 补充文档
1 parent 5d785cf commit bdf2602

File tree

1 file changed

+55
-0
lines changed

1 file changed

+55
-0
lines changed

README.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,3 +196,58 @@ const code = parse(jsxCode, [cssCode1, cssCode2, ...], {
196196
| :root | :root | 选择文档的根元素 ||
197197
| :checked | input:checked | 选择每个选中的输入元素 ||
198198
| ... | | 其他 ||
199+
200+
## 常见问题
201+
202+
### 1. 跨组件传递 className、style
203+
204+
#### ❌ 错误做法
205+
206+
比如业务上针对`@tarojs/components`的组件进行重导出,如引入了`Image`,对其进行了**二次封装**,然后通过一个入口统一导出如:
207+
208+
```js
209+
// ./components.js
210+
import { View, Text } from "@tarojs/components";
211+
212+
// 这里的Image实际上是对TaroImage的二次封装,一样的暴露出style和classname使用
213+
export { default as Image } from "./xxxx";
214+
```
215+
216+
- 在 Taro 编译的视角来看`<Image/>`已经是一个**自定义组件**,并且它接收了`className`,也就说明了它的类名其实是往下传递了,我们会在运行时进行**样式合成**
217+
- `<View/>``<Text/>`其实是原封不动的直接导出的,本质上它并不是一个自定义组件,所以 Taro 在编译时,会在**编译阶段将样式赋予上去**
218+
219+
```js
220+
// 注意:这里的组件从统一入口进行导入
221+
import { View, Image } from "./components";
222+
223+
function Index() {
224+
return (
225+
<View className="xxx">
226+
<Image className="xxxxxx" />
227+
</View>
228+
);
229+
}
230+
```
231+
232+
但是问题来了,这里在实际使用时,`<View/>``<Image/>`都是通过`'./components'`导入,编译阶段无法知道他们是**Taro 组件**还是**自定义组件**,顾在实际运行时,都会视为**自定义组件**对待
233+
234+
因为**自定义组件**是在**运行时动态合成样式**,顾性能远不及**Taro 组件**
235+
236+
#### ✅ 正确做法
237+
238+
如果 Taro 组件没有二次封装,我们建议从`@tarojs/components`导入,提供编译的优化效果
239+
240+
```js
241+
// 自定义组件引入
242+
import { Image } from "./components";
243+
// Taro组件引入
244+
import { View } from "@tarojs/components";
245+
246+
function Index() {
247+
return (
248+
<View className="xxx">
249+
<Image className="xxxxxx" />
250+
</View>
251+
);
252+
}
253+
```

0 commit comments

Comments
 (0)