``` import React,{Component,PureComponent}from 'react'; import {fromJS,Map,List,is} from 'immutable'; //map-》对象 list-》数组 // PureComponent 实现 // class PureComponent extends Component{ // //浅比较 比较的是地址 // shouldComponentUpdate(nextProps,nextState){ // // // 循环下一个新的属性对象的每一个属性，判断新的属性值和旧的属性是不是同一个 // // for(let prop in nextProps){ // // if(nextProps[prop] !== this.props[prop]){ // // return true; // // } // // } // // for(let state in nextState){ // // if(nextState[state] !== this.state[state]){ // // return true; // // } // // } // // return false; // // // 只要值有不同(不管引用不引用,刚使用immutable已确保是不同的引用)，就会放行更新 // return !(is(newProps,this.props)&&is(nextState,this.state)); // } // } export default class Todos extends PureComponent{ constructor(props){ super(props); this.state = {todos:[]}; } handleClick = ()=>{ let todo = this.todo.value; // this.state.todos.push(todo); // this.setState({todos:this.state.todos}); // this.setState({}); //表示没有改变数据，不需要重新渲染，但却是会重新渲染的（调用render） //注意不是置空，这其实是一个合并操作 // 只要调用setState就会刷新，不管状态是否更改 // this.setState({todos:[...this.state.todos]}); //新对象内存地址肯定不一样了三 // this.setState({}); // 这样可以，但。。。每次会创建一个新的对象,占内存 // 那递归深比较？CPU占用会很高 let todos = List(this.state.todos); todos = todos.push(todo); this.setState({todos}); } // 重写此方法以减少重新渲染 shouldComponentUpdate(nextProps,nextState){ //如果集成自PureComponent就可省去此方法了 if(nextState.todos === this.state.todos){ return false; //老的状态对象如果是和新的状态对象是同一个的话，就不用再渲染了 // 但这样要注意的是因为todos是一个对象，nextState.todos和this.state.todos的指向的是同一个地址，故永远是相同的，会永远返回false(纵然状态已经发生改变) }else{ return true; } } // 这个ref绑定的函数 会在虚拟DOM转换成真实DOM时立即被调用 render(){ return ( <div> <input ref={input=>this.todo = input} type="text"/><button onClick={this.handleClick}>+</button> <ul> { this.state.todos.map((todo,index)=>(<li key={index}>{todo}</li>)) } </ul> </div> ) } } ```