Vue vs Reactjs之 props

关于 props的一些相同点

• props是用于在组件之间传递数据的一种机制。通过 props，父组件可以向子组件传递数据，并且子组件可以接收和使用这些数据。

• props 都遵循单向数据流的原则。这意味着父组件可以向子组件传递 props 数据，但子组件不能直接修改这些 props 数据。子组件只能读取来自父组件的 props 数据并在内部使用。

传递props

props相当于HTML中的属性值，有些属性时静态的，有些属性时动态的，在vue中动态属性需要使用 v-bind或简写:来表示，而在 JSX的动态属性需要使用 {}

<!--静态 props-->
<BlogPost title="My journey with Vue" />

<!-- 动态属性 需要使用 v-bind -->
<BlogPost :title="post.title" />

<img
      className="avatar"
      src="https://i.imgur.com/1bX5QH6.jpg"
      alt="Lin Lanying"
      width={w}
      height={h}
 />

组件如何接收props

关于如何在组件中接收 props，在vue和reactjs中有一些区别

vue中，需要显示定义需要接收哪些props，不能接收所有的属性，必须显示指定需要的属性

• 字符串数组定义props

// in <script setup>
const props = defineProps(['foo'])

• 对象形式定义 props

// in <script setup>
defineProps({
  title: String,
  likes: Number
})

// in non-<script setup>
export default {
  props: {
    title: String,
    likes: Number
  }
}

在 reactjs中，

• 子组件接收所有的 props，本质上是一个 js对象

function Avatar(props) {
  let person = props.person;
  let size = props.size;
  // ...
}

• 只接收需要的属性值, 使用 js中的析构语法

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

props传递的数据类型

在 props中可以传递哪些数据类型呢？

在 vue中，props的数据类型包括

String
Number
Boolean
Array
Object
Date
Function
Symbol

数据类型可以在定义时指定,还可以指定默认值

defineProps({
  // Basic type check
  //  (`null` and `undefined` values will allow any type)
  propA: Number,
  // Multiple possible types
  propB: [String, Number],
  // Required string
  propC: {
    type: String,
    required: true
  },
  // Number with a default value
  propD: {
    type: Number,
    default: 100
  },
  // Object with a default value
  propE: {
    type: Object,
    // Object or array defaults must be returned from
    // a factory function. The function receives the raw
    // props received by the component as the argument.
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // Custom validator function
  propF: {
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // Function with a default value
  propG: {
    type: Function,
    // Unlike object or array default, this is not a factory 
    // function - this is a function to serve as a default value
    default() {
      return 'Default function'
    }
  }
})

在 reactjs 中，props的数据类型更丰富，在最新的reactjs中，需要引入 prop-types，主要的数据类型有

import PropTypes from 'prop-types';

React.PropTypes.array           // 数组

React.PropTypes.bool.isRequired // Boolean 且必须

React.PropTypes.func            // 函数

React.PropTypes.number          // 数字

React.PropTypes.object          // 对象

React.PropTypes.string          // 字符串

React.PropTypes.node            // 任何类型的: numbers, strings, elements 或者数组

React.PropTypes.element         // React 元素

...
// 其他的组合类型

在 reactjs 中一个特殊属性值 children, 一个组件的子节点会以 children 属性传递给子组件

<Card>
  <Avatar />
</Card>

中的 Avatar 组件会以 children 属性，传递给 Card 组件,然后再 Card 组件中直接渲染

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

有点儿像 vue中的 slot 的意思