react 避免無意義渲染提高組件性能

當組件重新渲染時,會淺比較(如比較引用)props和state,如果發生改變就重新渲染組件,當不改變就不渲染組件
當使用Component時,只要改變了props/state,不管內容是否變化,都會渲染組件
	
方案一:
	在組件中添加shouldComponentUpdate生命週期函數,對數據進行把控後再決定是否渲染

方案二:
	將Component替換成PureComponent
		PureComponent內置了shouldComponentUpdate,組件中不能再寫shouldComponentUpdate
		當使用PureComponent時,建議使用immutable.js來管理數據
			原因:
				redux中使用immutable.js會每次重新返回immutable對象
				若只是js,如果只改變了對象屬性等,會因爲引用沒改變,不觸發render渲染

代碼示例:

import React,{PureComponent} from 'react'
import { WriterWrapper } from '../style';


class Writer extends PureComponent{

    render()
    {
        return(

            <div>
               <WriterWrapper>writer</WriterWrapper>
            </div>
        )
    }
}

export default Writer