Hooks

Hooks是一种比较简单的方法，将state和action以及effect封装在用户界面中。最初在React中引用，现在已被Vue,Svelte等其他框架广泛引用。Hooks的设计需要您对js闭包( 闭包是指某个函数能够记住并访问其词法范围，即使该函数在其词法范围之外执行)的概念有充分的了解。

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())

我们创建了一个和React Hooks中类似的useState,在我们函数中我们创建了两个内部函数state和setState。state返回了函数内部的局部变量_val,并将使用setState设置新的值。我们借助foo和setFoo去操作了和访问了内部变量_val。它们保留了对useState的作用域的访问权限,这就叫做闭包。在React和其他框架的上下文中，这看起来像状态。

让我们将useState应用到熟悉的环境中。我们将组成一个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 }

如果我们想创建出类似React API，我们的状态必须是变量而不是函数。

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)

这将是错误的

我们可以useState通过以下方法解决难题，使用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一样，它跟踪组件状态

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

我们已经介绍了useState，这是第一个基本的React Hook。下一个最重要的Hooks是useEffect。不同于setState，useEffect它是异步执行的，这意味着有更多机会遇到闭包问题。

我们可以扩展到目前为止已经建立的React微模型，以包括以下内容：

// 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}

为了跟踪依赖关系（因为useEffect依赖关系发生更改后会重新运行），我们引入了另一个变量track _deps。

我们对useState和useEffect功能进行了很好的复制，但两者均实现不好。

// 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' ] }}