ReactNative中內置了StaticRender組件,主要用在了listview與viewpager等組件的item中,對復用性及性能有一定的提升鼻种。
../app/node_modules/react-native/Libraries/Components/StaticRenderer.js
源碼如下:
'use strict';
var React = require('React');
var PropTypes = require('prop-types');
class StaticRenderer extends React.Component {
props: {
shouldUpdate: boolean,
render: Function,
};
static propTypes = {
shouldUpdate: PropTypes.bool.isRequired,
render: PropTypes.func.isRequired,
};
shouldComponentUpdate(nextProps: { shouldUpdate: boolean }): boolean {
return nextProps.shouldUpdate;
}
render(): React.Element<any> {
return this.props.render();
}
}
module.exports = StaticRenderer;
很簡短的源碼。
StaticRenderer渲染效果完全由props的render函數(shù)來決定缘揪,并且根據(jù)shouldComponentUpdate回調函數(shù)的返回值也就是props.shouldUpdate,來決定了是否會re-render包裹的組件木西,如果將shouldUpdate設置為false畴栖,則就不能通過父組件改變子組件的props觸發(fā)子組件re-render了,組件的頁面狀態(tài)完全由初始的props來決定八千,形成一種靜態(tài)頁面吗讶。
所以在ListView中我們的所有item的Component的都是props所決定的一次性的結果,不能進行re-render恋捆。如果要進行re-render照皆,就只有改變dataSource觸發(fā)ListView組件re-render。