``` 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> ) } } ```