React渲染列表并修改其中某项数据

• 功能：一个Persons组件列表，有3个人，每个人有name和age两个属性。有一个input框，输入值时对应的任的age发生变化。
• 知识点：
  1、因为每个Person中会有复用代码，如render的return值，所以抽象成一个函数组件；
  2、函数组件与类组件：
  函数组件—无状态组件，没法使用state。更简单，其中没有this，接受参数返回值即可，无构造函数
  更多见：https://www.jianshu.com/p/e220ef5b0e09
  3、函数组件与高阶组件：
  函数：传入一些参数，返回DOM元素；高阶组件：传入一个组件，返回一个组件。
  4、无需再Person里面写一个函数，用以调用父组件的函数，直接onChange的时候调用父组件的函数即可，注意要把需要的参数传递。
  5、JSON变量是引用变量，指向一个地址。所以如果想复制一个JSON变量，需要先把它变成字符串，再变成JSON格式，就会生成一个内容一样但是地址不一样的新变量。 JSON.parse(JSON.stringify(JSON变量))
  这种方法昨天在哪里报错来着？？？
  6、提高性能的话，不在具体渲染的时候每次进行函数的bind(this)，可以在构造函数中bind，那就只用bind一次即可
  7、setState函数，传入一个state变量，返回一个state变量
  8、newPersons[index][“age”]=newPersons[index].age，两种用法都可以
  9、数组的map函数不止该数组项item一个参数，还可以传index等共4个参数
  10、对象中如果重名，后面的会覆盖前面的重名的属性的值

function Person (props){
  console.log(props);
  const {person}=props;
return(
  <li >
  <h4>{person.name}</h4>
<p>{person.age}</p>
<input onChange={(event)=>{
    props.changeAge(props.index,event.target.value)
}}></input>
</li>
)
  
}
class Persons extends Component{
  constructor(props){
    super()
    this.state={
      persons:[{name:'张三',age:18},{name:'李四',age:18},{name:'王五',age:18}]
    }
    this.changeAge=this.changeAge.bind(this)
  }
  changeAge(index,value){
    // var o = {a:1}
    // var copy_o = JSON.parse(JSON.stringify(o))
    // const newState = JSON.parse(JSON.stringify(this.state));
    const {persons} =this.state;
    const newPersons=persons.concat([])
    newPersons[index]["age"]=value
    this.setState(
      {
        ...this.state,
        persons:newPersons
      }
    )
   
  }
  render(){
    const {persons}=this.state
    return(
      <ul>
        {persons.map((person,index)=><Person key={index} index={index} person={person}  changeAge={this.changeAge}/>
        )}
      </ul>
    )
  }
}
ReactDOM.render(<Persons/>,document.getElementById('root'))