4、React开发中的高阶组件、列表组件与错误处理

React开发中的高阶组件、列表组件与错误处理

1. 高阶组件（HOC）示例与应用

1.1 HOC示例代码

function HOC(Subcomponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      ...
    }
    Render() {
      <ComponentThatProvidesBasicFunctionality>
          <Subcomponent/>
      </ComponentThatProvidesBasicFunctionality>
    }
  }
}

这个高阶组件接收一个子组件作为参数，返回一个增强的类组件。

1.2 多照片动态流案例研究

1.2.1 需求分析

• 用户可以在一个动态流中发布多张照片。
• 如果用户发布的照片数量大于1且小于4，照片以2x2网格显示。
• 如果用户发布的照片数量大于4且小于9，照片以3x3网格显示。

1.2.2 工厂组件实现

export default function FeedFactory(props) {
  let numOfImages = props.ite