動手實現簡單版的 React（一）

時間  2019-11-29
標籤 動手 實現 簡單 react 欄目 React 简体版
原文   原文鏈接

這一年陸陸續續、跌跌撞撞看過一些實現 react 的文章，可是尚未本身親自動手過，也就談不上深刻理解過，但願可以經過代碼和文字幫助鞭策本身。html

這個系列至少會實現一個 React 16 以前的簡單API，對於 React Fiber 和 React Hooks 儘可能會有代碼實現，沒有也會寫相應的文章，但願這是一個不會倒的 flag。前端

jsx 語法

在 React 中一個 Node 節點會被描述爲一個以下的 js 對象：node

{
   type: 'div',
   props: {
      className: 'content'
   },
   children: []
}
複製代碼

這個對象在 React 中會被 React.createElement 方法返回，而 jsx 語法通過 babel 編譯後對應的 node 節點就會編譯爲 React.createElement 返回，以下的 jsx 通過 babel 編譯後以下：react

const name = 'huruji'
const content = <ul className="list"> <li>{name}</li> huruji </ul>
複製代碼
const name = 'huruji';
const content = React.createElement("ul", {
  className: "list"
}, React.createElement("li", null, name), "huruji");
複製代碼

從編譯事後的代碼大體能夠獲得如下信息：webpack

  • 子節點是經過剩餘參數傳遞給 createElement 函數的git

  • 子節點包括了文本節點github

  • 當節點的 attribute 爲空時，對應的 props 參數爲 nullweb

爲了加深對於這些的理解，我使用了 typescript 來編寫，vdom 的 interface 能夠大體描述以下，props 的 value 爲函數的時候就是處理相應的事件：算法

interface VdomInterface {
	type: string
	props: Record<string, string | Function>
	children: VdomInterface[]
}
複製代碼

其中由於子節點其實還能夠是文本節點，所以須要兼容一下，typescript

export interface VdomInterface {
	type: string
	props: Record<string, string | Function>
	children: VdomType[]
}

type VdomType = VdomInterface | string
複製代碼

實際上，React 的聲明文件對於每一個不一樣的 HTML 標籤的 props 都作了不一樣的不一樣的適配，對應的標籤只能編寫該標籤下全部的 attributes，因此常常會看到如下這種寫法：

type InputProps = React.InputHTMLAttributes<{}> & BasicProps;

export default class Input extends React.Component<InputProps, any> {
    // your comonent's code
}
複製代碼

這裏一切從簡，createElement 函數的內容就會是下面這個樣子：

interface VdomInterface {
	type: string
	props: Record<string, string | Function>
	children: VdomInterface[]
}

export default function createElement( type: string, props: Record<string, string | Function>, ...children: VdomType[] ): VdomType {
	if (props === null) props = {}
	console.log(type)
	debugger
	return {
		type,
		props,
		children
	}
}
複製代碼

測試

編寫咱們的測試，爲了避免須要再編寫繁瑣的 webpack 配置，我使用了 saso 做爲此次打包的工具，建立目錄目錄結構：

--lib2
--src
   --index.html
   --index.tsx
   --App.tsx
--saso.config.js
複製代碼

由於 saso 推崇以 .html 文件爲打包入口，因此在 .html 中須要指定 .index.ts 做爲 script 屬性 src 的值：

<script src="./index.tsx" async defer></script>
複製代碼

在 saso 配置文件 saso.config.js 配置一下 jsx 編譯後的指定函數，內容以下：

module.exports = {
  jsx: {
    pragma: 'createElement'
  },
}
複製代碼

App.tsx 內容以下：

import { createElement } from '../lib2/index'

const name = 'huruji'
const content = (
	<ul className="list">
		<li>{name}</li>
		huruji
	</ul>
)

export default content

複製代碼

index.ts 內容以下：

import App from './App'
console.log(App)
複製代碼

在根目錄中運行 saso dev，能夠在控制檯中看到打包編譯完成，在瀏覽器中訪問 http://localhost:10000 並打開控制檯，能夠看到組件 App 編譯事後被轉化爲了一個 js 對象：

渲染真實 DOM

接下來就須要考慮如何將這些對象渲染到真實的 DOM 中，在 React 中，咱們是經過 react-dom 中的 render 方法渲染上去的：

