函数式组件的使用

[cnpaladinhxy]

官网函数式组件文档 中提到,可以使用函数定义一个组件。但是事实上这个函数会被当做一个渲染函数来执行,每次dom更新都会重复执行它,这导致函数内部的变量无法维持状态。希望可以改为:返回一个函数,这个函数被作为渲染函数来处理。

[Shyam-Chen]

函数式组件是一种定义自身没有任何状态的组件的方式

[cnpaladinhxy]

但事实上vue给它提供了emit,props,slot的定义方式,它拥有成为有状态组件的潜力,现在距离它成为可以正常使用只差这临门一脚了,使用起来差点意思。当我使用jsx来定义组件时就非常能体会到这种感觉,渲染函数可以是setup返回的函数,使用setup的闭包来获得状态变量。vue-template能简化出setup语法糖标签,类比下来,jsx的setup同样可以用函数式组件来简化处理,这是我的想法和建议哈。

[Shyam-Chen]

import type { FunctionalComponent } from 'vue';
import { defineComponent, ref } from 'vue';

const Count: FunctionalComponent<{ count: number }> = (props) => <p>Count: {props.count}</p>;

export const Counter = defineComponent({
  setup() {
    const count = ref(0);

    const onIncrement = () => {
      count.value += 1;
    };

    return () => (
      <>
        <Count count={count.value} />
        <button onClick={() => onIncrement()}>Increment</button>
      </>
    );
  },
});

[cnpaladinhxy]

我明白你的意思,但使用

defineComponent({
setup:...
})

到我的提案的变化,和SFC中

export default {
setup: ...
}

到setup标签语法糖的变革是类似的,并不是说defineComponent来写不可以,只是说建议纯粹的函数式组件做一个这样的变动:

mport type { SetupContext } from 'vue'
type FComponentProps = {
  message: string
}

type Events = {
  sendMessage(message: string): void
}

function FComponent(
  props: FComponentProps,
  context: SetupContext<Events>
) {
  return () => (
    <button onClick={() => context.emit('sendMessage', props.message)}>
        {props.message} {' '}
    </button>
  )
}

FComponent.props = {
  message: {
    type: String,
    required: true
  }
}

FComponent.emits = {
  sendMessage: (value: unknown) => typeof value === 'string'
}

一旦支持函数返回一个函数,把这个函数在作为渲染函数来处理,就能省去defineComponent中的很多选项的声明