浅谈React中组件逻辑复用的那些事儿

//下面代码在新版React中可正常运行，因为现在已经无法使用 `React.createClass`，我就不使用 `React.createClass` 来写了。

const createReactClass = require('create-react-class');
const PureRenderMixin = require('react-addons-pure-render-mixin');

const MyDialog = createReactClass({
  displayName: 'MyDialog',
  mixins: [PureRenderMixin],
  //other code
  render() {
    return (
      

        {/* other code */}
      
    )
  }
});

//react-addons-pure-render-mixin 源码
var shallowEqual = require('fbjs/lib/shallowEqual');

module.exports = {
 shouldComponentUpdate: function(nextProps, nextState) {
  return (
   !shallowEqual(this.props, nextProps) ||
   !shallowEqual(this.state, nextState)
  );
 },
};

//接受一个组件 WrappedComponent 作为参数，返回一个新组件 Proxy
function withXXX(WrappedComponent) {
  return class Proxy extends React.Component {
    render() {
      return 
    }
  }
}

import ThemeContext from './context';
function withColorTheme(optiOns={}) {
  return function(WrappedComponent) {
    return class ProxyComponent extends React.Component {
      static cOntextType= ThemeContext;
      render() {
        return ()
      }
    }
  }
}

import ThemeContext from './context';

function withColorTheme(optiOns={}) {
  return function(WrappedComponent) {
    class ProxyComponent extends React.Component {
      static cOntextType= ThemeContext;
      render() {
        return ()
      }
    }
  }
  function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
  }
  const displayName = `WithColorTheme(${getDisplayName(WrappedComponent)})`;
  ProxyComponent.displayName = displayName;
  return ProxyComponent;
}

import ThemeContext from './context';
import hoistNonReactStatics from 'hoist-non-react-statics';
function withColorTheme(optiOns={}) {
  return function(WrappedComponent) {
    class ProxyComponent extends React.Component {
      static cOntextType= ThemeContext;
      render() {
        return ()
      }
    }
  }
  function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
  }
  const displayName = `WithColorTheme(${getDisplayName(WrappedComponent)})`;
  ProxyComponent.displayName = displayName;
  ProxyComponent.WrappedCompOnent= WrappedComponent;
  ProxyComponent.propTypes = WrappedComponent.propTypes;
  //contextType contextTypes 和 childContextTypes 因为我这里不需要，就不拷贝了
  return ProxyComponent;
}

import ThemeContext from './context';
import hoistNonReactStatics from 'hoist-non-react-statics';
function withColorTheme(optiOns={}) {
  return function(WrappedComponent) {
    class ProxyComponent extends React.Component {
      static cOntextType= ThemeContext;
      render() {
        const { forwardRef, ...wrapperProps } = this.props;
        return 
      }
    }
  }
  function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
  }
  const displayName = `WithColorTheme(${getDisplayName(WrappedComponent)})`;
  ProxyComponent.displayName = displayName;
  ProxyComponent.WrappedCompOnent= WrappedComponent;
  ProxyComponent.propTypes = WrappedComponent.propTypes;
  //contextType contextTypes 和 childContextTypes 因为我这里不需要，就不拷贝了
  if (options.forwardRef) {
    let forwarded = React.forwardRef((props, ref) => (
      
    ));
    forwarded.displayName = displayName;
    forwarded.WrappedCompOnent= WrappedComponent;
    forwarded.propTypes = WrappedComponent.propTypes;
    return hoistNonReactStatics(forwarded, WrappedComponent);
  } else {
    return hoistNonReactStatics(ProxyComponent, WrappedComponent);
  }
}