ReactDOM.render(<App/>, document.querySelector('#app'))
複製代碼

react 是在版本 0.14 劃分爲 react 和 react-dom，react 之因此將 渲染到真實 DOM 單獨分爲一個包，一方面是由於 react 的思想本質上與瀏覽器或者DOM是沒有關係的，所以分爲兩個包更爲合適，另一個方面，這也有利於將 react 應用在其餘平臺上，如移動端應用（react native）。

這裏爲了簡單，就不劃分了， 先寫下最簡單的渲染函數，以下：

export default function render(vdom:VdomType, parent: HTMLElement) {
  if(typeof vdom === 'string') {
    const node = document.createTextNode(vdom)
    parent.appendChild(node)
  } else if(typeof vdom === 'object') {
    const node = document.createElement(vdom.type)
    vdom.children.forEach((child:VdomType) => render(child, node))
    parent.appendChild(node)
  }
}
複製代碼

vdom 是字符串時對應於文本節點，其實這從 VdomType 類型中就能夠看出來有 string 和 object 的狀況（這也正是我喜歡 ts 的緣由）。

在 index.tsx 中編寫相應的測試內容：

import { render, createElement } from '../lib2'

render(
	<div>
		<p>name</p>
		huruji
	</div>,
	document.querySelector('#app')
)
複製代碼

這個時候能夠看到，對應的內容已經渲染到 dom 中了

設置DOM屬性

對於每一個 dom 來講，除了普通的屬性外，jsx 使用 className 來替代爲 class，on 開頭的屬性做爲事件處理，style是一個對象，key 屬性做爲標識符來輔助 dom diff，所以這些須要單獨處理，key屬性咱們存儲爲 __key, 以下：

export default function setAttribute(node: HTMLElement & { __key?: any }, key: string, value: string | {} | Function) {
	if (key === 'className') {
		node['className'] = value as string
	} else if (key.startsWith('on') && typeof value === 'function') {
		node.addEventListener(key.slice(2).toLowerCase(), value as () => {})
	} else if (key === 'style') {
		if (typeof value === 'object') {
			for (const [key, val] of Object.entries(value)) {
				node.style[key] = val
			}
		}
	} else if (key === 'key') {
		node.__key = value
	} else {
		node.setAttribute(key, value as string)
	}
}
複製代碼

修改對應的測試，以下：

import { render, createElement } from '../lib2'

render(
	<div className="list" style={{ color: 'red' }} onClick={() => console.log('click')}>
		<p key="123" style={{ color: 'black' }}>
			name
		</p>
		huruji
	</div>,
	document.querySelector('#app')
)
複製代碼

打開瀏覽器能夠看到已經生效：

組件 Component

首先先修改測試內容，將 dom 移到 App.tsx 中，index.tsx 內容修改成：

import { render, createElement } from '../lib2'
import App from './App'

render(<App />, document.querySelector('#app'))
複製代碼

打開瀏覽器能夠看到這個時候報錯了：

其實這個錯誤很明顯，就是這個時候 Content 組件編譯後傳給 createElement 函數的第一個參數是一個 vdom 對象，可是咱們並無對 type 是對象的時候作處理，所以須要修改一下 createElement ：

export default function createElement( type: string | VdomType, props: Record<string, string | Function>, ...children: VdomType[] ): VdomType {
	if (props === null) props = {}
	if (typeof type === 'object' && type.type) {
		return type
	}
	return {
		type: type as string,
		props,
		children
	}
}

複製代碼

這個時候就正常了。

先新建一個 Component 對象：

export default class Component {
  public props

  constructor(props) {
    this.props = props || {}
  }

}
複製代碼

對於 class Component 的寫法，轉化事後的傳遞給 createElement 的第一個參數就是一個以 React.Component 爲原型的函數：

class Content extends React.Component {

  render(){
    return <div>content</div>
  }
}

const content = <div><Content name="huruji"/></div> 複製代碼
class Content extends React.Component {
  render() {
    return React.createElement("div", null, "content");
  }

}

const content = React.createElement("div", null, React.createElement(Content, {
  name: "huruji"
}));
複製代碼

也就是說這個時候 type 是一個函數，目前在 createElement 中和 render 中並無作處理。因此確定會報錯。

