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函数来决定,并且根据shouldComponentUpdate回调函数的返回值也就是props.shouldUpdate,来决定了是否会re-render包裹的组件,如果将shouldUpdate设置为false,则就不能通过父组件改变子组件的props触发子组件re-render了,组件的页面状态完全由初始的props来决定,形成一种静态页面。
所以在ListView中我们的所有item的Component的都是props所决定的一次性的结果,不能进行re-render。如果要进行re-render,就只有改变dataSource触发ListView组件re-render。