关于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。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容