在編寫 class 組件的時候，咱們必需要包含 render 方法，而且若是編寫過 ts 的話，就知道這個 render 方法是 public 的，所以確定須要實例化以後再調用 render 方法，咱們放在 render 方法處理。Component 的 interface 能夠表示爲：

export interface ComponentType {
  props?: Record<string, any>
  render():VdomType
}
複製代碼

render 方法中單獨處理一下 type 爲 function 的狀況：

const props = Object.assign({}, vdom.props, {
      children: vdom.children
    })
    const instance = new (vdom.type)(props)
    const childVdom = instance.render()
    render(childVdom, parent)
}
複製代碼

這裏作的事情就是實例化後調用 render 方法。

這個時候，整個 render 方法的內容以下：

export default function render(vdom:VdomType, parent: HTMLElement) {
  if(typeof vdom === 'string') {
    const node = document.createTextNode(vdom)
    parent.appendChild(node)
  } else if(typeof vdom === 'object' && typeof vdom.type === 'string') {
    const node = document.createElement(vdom.type)
    vdom.children.forEach((child:VdomType) => render(child, node))
    for(const prop in vdom.props) {
      setAttribute(node, prop, vdom.props[prop])
    }
    parent.appendChild(node)
  } else if (typeof vdom === 'object' && typeof vdom.type === 'function') {
    const props = Object.assign({}, vdom.props, {
      children: vdom.children
    })
    const instance = new (vdom.type)(props)
    const childVdom = instance.render()
    render(childVdom, parent)
  }
}
複製代碼

修改咱們的測試內容：

import { render, createElement, Component } from '../lib2'

class App extends Component {
	constructor(props) {
		super(props)
	}

	render() {
		const { name } = this.props
		debugger
		return <div style={{ color: 'red', fontSize: '100px' }}>{name}</div>
	}
}

render(<App name={'app'} />, document.querySelector('#app'))

複製代碼

打開瀏覽器，能夠看到內容已經被正常渲染出來了：

處理 Functional Component

咱們將測試內容修改成函數式組件：

function App({ name }) {
	return <div style={{ color: 'red', fontSize: '100px' }}>{name}</div>
}
複製代碼

這個時候能夠看到報錯：

這個錯誤是顯而易見的，render 裏將 Functional Component 也當成了 Class Component 來處理，可是 Functional Component 裏並無 render 屬性，所以咱們仍然須要修改，Class Component 的原型是咱們定義的 Component ，咱們能夠經過這個來區分。

先增長一下 interface ，這能幫助咱們更好地理解：

export interface ClassComponentType {
  props?: Record<string, any>
  render():VdomType
}

export type FunctionComponent = (props:any) => VdomType

export interface VdomInterface {
	type: FunctionComponent | string  | {
		new(props:any): ClassComponentType
	}
	props: Record<string, string | Function>
	children: VdomType[]
}
複製代碼

將 type 爲 function 的邏輯修改成：

const props = Object.assign({}, vdom.props, {
      children: vdom.children
    })

    let childVdom = null

    if(Component.isPrototypeOf(vdom.type)) {
      const vnode = vdom.type as {new(props:any): ClassComponentType}
      const instance = new (vnode)(props)
      childVdom = instance.render()

    } else {
      const vnode = vdom.type as FunctionComponent
      childVdom = vnode(props)
    }
    render(childVdom, parent)
複製代碼

這個時候整個 render 的內容以下：

import { VdomType, FunctionComponent } from './createElement'
import setAttribute from './setAttribute'
import Component, { ComponentType, ClassComponentType }  from './component'

export default function render(vdom:VdomType, parent: HTMLElement) {
  if(typeof vdom === 'string') {
    const node = document.createTextNode(vdom)
    parent.appendChild(node)
  } else if(typeof vdom === 'object' && typeof vdom.type === 'string') {
    const node = document.createElement(vdom.type)
    vdom.children.forEach((child:VdomType) => render(child, node))
    for(const prop in vdom.props) {
      setAttribute(node, prop, vdom.props[prop])
    }
    parent.appendChild(node)
  } else if (typeof vdom === 'object' && typeof vdom.type === 'function') {
    const props = Object.assign({}, vdom.props, {
      children: vdom.children
    })

    let childVdom = null

    if(Component.isPrototypeOf(vdom.type)) {
      const vnode = vdom.type as {new(props:any): ClassComponentType}
      const instance = new (vnode)(props)
      childVdom = instance.render()

    } else {
      const vnode = vdom.type as FunctionComponent
      childVdom = vnode(props)
    }
    render(childVdom, parent)
  }
}
複製代碼

