react性能优化达到最大化的方法 immutable.js使用的必要性

 export default class extends Component {
  constructor(props){
  super(props)
  this.state={
   name:"",
   age :"",
   persons:[]
  }
  }
  render() {
  const {name,age,persons} = this.state
  return (
   <div>
   <span>姓名:</span><input value={name} name="name" onChange={this._handleChange.bind(this)}></input>
   <span>年龄:</span><input value={age} name="age" onChange={this._handleChange.bind(this)}></input>
   <input type="button" onClick={this._handleClick.bind(this)} value="确认"></input>
   {persons.map((person,index)=>(
    <Person key={index} name={person.name} age={person.age}></Person>
   ))}
   </div>
  )
  }
  _handleChange(event){
  this.setState({[event.target.name]:event.target.value})
  }
  _handleClick(){
  const {name,age} = this.state
  this.setState({
   name:"",
   age :"",
   persons:this.state.persons.concat([{name:name,age:age}])
  })
 
  }
 }

class Person extends Component {
 componentWillReceiveProps(newProps){
 console.log(`我新的props的name是${newProps.name}，age是${newProps.age}。我以前的props的name是${this.props.name}，age是${this.props.age}是我要re-render了`);
 }
 render() {
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}

import pureRender from "pure-render-decorator"
...

@pureRender
class Person extends Component {
 render() {
 console.log("我re-render了");
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}

class PersonOrigin extends Component {
 render() {
 console.log("我re-render了");
 const {name,age} = this.props;

  return (
  <div>
   <span>姓名:</span>
   <span>{name}</span>
   <span> age:</span>
   <span>{age}</span>
  </div>
  )
 }
}
const Person = pureRender(PersonOrigin)

function shouldComponentUpdate(nextProps, nextState) {
 return shallowCompare(this, nextProps, nextState);
}

function pureRende(component) {
 component.prototype.shouldComponentUpdate = shouldComponentUpdate;
}
module.exports = pureRender;

function shallowCompare(instance, nextProps, nextState) {
 return !shallowEqual(instance.props, nextProps) || !shallowEqual(instance.state, nextState);
} 

 render() {
 const {name,age,persons} = this.state
 return (
  <div>
...省略.....
  {persons.map((person,index)=>(
   <Person key={index} detail={person}></Person>
  ))}
  </div>
 )
 }

{
 detail:{
  name:"123",
  age:"123"}
}