import ThemeContext from './context';
import hoistNonReactStatics from 'hoist-non-react-statics';
function withColorTheme(optiOns={}) {
  return function(WrappedComponent) {
    class ProxyComponent extends React.Component {
      static cOntextType= ThemeContext;

      getWrappedInstance = () => {
        if (options.forwardRef) {
          return this.wrappedInstance;
        }
      }

      setWrappedInstance = (ref) => {
        this.wrappedInstance = ref;
      }

      render() {
        const { forwardRef, ...wrapperProps } = this.props;
        let props = {
          ...this.props
        };

        if (options.forwardRef) {
          props.ref = this.setWrappedInstance;
        }
        return 
      }
    }
  }
  
  function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component';
  }

  const displayName = `WithColorTheme(${getDisplayName(WrappedComponent)})`;
  ProxyComponent.displayName = displayName;
  ProxyComponent.WrappedCompOnent= WrappedComponent;
  ProxyComponent.propTypes = WrappedComponent.propTypes;
  //contextType contextTypes 和 childContextTypes 因为我这里不需要，就不拷贝了
  if (options.forwardRef) {
    let forwarded = React.forwardRef((props, ref) => (
      
    ));
    forwarded.displayName = displayName;
    forwarded.WrappedCompOnent= WrappedComponent;
    forwarded.propTypes = WrappedComponent.propTypes;
    return hoistNonReactStatics(forwarded, WrappedComponent);
  } else {
    return hoistNonReactStatics(ProxyComponent, WrappedComponent);
  }
}

function withColorTheme(optiOns={}) {
  function(WrappedComponent) {

  }
}

function withColorTheme(WrappedComponent, optiOns={}) {
}

@connect(mapStateToProps, mapDispatchToProps)
@withColorTheme()
export default class TextInput extends Component {
  render() {}
}

// ... 你可以编写组合工具函数
// compose(f, g, h) 等同于 (...args) => f(g(h(...args)))
const enhance = compose(
 // 这些都是单参数的 HOC
 withRouter,
 connect(commentSelector)
)
const EnhancedCompOnent= enhance(WrappedComponent)

withRouter(connect(commentSelector)(withColorTheme(options)(WrappedComponent)));

const enhance = compose(
 withRouter,
 connect(commentSelector),
 withColorTheme(options)
)
const EnhancedCompOnent= enhance(WrappedComponent)

function withColor(WrappedComponent) {
  class ProxyComponent extends WrappedComponent {
    //注意 ProxyComponent 会覆盖 WrappedComponent 的同名函数，包括 state 和 props
    render() {
      //React.cloneElement(super.render(), { style: { color:'red' }})
      return super.render();
    }
  }
  return ProxyComponent;
}

 (
    
      
    
  )}
/>

import React, {Component} from 'react';
import {
  FlatList,
  View,
  Text,
  TouchableHighlight
} from 'react-native';

class MyList extends Component {
  data = [{ key: 1, title: 'Hello' }, { key: 2, title: 'World' }]
  render() {
    return (
       {
          return (
             { alert(item.title) }}
            >
              {item.title}
            
          )
        }}
        ListHeaderCompOnent={() => {
          return (以下是一个List)
        }}
        ListFooterCompOnent={() => {
          return 没有更多数据
        }}
      />
    )
  }
}

//提供一个 renderPage 的 prop
class Swiper extends React.PureComponent {
  getPages() {
    if(typeof renderPage === 'function') {
      return this.props.renderPage(XX,XXX)
    }
  }
  render() {
    const pages = typeof renderPage === 'function' &＃63; this.props.renderPage(XX,XXX) : XXXX;
    return (
      
        
          {pages}
        
      
    )
  }
}

import React from 'react';
import { View } from 'react-native';
import Swiper from 'XXX';
class MySwiper extends React.Component {
  render() {
    return (
       {
          return (
            
          )
        }}
      />
    )    
  }
}

import React from 'react';
import { View } from 'react-native';
import Swiper from 'XXX';
class MySwiper extends React.Component {
  renderPage(pageDate, pageIndex) {
    return (
      
    )
  }
  render() {
    return (
      
    )    
  }
}

import React, {useEffect} from 'react';

export default function useLogger(componentName,...params) {
  useEffect(() => {
    if(process.env.NODE_ENV === 'development') {
      console.log(componentName, ...params);
    }
  });
}

import React, { useState } from 'react';
import useLogger from './useLogger';

export default function Counter(props) {
  let [count, setCount] = useState(0);
  useLogger('Counter', props);
  return (
    

       setCount(count + 1)}>+
      
{`${props.title}, ${count}`}
    
  )
}