這個時候從新打開一下瀏覽器，能夠發現可以正常渲染了：

優化 render

目前 render 方法裏渲染的節點包括：普通的文本節點、普通的標籤節點、functional component、class component，可是我的感受好像有點亂，在 render 方法中並無反映咱們的意圖。

仔細回想一下 createElement 函數，除了文本節點外，其餘類型的節點都會通過這個函數處理，咱們其實能夠在這裏動動手腳，標記下節點的類型。

export default function createElement( type: VdomType | Vdom, props: Record<string, string | Function>, ...children: Vdom[] ): Vdom {
	let nodeType:nodeType = 'node'
	if (props === null) props = {}

	if (typeof type === 'object' && type.type) {
		return type
	}

	if (typeof type === 'function') {
		if (Component.isPrototypeOf(type)) {
			nodeType = 'classComponent'
		} else {
			nodeType = 'functionalComponent'
		}
	}


	return {
		type: type as VdomType,
		props,
		children,
		nodeType
	}
}
複製代碼

這個時候重寫下 render 方法會更加清晰：

import { Vdom } from './types/vdom'

import setAttribute from './setAttribute'
import { ClassComponent, FunctionComponent } from './types/component';

export default function render(vdom:Vdom, parent: HTMLElement) {

  if(typeof vdom === 'string') {
    const node = document.createTextNode(vdom)
    parent.appendChild(node)
    return
  }


  switch(vdom.nodeType) {
    case 'node':
      const node = document.createElement(vdom.type as string)
      vdom.children.forEach((child:Vdom) => render(child, node))
      for(const prop in vdom.props) {
        setAttribute(node, prop, vdom.props[prop])
      }
      parent.appendChild(node)
      break;
    case 'classComponent':
      const classProps = Object.assign({}, vdom.props, {
        children: vdom.children
      })
      const classVnode = vdom.type as {new(props:any): ClassComponent}
      const instance = new (classVnode)(classProps)
      const classChildVdom = instance.render()
      render(classChildVdom, parent)
      break
    case 'functionalComponent':
      const props = Object.assign({}, vdom.props, {
        children: vdom.children
      })
      const vnode = vdom.type as FunctionComponent
      const childVdom = vnode(props)
      render(childVdom, parent)
      break
    default:
  }

}
複製代碼

更新視圖

接下來就是須要完成更新了，首先咱們知道 setState 是異步的，那麼怎麼實現異步？前端最多見的就是使用定時器，這固然能夠，不過參考 Preact 的源碼，能夠發現使用的是經過 Promise.resolve 微任務將 setState 的操做放在當次事件循環的最後，這樣就能夠作到異步了。

Promise.resolve().then(update)
複製代碼

先完善下 Component 的類型，方便後續動手：

export default class Component<P,S> {
  static defaultProps
  public props:P
  public _pendingStates
  public base
  public state: Readonly<S>

  constructor(props) {
    this.props = props || Component.defaultProps ||  {}
  }

  setState(nextState) {
  }
}
複製代碼

這裏使用了兩個泛型來標記 props 和 state 的類型，並經過 Readonly 標記了 state 爲只讀。爲了方便，咱們能夠在 setState 裏將傳進來的參數使用 _pendingState 保存一下，將相應的更新函數單獨抽出來：

setState(nextState) {
    this._pendingStates = nextState
    enqueueRender(this)
}
複製代碼

更新函數以下：

function defer(fn) {
	return Promise.resolve().then(fn)
}


function flush(component) {
  component.prevState = Object.assign({}, component.state)
  Object.assign(component.state, component._pendingStates)
}

export default function queueRender(component) {
	defer(flush(component))
}
複製代碼

更新完 state 最重要的仍是要從新渲染視圖，既然要從新渲染視圖，就須要對新舊 DOM 樹進行對比，而後找到更新方式（刪除節點、增長節點、移動節點、替換節點）應用到視圖中。

