commit

blank/6-index.js

@@ -0,0 +1,80 @@
+import React from './mini-react/react'
+import ReactDOM from './mini-react/react-dom'
+
+class Result extends React.Component {
+  componentWillReceiveProps() {
+    console.log('Result componentWillReceiveProps')
+  }
+
+  shouldComponentUpdate() {
+    console.log('Result shouldComponentUpdate')
+    return true
+  }
+
+  componentWillUpdate() {
+    console.log('Result componentWillUpdate')
+  }
+
+  componentWillUnmount() {
+    console.log('Result componentWillUnmount')
+  }
+
+  componentDidUpdate() {
+    console.log('Result componentDidUpdate')
+  }
+  render() {
+    console.log('Result render')
+    return <div>总计：{this.props.sum}</div>
+  }
+}
+
+class Counter extends React.Component {
+  static defaultProps = {
+    name: 'zh_san'
+  }
+  constructor(props) {
+    super(props)
+    this.state = {
+      number: 0
+    }
+    console.log('1 Counter constructor')
+  }
+
+  handleClick = () => {
+    this.setState({ number: this.state.number + 1 })
+  }
+  componentWillMount() {
+    console.log('2 Counter componentWillMount')
+  }
+
+  render() {
+    console.log('3 Counter render')
+    return (
+      <div>
+        <p>{this.state.number}</p>
+        {this.state.number === 4 ? null : <Result sum={this.state.number} />}
+        <button onClick={this.handleClick}>+</button>
+      </div>
+    )
+  }
+  componentDidMount() {
+    console.log('4 Counter componentDidMount')
+  }
+
+  shouldComponentUpdate() {
+    console.log('Counter shouldComponentUpdate')
+    return true
+  }
+
+  componentWillUpdate() {
+    console.log('Counter componentWillUpdate')
+  }
+
+  componentDidUpdate() {
+    console.log('Counter componentDidUpdate')
+  }
+}
+
+let element = <Counter></Counter>
+
+ReactDOM.render(element, document.getElementById('root'))

src/index.js

@@ -1,78 +1,44 @@
 import React from './mini-react/react'
 import ReactDOM from './mini-react/react-dom'
 
-class Result extends React.Component {
-  componentWillReceiveProps() {
-    console.log('Result componentWillReceiveProps')
-  }
-
-  shouldComponentUpdate() {
-    console.log('Result shouldComponentUpdate')
-    return true
-  }
-
-  componentWillUpdate() {
-    console.log('Result componentWillUpdate')
-  }
-
-  componentWillUnmount() {
-    console.log('Result componentWillUnmount')
-  }
-
-  componentDidUpdate() {
-    console.log('Result componentDidUpdate')
-  }
-  render() {
-    console.log('Result render')
-    return <div>总计：{this.props.sum}</div>
-  }
-}
-
 class Counter extends React.Component {
-  static defaultProps = {
-    name: 'zh_san'
-  }
   constructor(props) {
     super(props)
     this.state = {
-      number: 0
+      list: [
+        { name: '张三', key: 'zhangsan ' },
+        { name: '李四', key: 'lisi ' },
+        { name: '王二', key: 'wanger ' },
+        { name: '麻子', key: 'mazi ' }
+      ]
     }
-    console.log('1 Counter constructor')
   }
 
   handleClick = () => {
-    this.setState({ number: this.state.number + 1 })
-  }
-  componentWillMount() {
-    console.log('2 Counter componentWillMount')
+    this.setState({
+      list: [
+        { name: '张三', key: 'zhangsan ' },
+        { name: '赵大', key: 'zhaoda ' },
+        { name: '王二', key: 'wanger ' },
+        { name: '李四', key: 'lisi ' },
+        { name: '团子', key: 'tuanzi ' }
+      ]
+    })
   }
 
   render() {
-    console.log('3 Counter render')
     return (
       <div>
-        <p>{this.state.number}</p>
-        {this.state.number === 4 ? null : <Result sum={this.state.number} />}
+        <div>
+          {this.state.list.map((item) => {
+            return <div key={item.key}>姓名：{item.name}</div>
+          })}
+        </div>
+
         <button onClick={this.handleClick}>+</button>
       </div>
     )
   }
-  componentDidMount() {
-    console.log('4 Counter componentDidMount')
-  }
-
-  shouldComponentUpdate() {
-    console.log('Counter shouldComponentUpdate')
-    return true
-  }
-
-  componentWillUpdate() {
-    console.log('Counter componentWillUpdate')
-  }
-
-  componentDidUpdate() {
-    console.log('Counter componentDidUpdate')
-  }
 }
 
 let element = <Counter></Counter>

src/mini-react/react-dom.js

@@ -28,6 +28,7 @@ function updateProps(dom, oldProps = {}, newProps) {
 
 function reconcileChildren(children, parentDOM) {
   for (let i = 0; i < children.length; i++) {
+    children[i].mountIndex = i
     mount(children[i], parentDOM)
   }
 }
@@ -49,6 +50,7 @@ function createDOM(vDom) {
     if (props) {
       updateProps(dom, {}, props)
       if (typeof props.children === 'object' && props.children.type) {
+        props.children.mountIndex = 0
         mount(props.children, dom)
       } else if (Array.isArray(props.children)) {
         reconcileChildren(props.children, dom)
@@ -166,11 +168,36 @@ function updateChildren(parentDOM, oldVChildren, newVChildren) {
   oldVChildren = Array.isArray(oldVChildren) ? oldVChildren : [oldVChildren]
   newVChildren = Array.isArray(newVChildren) ? newVChildren : [newVChildren]
 
-  let max = Math.max(oldVChildren.length, newVChildren.length)
-  for (let i = 0; i < max; i++) {
-    let nexVDom = oldVChildren.find((item, index) => index > i && item && findDOM(item))
-    compareTwoVDom(parentDOM, oldVChildren[i], newVChildren[i], nexVDom?.dom)
-  }
+  let lastPlacedIndex = -1
+
+  let keyedOldMap = {}
+
+  oldVChildren.forEach((oldVChild, index) => {
+    let oldKey = oldVChild.key ? oldVChild.key : index
+    keyedOldMap[oldKey] = oldVChild
+  })
+
+  let patch = []
+
+  newVChildren.forEach((newVChild, index) => {
+    newVChild.mountIndex = index
+    let newKey = newVChild.key ? newVChild.key : index
+    let oldVChild = keyedOldMap[newKey]
+    if (oldVChild) {
+      // 如果有 说明可以复用老节点
+      if (oldVChild.mountIndex < lastPlacedIndex) {
+        patch.push({
+          type: 'MOVE'
+        })
+      }
+    }
+  })
+
+  // let max = Math.max(oldVChildren.length, newVChildren.length)
+  // for (let i = 0; i < max; i++) {
+  //   let nexVDom = oldVChildren.find((item, index) => index > i && item && findDOM(item))
+  //   compareTwoVDom(parentDOM, oldVChildren[i], newVChildren[i], nexVDom?.dom)
+  // }
 }
 
 const ReactDOM = {