vue2.x 函数式组件(未完成）

函数式组件：functional component
一开始我理解为就是用render function 实现一个组件就是函数式组件了，结果并不是

参考着一篇文章：https://juejin.im/post/6844904205669367822

原文：https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713 （好像需要FQ）

什么是函数式组件？

functional component (别跟 Vue 的 render function 搞混) 是一个不持有状态也没有实例的组件。
说白了，这就意味着这种组件不支持相应式，并且不能用 this 关键字引用到自身。
（还是没理解，没状态没实例是什么样的表现？）

官方文档中提到：

如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

这说明函数式组件还真不能访问this,所以需要这个额外的context参数。

1. 基于模板的函数式组件：

   <template functional>
       <div>...</div>
   </template>

2. 基于render 函数的函数式组件

<script>
    export default{
        functional:true,
        render(h){
            // ...
        }
    }
</script>

通过context属性可访问的属性

• props：提供所有 prop 的对象
• children：VNode 子节点的数组
• slots：一个函数，返回了包含所有插槽的对象
• scopedSlots：(2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• parent：对父组件的引用
• listeners：(2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
• injections：(2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的 property。

怎么访问？

基于模板

<template functional>
    <div>{{props.name}}</div>
</template>
<script>
export default({
    props:{
        name:String
    }
})
</script>

基于render function

<script>
export default({
    functional:true,
    props:{
        name:String
    },
    render(h,ctx){
        console.log(ctx.props.name)
        // ...
    }
})
</script>

函数是组件中的props

官方文档:

注意：在 2.3.0 之前的版本中，如果一个函数式组件想要接收 prop，则 props 选项是必须的。在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的 attribute 都会被自动隐式解析为 prop。

如果显式声明了 props，使用组件时定义的attributes就会被props 效验。建议显式声明props，这样就能指定其类型、required、默认值，或自定义校验器等。

什么情况下适合用函数式组件？

• 显式逻辑特别简单的组件，也叫“哑(dumb)”组件。比如按钮、卡片、标签甚至纯静态的页面等。
• “高阶组件”，用于在另一个组件周围包装标记或基本功能。（没理解，好像是包装其他组件）
• 每当你发现自己陷入了一个循环渲染 (v-for)，其遍历对象往往就适用函数式组件 （因为一般遍历对象都不需要内部状态？，使用函数式组件可以优化性能）