咱們一直被告訴傳統的 tree diff 算法的時間複雜度爲 O(n^3) ，但彷佛不多文章說起爲啥是 O(n^3) ，知乎上有一個回答能夠參考下 react的diff 從O(n^3)到 O(n) ，請問 O(n^3) 和O(n) 是怎麼算出來，大體的就是 tree diff 算法是一個遞歸算法，在遞歸過程拆分紅可能的子樹對比，而後還須要計算最小的轉換方式，致使了最終的時間複雜度爲 O(n^3) ，上張 tree diff 算法演變過程冷靜冷靜：

我終於知道爲啥這方面的文章少的緣由了，有興趣的同窗能夠看看 tree diff 的論文：A Survey on Tree Edit Distance and Related Problems（27頁）

這個算法在前端來講太大了，1000 個節點就須要1億次操做，這會讓應用卡成翔的，React 基於DOM操做的實踐提出了兩點假設：

  • 不一樣類型的元素產生不一樣的樹，
  • 開發人員能夠經過輔助來表示子元素在兩次渲染中保持了穩定（也就是key屬性）

能夠在 React 的文檔 Advanced guides - Reconciliation 中找到 React 本身的說明，假設原文以下：

Two elements of different types will produce different trees.

The developer can hint at which child elements may be stable across different renders with a key prop.

DOM 操做的事實就是：

  • 局部小改動多，大片的改動少（性能考慮，用顯示隱藏來規避）

  • 跨層級的移動少，同層節點移動多（好比表格排序）

分別對應着上面的兩點假設，很是合理。

那麼 diff 策略就是隻對比同層級的節點，若是節點一致則繼續對比子節點，若是節點不一致，則先 tear down 老節點，而後再建立新節點，這也就意味着即便是跨層級的移動也是先刪除相應的節點，再建立節點。

以下，這個時候執行的操做是: create A -> create B -> create C -> delete A

記住這個規則。

回到代碼，要想可以對比首先就應該可以獲取到對應的真實DOM，對於 component 組件同時須要能夠獲取到對應的 constructor 來對比是不是相同的組件，爲了獲取到這些，咱們能夠在渲染的時候經過屬性保存下：

const base = render(classChildVdom, parent)
instance.base = base
base._component = instance
複製代碼

得到新樹的方法很簡單，經過從新調用組件的 render 方法就得到了新樹，更新下 queueRender 方法裏面的代碼：

import diff from './diff'

function defer(fn) {
	return Promise.resolve().then(fn)
}


function flush(component) {
  component.prevState = Object.assign({}, component.state)
  Object.assign(component.state, component._pendingStates)
  diff(component.base, component.render())
}

export default function queueRender(component) {
	defer(() => flush(component))
}
複製代碼

diff 方法就是對新舊樹進行對比。

  • 新樹沒有的節點，則刪除舊樹節點
  • 新樹有舊樹沒有的節點，則建立對應節點
  • 新樹和舊樹是相同節點，則繼續 diff 子節點
  • 新樹和舊樹是不一樣節點，則進行替換
  • 對於 props 則進行對比，進行刪改，這個相對來講比較簡單

判斷是否同類型 node 的代碼以下：

function isSameNodeType(dom: Dom, vdom:Vdom) {
  if(typeof vdom === 'string' || typeof vdom === 'number') {
    return dom.nodeType === 3
  }

  if(typeof vdom.type === 'string') {
    return dom.nodeName.toLowerCase() === vdom.type.toLowerCase()
  }

  return dom && dom._component && dom._component.constructor === vdom.type
}
複製代碼

對於 屬性的對比 首先遍歷舊結點，處理修改和刪除的操做，以後遍歷新節點屬性，完成增長操做

function diffAttribute(dom, oldProps, newProps) {
  Object.keys(oldProps).forEach(key => {
    if(newProps[key] && newProps[key] !== oldProps[key]) {
      dom.removeAttribute(key)
      setAttribute(dom, key, newProps[key])
    }
  })

  Object.keys(newProps).forEach(key => {
    if(!oldProps[key]) {
      setAttribute(dom, key, newProps[key])
    }
  })
}
複製代碼

對於 Component diff，先處理 Component 相同的狀況，Component 相同則繼續 diff dom 和 調用 comonent render 獲得樹

