实现事件绑定
- 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 树
- 如何得到新的 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
}
}
- 如何找到老的节点
在构建链表的时候通过指针让新的节点指向老的
上图右侧是新的树，左侧是久的，
1). 我们首先通过新的树的 root 根节点指向老的树的根节点
2). 新树的第二个节点怎么指向久树的第二个节点（怎么拿到久树的第二个节点）？
通过久树根节点的 child
3). 重复上面的操作，需要注意我们的 counter 需要通过 mini-react 的 sibling 拿到
- 如何 diff props
