四、dom 更新

实现事件绑定

• 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]
      }
+    }
  })
}

实现更新 props

本质对比新的 vdom 树和旧的 vdom 树

1. 如何得到新的 dom 树
   我们旧的dom树是通过 render 传入根节点生成的，所以我们也可以通过render获取新的dom树，但我们又不希望用户传入container 和 el，所以我们可以用初始化的节点作为新的节点

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. 如何找到老的节点

在构建链表的时候通过指针让新的节点指向老的
上图右侧是新的树，左侧是久的，
1). 我们首先通过新的树的 root 根节点指向老的树的根节点
2). 新树的第二个节点怎么指向久树的第二个节点（怎么拿到久树的第二个节点）？
通过久树根节点的 child
3). 重复上面的操作，需要注意我们的 counter 需要通过 mini-react 的 sibling 拿到

3. 如何 diff props