八、实现自己的 todolist

问题：

1. 设置 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]
          }
        }
      }
    }
  })

2. 在 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
  }

3. 直接使用 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)
    }
  }
}

2. 在遍历 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) => {``