reactjs - 如何在React中实现Reconciliation概念？

Question

我想向我的列表添加一个字符串，并且我有一个与 HelloWordComponent 分开工作的 CounterComponent，我为“Microsoft”设置 1，为“FaceBook”设置 2 3 代表“ react ”；当我将“yahoo”添加到列表的第一个时，“yahoo”的计数器设置为 1 并且 react 变为 0。

我知道我必须使用唯一 key ，并且我认为 {name} 是合格的，但我不知道到底在哪里使用 key = {name} ？

class HelloWordComponent extends React.Component {
  render() {
    return <div>{this.props.name}</div>
  }
}

class Counter extends React.Component {
    constructor(){
        super()

        this.onPlusClick = this.onPlusClick.bind(this)

         this.state = {count : 0}
    }

    onPlusClick(){
        this.setState(prevState => ({count: prevState.count + 1}))
    }

    render(){
        return <div>
            {this.state.count}
            <button onClick = {this.onPlusClick}>+</button>
        </div>
    }
}

class App extends React.Component{
  constructor(){
    super()

    this.addName = this.addName.bind(this)

    this.state = {
      name: "Sara",
      list:['Microsoft', 'FaceBook', 'React']
    }

  }

  addName(){
    this.setState(prevState =>({list: ['Yahoo', ...prevState.list]}))
  }

  render(){
    return (
    <div >
      {this.state.name}

      {this.state.list.map(name =>{
        return <div>
          <HelloWordComponent key = {name} name = {name}/>
          <Counter/>
          </div>
      })}

      <br/>
      <button onClick= {this.addName}>add a Name</button>
    </div>
    );
  }
}

ReactDOM.render(<App/>,document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"> </div>

Answer 1

我找到了问题的正确解决方案，我必须在我的父根元素 key = {name} 中设置唯一键 ( <div key = {name}> )因此渲染方法更改为:

render(){
    return (
    <div >
      {this.state.name}

      {this.state.list.map(name =>{
        return <div key = {name}>
          <HelloWordComponent name = {name}/>
          <Counter/>
          </div>
      })}