1. 避免子元件做多次無用的渲染
   shouldComponentUpdate(nextProps,nextState){
       if( this.props.content!=nextProps.content){
      return true
       }else{
           return false;
       }
   }
   render(){
       console.log("childrender");
       const {content}= this.props;
       // console.log("this.props:",this.props );
       return(
               <div onClick={this.handelClick}  dangerouslySetInnerHTML={{__html:content}}></div>
       )
   }
    
   

2. 將bind繫結放在constructor中，讓繫結的動作只執行一次

constructor(props){ // 當元件的state或者props發生改變的時候，render函式就會重新執行 super(props); this.handelClick=this.handelClick.bind(this) this.state={ }

3.api的呼叫

// 頁面掛載之前執行
componentWillMount(){
    axios.get('/api/todolist')
        .then(res=>{
            console.log("res:",res.data);
            this.setState(()=>({
                list:[...res.data]
            })
            )
        })
        .catch((error)=>{
            alert(error)
        })
      // 在元件即將被掛在到頁面的時刻執行
      // console.log("componentWillMount");
}