React原理

函数式编程

• 一种编程范式，概念比较多
• 纯函数
• 不可变值

---

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