问题：
- 设置 style 不起作用
<div style={{display: 'flex'}}>
原因我们节点的 style都有自己的引用，如果直接赋值替换的话不会生效，所以我们要在它原有的引用上修改
Object.keys(nextProps).forEach(key => {
if (key !== 'children') {
if (nextProps[key] !== prevProps[key]) {
// 不相等进行更新赋值
const isEvent = key.startsWith('on')
if (isEvent) {
const eventType = key.slice(2).toLocaleLowerCase()
dom.removeEventListener(eventType, prevProps[key])
dom.addEventListener(eventType, nextProps[key])
} else {
+ if (key === 'style') {
+ Object.assign(dom[key], nextProps[key])
+ } else {
dom[key] = nextProps[key]
}
}
}
}
})
- 在 useEffect 里修改 state 页面没更新
React.useEffect(() => {
if (checkedValue === 'all') {
setDisplayList(list)
} else {
const newList = list.filter(item => item.status === checkedValue)
setDisplayList(newList)
}
console.log(list, 'hhhhdd')
}, [list, checkedValue])
<div>{
...displayList.map((item) => (...)}</div>
原因：
我们先去调用了 commitWork 将视图更新完，再调用 commitEffectHooks，所以虽然我们的数据变了但是视图没有改变
解决方案：
在 commitEffectHooks 后重新调用 commitWork
所以我们去看我们的 useState 它在 setState 后会重新修改 wipRoot 和 nextWorkOfUnit 赋值，所以只要它有值了说明我们在 effectHooks 又改变了我们的 state，我们就应该重新执行 commitRoot
if (!nextWorkOfUnit && wipRoot) {
commitRoot()
}
if (nextWorkOfUnit && !wipRoot) {
wipRoot = currentRoot
}
- 直接使用 map 不需要解构
我们现在想要使用 map 智能解构，因为我们没对数组进行处理，想要直接使用可以在 遍历 children 节点的时候或者 crateElement 的时候处理
1). 在 createElement 处理
const createElement = (type, props, ...children) => {
// 不管是 [[{type: 'div'}]] 还是 [{type: 'div'}] 都给他拍平成 [{type: 'div'}]
const newChildren = children.flat()
return {
type,
props: {
...props,
children: newChildren.map(child => ['string', 'number'].includes(typeof child) ? createTextNode(child) : child)
}
}
}
- 在遍历 children 节点的时候
const initChildren = (fiber, children) => {
let oldFiber = fiber.alternate?.child
let prevChild = null
// [{type: 'div'}] / [[{type: 'div'}, {type: 'div'}]]
const newChildren = children.flat()
newChildren.forEach((child, index) => {``
