阅读量:0
函数式编程
- 一种编程范式，概念比较多
- 纯函数
- 不可变值
vdom和diff
- Vue2.x Vue3.x React 三者实现vdom细节都不同
- 核心概念和实现思路，都一样
h函数
用来生成vnode的函数
vnode数据结构
{ tag: 'div', props: { className: 'div-class' }, children: [{ tag: 'p', children: '测试' }, ...] } patch函数
- patch(elem, vnode)
- path(vnode, newVnode)
- addVnode()
- removeVnode()
- updateChildren()
JSX本质
- JSX等同于Vue模板
- Vue模板不是html
- JSX也不是JS
// https://www.babeljs.cn/ // // JSX 基本用法 // const imgElem = <div id="div1"> // <p>some text</p> // <img src={imgUrl}/> // </div> // // JSX style // const styleData = { fontSize: '30px', color: 'blue' } // const styleElem = <p style={styleData}>设置 style</p> // // JSX 加载组件 // const app = <div> // <Input submitTitle={onSubmitTitle}/> // <List list={list}/> // </div> // // JSX 事件 // const eventList = <p onClick={this.clickHandler}> // some text // </p&g