Hooks

Hooks是一種比較簡單的方法，將state和action以及effect封裝在用戶界面中。最初在React中引用，現(xiàn)在已被Vue,Svelte等其他框架廣泛引用。Hooks的設(shè)計(jì)需要您對(duì)js閉包( 閉包是指某個(gè)函數(shù)能夠記住并訪問其詞法范圍，即使該函數(shù)在其詞法范圍之外執(zhí)行)的概念有充分的了解。

useState

function useState(initialValue) {
  let _val = initialValue;
  function state() {
    return _val;
  }
  function setState(newVal) {
    _val = newVal;
  }
  return [state, setState];
}
var [foo, setFoo] = useState(0)
console.log(foo())
setFoo(1)
console.log(foo())

我們創(chuàng)建了一個(gè)和React Hooks中類似的useState,在我們函數(shù)中我們創(chuàng)建了兩個(gè)內(nèi)部函數(shù)state和setState。state返回了函數(shù)內(nèi)部的局部變量_val,并將使用setState設(shè)置新的值。我們借助foo和setFoo去操作了和訪問了內(nèi)部變量_val。它們保留了對(duì)useState的作用域的訪問權(quán)限,這就叫做閉包。在React和其他框架的上下文中，這看起來像狀態(tài)。

讓我們將useState應(yīng)用到熟悉的環(huán)境中。我們將組成一個(gè)Counter組件！

// Example 1
function Counter() {
const [count, setCount] = useState(0)
return {
click: () => setCount(count() + 1),
render: () => console.log('render:', { count: count() })
}
}
const C = Counter()
C.render() // render: { count: 0 }
C.click()
C.render() // render: { count: 1 }

如果我們想創(chuàng)建出類似React API，我們的狀態(tài)必須是變量而不是函數(shù)。

function useState(initialValue) {
var _val = initialValue
// no state() function
function setState(newVal) {
_val = newVal
}
return [_val, setState]
}
var [foo, setFoo] = useState(0)
console.log(foo)
setFoo(1)
console.log(foo)

這將是錯(cuò)誤的

我們可以u(píng)seState通過以下方法解決難題，使用module scope模式。

const MyReact = (function() {
let _val;
return {
render(Component) {
const Comp = Component()
Comp.render()
return Comp
},
useState(initialValue) {
_val = _val || initialValue
function setState(newVal) {
_val = newVal
}
return [_val, setState]
}
}
})()

在這里，我們選擇使用Module模式。像React一樣，它跟蹤組件狀態(tài)

function Counter() {
const [count, setCount] = MyReact.useState(0)
return {
click: () => setCount(count + 1),
render: () => console.log('render:', { count })
}
}
let App
App = MyReact.render(Counter) // render: { count: 0 }
App.click()
App = MyReact.render(Counter) // render: { count: 1 }

useEffect

我們已經(jīng)介紹了useState，這是第一個(gè)基本的React Hook。下一個(gè)最重要的Hooks是useEffect。不同于setState，useEffect它是異步執(zhí)行的，這意味著有更多機(jī)會(huì)遇到閉包問題。

我們可以擴(kuò)展到目前為止已經(jīng)建立的React微模型，以包括以下內(nèi)容：

// Example 3
const MyReact = (function() {
let _val, _deps // hold our state and dependencies in scope
return {
render(Component) {
const Comp = Component()
Comp.render()
return Comp
},
useEffect(callback, depArray) {
const hasNoDeps = !depArray
const hasChangedDeps = _deps ? !depArray.every((el, i) => el === _deps[i]) : true
if (hasNoDeps || hasChangedDeps) {
callback()
_deps = depArray
}
},
useState(initialValue) {
_val = _val || initialValue
function setState(newVal) {
_val = newVal
}
return [_val, setState]
}
}
})()

// usage
function Counter() {
const [count, setCount] = MyReact.useState(0)
MyReact.useEffect(() => {
console.log('effect', count)
}, [count])
return {
click: () => setCount(count + 1),
noop: () => setCount(count),
render: () => console.log('render', { count })
}
}
let App
App = MyReact.render(Counter)
// effect 0
// render {count: 0}
App.click()
App = MyReact.render(Counter)
// effect 1
// render {count: 1}
App.noop()
App = MyReact.render(Counter)
// // no effect run
// render {count: 1}
App.click()
App = MyReact.render(Counter)
// effect 2
// render {count: 2}

為了跟蹤依賴關(guān)系（因?yàn)閡seEffect依賴關(guān)系發(fā)生更改后會(huì)重新運(yùn)行），我們引入了另一個(gè)變量track _deps。

我們對(duì)useState和useEffect功能進(jìn)行了很好的復(fù)制，但兩者均實(shí)現(xiàn)不好。

// Example 4
const MyReact = (function() {
let hooks = [],
currentHook = 0 // array of hooks, and an iterator!
return {
render(Component) {
const Comp = Component() // run effects
Comp.render()
currentHook = 0 // reset for next render
return Comp
},
useEffect(callback, depArray) {
const hasNoDeps = !depArray
const deps = hooks[currentHook] // type: array | undefined
const hasChangedDeps = deps ? !depArray.every((el, i) => el === deps[i]) : true
if (hasNoDeps || hasChangedDeps) {
callback()
hooks[currentHook] = depArray
}
currentHook++ // done with this hook
},
useState(initialValue) {
hooks[currentHook] = hooks[currentHook] || initialValue // type: any
const setStateHookIndex = currentHook // for setState's closure!
const setState = newState => (hooks[setStateHookIndex] = newState)
return [hooks[currentHook++], setState]
}
}
})()

// Example 4 continued - in usage
function Counter() {
const [count, setCount] = MyReact.useState(0)
const [text, setText] = MyReact.useState('foo') // 2nd state hook!
MyReact.useEffect(() => {
console.log('effect', count, text)
}, [count, text])
return {
click: () => setCount(count + 1),
type: txt => setText(txt),
noop: () => setCount(count),
render: () => console.log('render', { count, text })
}
}
let App
App = MyReact.render(Counter)
// effect 0 foo
// render {count: 0, text: 'foo'}
App.click()
App = MyReact.render(Counter)
// effect 1 foo
// render {count: 1, text: 'foo'}
App.type('bar')
App = MyReact.render(Counter)
// effect 1 bar
// render {count: 1, text: 'bar'}
App.noop()
App = MyReact.render(Counter)
// // no effect run
// render {count: 1, text: 'bar'}
App.click()
App = MyReact.render(Counter)
// effect 2 bar
// render {count: 2, text: 'bar'}

自定義的Hooks：

// Example 4, revisited
function Component() {
const [text, setText] = useSplitURL('www.netlify.com')
return {
type: txt => setText(txt),
render: () => console.log({ text })
}
}
function useSplitURL(str) {
const [text, setText] = MyReact.useState(str)
const masked = text.split('.')
return [masked, setText]
}
let App
App = MyReact.render(Component)
// { text: [ 'www', 'netlify', 'com' ] }
App.type('www.reactjs.org')
App = MyReact.render(Component)
// { text: [ 'www', 'reactjs', 'org' ] }}