text: (window.webpackJsonp=window.webpackJsonp||[]).push([[136],{245:function(t,s,a){"use strict";a.r(s);var n=a(28),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"无状态组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#无状态组件"}},[t._v("#")]),t._v(" 无状态组件")]),t._v(" "),a("p",[t._v("学习过React的都知道它有两种组件，一个是"),a("strong",[t._v("类组件")]),t._v("，一个就是"),a("strong",[t._v("函数组件")]),t._v("，Vue后面也推出了一个函数式组件")]),t._v(" "),a("h2",{attrs:{id:"什么是函数式组件-无状态组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#什么是函数式组件-无状态组件"}},[t._v("#")]),t._v(" 什么是函数式组件(无状态组件)")]),t._v(" "),a("ul",[a("li",[a("p",[t._v("函数式组件是指本身作为函数渲染，不创建类的实例")])]),t._v(" "),a("li",[a("p",[t._v("无状态组件是指组件内部不持有状态，在Vue的表现就是没有data")])])]),t._v(" "),a("p",[t._v("总的来说，"),a("strong",[t._v("函数式组件是一个在不依赖本地状态时的一个优化模式")])]),t._v(" "),a("h2",{attrs:{id:"设计理念"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#设计理念"}},[t._v("#")]),t._v(" 设计理念")]),t._v(" "),a("ul",[a("li",[a("p",[t._v("由于不持有状态以及只是一个函数，渲染效率很高，用于优化只依赖外部props组件")])]),t._v(" "),a("li",[a("p",[t._v("借助其函数的特点，我们可以进行诸如高阶组件的设计")])])]),t._v(" "),a("h2",{attrs:{id:"基本语法"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#基本语法"}},[t._v("#")]),t._v(" 基本语法")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("Vue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("component")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-component'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  functional"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Props 是可选的")]),t._v("\n  props"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 为了弥补缺少的实例")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 提供第二个参数作为上下文")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("createElement"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" context")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h2",{attrs:{id:"源码分析"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#源码分析"}},[t._v("#")]),t._v(" 源码分析")]),t._v(" "),a("p",[t._v("暂无，实现函数式组件只要判断选项，然后只创建一个简单的实例即可，不用像组件一样实例那么复杂")])])}),[],!1,null,null,null);s.default=e.exports}}]);