Taro之View和Block

最新推荐文章于 2024-08-03 00:27:35 发布

shifff

最新推荐文章于 2024-08-03 00:27:35 发布

阅读量318

点赞数 3

文章标签： taro 前端 javascript

本文链接：https://blog.csdn.net/shifff/article/details/140827280

版权

思考场景：在一次写布局的时候，想把View换成Block，来区分逻辑上的组件分割，但是把原本View上的样式写在Block上，发现样式不生效了，有了以下的思考。

在 Taro 中，View 和 Block 是非常常用的组件，但它们在本质上和使用场景上有一些显著的不同，导致相同的样式可能会有不同的效果。

View 组件

基础组件：View 是一个基础组件，相当于 HTML 中的 div 标签。
支持样式：View 组件支持各种样式属性，类似于 HTML 的 div 标签，你可以为其添加任意的样式。
布局特性：View 组件会参与布局和渲染过程。

Block 组件

辅助组件：Block 是一个辅助组件，本身不渲染实际的 DOM 元素，相当于 React 的 Fragment。
不支持样式：Block 本身不能应用任何样式，因为它不会渲染成实际的 DOM 元素。
组织结构：由于 Block 只是用来包裹和组织子组件，因此所有样式和布局特性只能影响其内部的子组件，而不能影响它本身。

样式效果不同的原因

因为 Block 本质上是一个辅助组件，不参与实际的 DOM 渲染和布局，任何直接应用在 Block 上的样式都不会起作用。而 View 是一个实际的 DOM 元素，因此可以应用样式并参与布局。

示例

使用 `View`

import React from 'react';
import { View } from '@tarojs/components';
import styles from './index.module.scss'; // 假设你有这个样式文件

const MyComponent: React.FC = () => {
  return (
    <View className={styles.container}>
      <View className={styles.title}>标题</View>
      <View className={styles.content}>内容</View>
    </View>
  );
};

export default MyComponent;

使用 `Block`

import React from 'react';
import { View, Block } from '@tarojs/components';
import styles from './index.module.scss'; // 假设你有这个样式文件

const MyComponent: React.FC = () => {
  return (
    <View className={styles.container}>
      <Block>
        <View className={styles.title}>标题</View>
        <View className={styles.content}>内容</View>
      </Block>
    </View>
  );
};

export default MyComponent;

样式文件 `index.module.scss`

.container {
  display: flex;
  flex-direction: column;
}

.title {
  font-weight: bold;
  font-size: 24px;
}

.content {
  padding: 20px;
  background-color: #f0f0f0;
}

在以上示例中：

.container、.title、.content 样式均能够应用在 View 组件上，因为它们是实际渲染的 DOM 元素。
Block 组件会被忽略，样式不能直接应用于 Block，但它确实会影响其内部的子组件组织方式。

内在区别与使用场景

组织结构：
- Block 主要用于在不引入额外 DOM 的情况下组织 JSX 结构。
- View 主要用于需要 DOM 元素（如 div）进行布局展示的场景。
性能考虑：
- Block 不生成实际 DOM 元素，可以减少不必要的节点渲染。
- View 生成实际 DOM 元素，有具体的样式和布局属性。