render props, 即函数作为子组件

• 术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 在 React 组件间共享代码的简单技术。
• 带有 render prop 的组件带有一个返回一个 React 元素的函数并调用该函数而不是实现自己的渲染逻辑。
• 这是一种设计模式，比如我定义一个Mouse组件, 用于显示鼠标移动时的 X， Y坐标值。这个组件时用在什么元素上，则可以通过props传递给我。如：

class Cat extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class Dog extends React.Component {
  render() {
    const mouse = this.props.mouse;
    return (
      <img src="/dog.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
    );
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseMove = this.handleMouseMove.bind(this);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <h1>Move the mouse around!</h1>
        <Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/>
      </div>
    );
  }
}

高阶组件（HOC）

• 高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的
• 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。当然函数也可以接收别的参数用于获取数据。
• 例如我想在多个自组件中显示系统当前的时间，又不想在每个组件中都import 显示时间的组件，则为了达到复用的效果，我可以将显示时间的组件定义成一个高阶组件。
  • 定义一个带有Timer的高阶组件。

  export default function withTimer(WrappedComponent)   {
    //容器组件
      return class extends React.Component {
        state = { time: new Date() };
        componentDidMount() {
            this.timerID = setInterval(() => this.tick(), 1000);
        }
  
        componentWillUnmount() {
            clearInterval(this.timerID);
        }
  
        tick() {
            this.setState({
                time: new Date()
            });
        }
        render() {
        // {...this.props} 将所有的props传递给元组件
        //容器组件组合包裹组件，且不能修改包裹组件
            return <WrappedComponent time={this.state.time} {...this.props} />;
        }
     };
  }
  

  • 定义一个使用ChatApp（包裹组件） 组件，并通过withTimer进行wrapping。

  class ChatApp extends React.Component {
    constructor(props) {
        super(props);
  
        this.state = {
            message: '',
            inputMessage: '',
        };
  
        this.onInputChange = this.onInputChange.bind(this);
        this.onHandleSend = this.onHandleSend.bind(this);
    }
  
    onInputChange(event) {
        this.setState({
            inputMessage: event.target.value,
        })
    }
  
    onHandleSend() {
        const newMessage = this.state.inputMessage;
        if(!_.isEmpty(newMessage)) {
            this.setState({
               message: newMessage,
               inputMessage: '',
            });
        }
  
    }
  
    render() {
        return (
            <div>
                <div>{this.props.name}</div>
                <div>value={this.state.message}</div>
                <input
                    value={this.state.inputMessage}
                    onChange={this.onInputChange}
                />
                <button onClick={this.onHandleSend}>Send</button>
                <div>
                    {this.props.time.toLocaleDateString()}
                </div>
            </div>
        )
     }
  
  }
  export default withTimer(ChatApp);
  

  • 使用ChatApp组件

  class HocComponent extends React.Component {
    render() {
        return (
            <div className='chat-app'>
                <ChatApp
                name="chat"/>
            </div>
        )
    }
  
  }
  
  export default HocComponent;
  

• 应用场景：用于定义一种设计模式，从而达到复用的目的。
• 约定
  • 高阶组件就是一个没有副作用的函数，
  • 高阶组件是通过将原组件 包裹（wrapping） 在容器组件（container component）里面的方式来 组合（composes） 使用原组件， 并不会改变原始组件。
  • 包裹组件接收容器组件的所有props属性以及一个新的 data（此例中为time属性）属性，并用 data 属性渲染输出内容。
  • 从例子中可以看出，高阶级组件的定义就是一个函数，因此你可以传递任何参数，从而更灵活的使用，比如可以使得data属性是可配置的，则可以传递一个函数，进行不同的选择。
  • 使用时切记不要修改原组件，而是使用组合的形式， 即使用容器组件组合包裹组件，同时不修改包裹组件。
  • 将不相关的props属性传递给包裹组件，{...this.props
    },这么做的目的是高阶组件给组件添加新特性。他们不应该大幅修改原组件的接口。
  • 最大化使用组合

  // React Redux's `connect`
  const ConnectedComment = connect(commentSelector, commentActions)(Comment);
  
  // connect是一个返回函数的函数（译者注：就是个高阶函数）
  const enhance = connect(commentListSelector, commentListActions);
  // 返回的函数就是一个高阶组件，该高阶组件返回一个与Redux store
  // 关联起来的新组件
  const ConnectedComment = enhance(CommentList);
  

  • 包装显示名字以便于调试
• 注意事项
  • 要在render函数中调用高阶函数，如果需要动态调用，可以在构造函数或组件的生命周期函数中调用。
  • 必须将静态方法做拷贝，当使用高阶组件包装组件，原始组件被容器组件包裹，也就意味着新组件会丢失原始组件的所有静态方法。

  function enhance(WrappedComponent) {
  class Enhance extends React.Component {/*...*/}
  // 必须得知道要拷贝的方法 :(
  Enhance.staticMethod = WrappedComponent.staticMethod;
  return Enhance;
  }
  

  • 你可以使用hoist-non-react-statics来帮你自动处理，它会自动拷贝所有非React的静态方法

  import hoistNonReactStatic from 'hoist-non-react-statics';
  function enhance(WrappedComponent) {
    class Enhance extends React.Component {/*...*/}
    hoistNonReactStatic(Enhance, WrappedComponent);
    return Enhance;
  }
  

  • Refs属性不能传递:一般来说，高阶组件可以传递所有的props属性给包裹的组件，但是不能传递refs引用。因为并不是像key一样，refs是一个伪属性，React对它进行了特殊处理。如果你向一个由高阶组件创建的组件的元素添加ref应用，那么ref指向的是最外层容器组件实例的，而不是包裹组件。React.forwardRef 的 API 可以用来解决这一问题

容器型组件。

• 容器型组件（Container component）可以理解成一个页面容器，由一个个展示型组件组成。
• 拥有自身的state， 从服务器获取数据，或者与redux等其他数据处理模块协作。
• 主要关注组件数据如何交互
• 需要通过类定义组件声明，并包好生命周期函数和其他附加方法。

展示型组件

• 展示型组件（Presentational component）， 主要是用于定义一些比较通用的用于页面展示的组件，不包含具体的业务逻辑，如Button, Input 等控件。
• 仅从props接收数据和回调，通常没有自己的state。
• 通常可以写成函数组件。
• 主要负责组件内容如何展示。

有状态组件（stateful）

• 最直观的理解就是组件自身维护了state属性，可以通过this.setState()进行修改。

无状态组件（stateless）

• 没有自己的state属性，全部数据从调用端通过props传入。