對於 node diff，不一樣類型 render 後直接替換，相同類型則遞歸diff 子節點。

export default function diff(dom: Dom, vdom, parent: Dom = dom.parentNode) {
  if(!dom) {
    render(vdom, parent)
  } else if (!vdom) {
    dom.parentNode.removeChild(dom)
  } else if ((typeof vdom === 'string' || typeof vdom === 'number') && dom.nodeType === 3) {
    if(vdom !== dom.textContent) dom.textContent = vdom + ''
	} else if (vdom.nodeType === 'classComponent' || vdom.nodeType === 'functionalComponent') {
		const _component = dom._component
		if (_component.constructor === vdom.type) {
      _component.props = vdom.props
      diff(dom, _component.render())
		} else {
      const newDom = render(vdom, dom.parentNode)
      dom.parentNode.replaceChild(newDom, dom)
    }
	} else if (vdom.nodeType === 'node') {
    if(!isSameNodeType(dom, vdom)) {
      const newDom = render(vdom, parent)
      dom.parentNode.replaceChild(newDom, dom)
    } else {
      const max = Math.max(dom.childNodes.length, vdom.children.length)
      diffAttribute(dom, dom._component.props, vdom.props)
      for(let i = 0; i < max; i++) {
        diff(dom.childNodes[i] || null, vdom.children[i] || null, dom)
      }
    }
	}
}
複製代碼

編寫測試，此次的測試咱們須要覆蓋當前的場景

  • 新舊樹類型相同，只是更改屬性
  • 新舊樹類型不一樣，tear down 舊樹後建立新樹
  • 只是更新 textNode 內容
  • 新樹有節點，舊樹沒有節點（增長）
  • 舊樹有節點，新樹沒有節點（刪除）
class App extends Component<any, any> {
	public state = { name: 'app', list: [], nodeType: 'div', className: 'name' }

	constructor(props) {
		super(props)
	}

	update() {
		debugger
		this.setState({
			name: this.state.name + '1'
		})
	}

	add() {
		const { list } = this.state
		debugger
		for (let i = 0; i < 1000; i++) {
			list.push((Math.random() + '').slice(2, 8))
		}
		this.setState({
			list: [].concat(list)
		})
	}

	sort() {
		const { list } = this.state
		list.sort((a, b) => a - b)
		this.setState({
			list: [].concat(list)
		})
	}
	delete() {
		const { list } = this.state
		list.pop()
		this.setState({
			list: [].concat(list)
		})
	}
	changeType() {
		const { nodeType } = this.state
		this.setState({
			nodeType: nodeType === 'div' ? 'p' : 'div'
		})
	}
	changeProps() {
		const { className } = this.state
		this.setState({
			className: className + 'a'
		})
	}

	render() {
		const { name, list, nodeType, className } = this.state
		return (
			<div className="container">
				<div className="optcontainer">
					<div className="opt" onClick={this.update.bind(this)}>
						update text
					</div>
					<div className="opt" onClick={this.add.bind(this)}>
						add
					</div>
					<div className="opt" onClick={this.delete.bind(this)}>
						delete
					</div>
					<div className="opt" onClick={this.sort.bind(this)}>
						sort
					</div>
				</div>
				<div className="optcontainer">
					<div className="opt" onClick={this.changeType.bind(this)}>
						changeNodeType
					</div>
					<div className="opt" onClick={this.changeProps.bind(this)}>
						changeNodeProps
					</div>
				</div>
				{nodeType === 'div' ? (
					<div className={className}>{name + 'div'}</div>
				) : (
					<p className={className}>{name + 'p'}</p>
				)}
				<ul>{list.map(l => <li>{l}</li>)}</ul>
			</div>
		)
	}
}

render(<App />, document.querySelector('#app'))
複製代碼

打開瀏覽器，能夠看到以下界面：

這個時候經過按鈕進行操做（增刪改移），能夠很方便的發現已經可以更新咱們的視圖，也就是說目前基本上已經簡單完成了 component diff 、 tree diff、 element diff，可是對於最重要的優化手段 key 目前沒有排上用場，也就是目前尚未完成 list diff。

最後照舊是一個廣告貼，最近新開了一個分享技術的公衆號，歡迎你們關注👇（目前關注人數可憐🤕）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程