Leanote's Blog

什么是函数式组件

我们可以把函数式组件想像成组件里的一个函数，入参是渲染上下文(render context)，返回值是渲染好的HTML

对于函数式组件，可以这样定义：

Stateless(无状态)`：组件自身是没有状态的
Instanceless(无实例)：组件自身没有实例，也就是没有this
由于函数式组件拥有的这两个特性，我们就可以把它用作高阶组件(High order components)，所谓高阶，就是可以生成其它组件的组件。就像日本的高精度的母机。

下面示例的完整Demo

那创造一个函数式组件吧
functional: true加上render function，就是一个最简单的函数式组件啦，show your the code, 下面就创建一个名为FunctionButton.js的函数式组件

export default {
    name: 'functional-button',
    functional: true,
    render(createElement, context) {
        return createElement('button', 'click me')
    }
}

就像上文所讲的，函数式组件没有this，参数就是靠context来传递的了，下面我们看下context有哪些属性呢

Render context
props
children
slots (a slots object)
parent
listeners
injections
data

其中上面的data包含了其他属性的引用，nibility。 在下面的范例中会有具体使用

现在创建一个App.vue来引入上面的函数式组件

<template>
    <FunctionalButton>
        click me
    </FunctionButton>
</template>

上面的click me就是FunctionButton.js的childern属性了，我们可以把组件改造下，由App.vue来定义组件的button按钮

动态缓存组件

• 使用keep-alive的include, 动态控制状态

不能缓存多层级路由

• 解决: 干掉中间空白路由, 只支持3层路由

  1. 使用include或者exclude
  2. 二级router-view设置组件name属性

  3. 在router.beforeEach中加入如下代码

     if (to.matched && to.matched.length > 2) {
         for (let i = 0; i < to.matched.length; i++) {
             const element = to.matched[i]
             if (element.components.default.name === 'Blank') {
                 to.matched.splice(i, 1)
             }
         }
     }

常用命令图示

拉取指定分支的代码

git clone -b 分支 仓库地址

只能选今天或者今天以后的日期

disabledDate = (current) => {
    return current && current < moment().startOf('day').subtract(0, 'days');
}

只能选今天或者今天以后的小时

disabledRangeTime = (_, type) => {
    const { form: { getFieldValue } } = this.props
    if (type === 'start') {
        const nowHours = moment().hours()
        const time = getFieldValue("time")
        if (time && moment(time[0].format("YYYY-MM-DD")).valueOf() <= moment(moment().format("YYYY-MM-DD")).valueOf()) {
            return {
                disabledHours: () => this.range(0, nowHours),
            };
        }
    }
}

在关闭选择时间面板的时候判断是否小于(当前时间 + 10s)

onOpenChange = (status) => {
    const { form: { getFieldValue, setFields } } = this.props
    const time = getFieldValue("time")
    if (!status) {
        if (time && (moment(time[0]).valueOf() + 10000) < moment().valueOf()) {
            setFields({
                time: {
                    value: null,
                    errors: [n