實現(xiàn)事件綁定

• App.jsx

import React from './core/React.js'
function Counter({num}) {
  const handleClick = () => {
    console.log('hhh')
  }
  return <div onClick={handleClick}>count: {num}</div>
}
const App = <div>
  hi-mini-react
  <Counter num={1}></Counter>
</div>
export default App

• React.js

const updateProps = (dom, props) => {
  Object.keys(props).forEach(attr => {
+    const isEvent = attr.startsWith('on')
+    if (isEvent) {
+     const eventType = +attr.slice(2).toLocaleLowerCase()
+      dom.addEventListener(eventType, props[attr])
+    } else {
      if (attr !== 'children') {
        dom[attr] = props[attr]
      }
+    }
  })
}

實現(xiàn)更新 props

本質(zhì)對比新的 vdom 樹和舊的 vdom 樹

1. 如何得到新的 dom 樹
   我們舊的dom樹是通過 render 傳入根節(jié)點生成的，所以我們也可以通過render獲取新的dom樹，但我們又不希望用戶傳入container 和 el，所以我們可以用初始化的節(jié)點作為新的節(jié)點

let currentRoot = null
const commitRoot = () => {
  // 這里為啥不是root.props.children
  commitWork(root.child)
+  currentRoot = root
  root = null
}
const update = () => {
  nextWorkOfUnit = {
    dom: currentRoot.dom,
    props: currentRoot.props
  }
}

2. 如何找到老的節(jié)點

在構(gòu)建鏈表的時候通過指針讓新的節(jié)點指向老的
上圖右側(cè)是新的樹，左側(cè)是久的，
1). 我們首先通過新的樹的 root 根節(jié)點指向老的樹的根節(jié)點
2). 新樹的第二個節(jié)點怎么指向久樹的第二個節(jié)點（怎么拿到久樹的第二個節(jié)點）？
通過久樹根節(jié)點的 child
3). 重復(fù)上面的操作，需要注意我們的 counter 需要通過 mini-react 的 sibling 拿到

3. 如何 diff props