关于React-Native中的StaticRenderer组件

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。