两次反应组件安装

Question

在我的React / Redux / ReactRouterV4应用程序的一小部分中，我具有以下组件层次结构，

- Exhibit (Parent)
-- ExhibitOne
-- ExhibitTwo
-- ExhibitThree

在展览的孩子中，也可以绘制大约6种不同的可能路线。不用担心，我将用一些代码进行解释。

这是我的家长展览组件：

export class Exhibit extends Component {
  render() {
    const { match, backgroundImage } = this.props

    return (
      <div className="exhibit">
        <Header />
        <SecondaryHeader />

        <div className="journey"
          style={{
            color: 'white',
            backgroundImage: `url(${backgroundImage})`,
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center-center'
          }}>

          <Switch>
            <Route path={`${match.url}/exhibit-one`} component={ExhibitOne} />
            <Route path={`${match.url}/exhibit-two`} component={ExhibitTwo} />
            <Route path={`${match.url}/exhibit-three`} component={ExhibitThree} />
            <Redirect to="/" />
          </Switch>
        </div>
      </div>
    )
  }
}

基本上，它所做的全部工作就是显示一个展览子组件，并设置背景图像。

这是ExhibitOne子组件之一：

export default class ExhibitOne extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { match } = this.props

    return (
      <div className="exhibit-one">
        <Switch>
          <Route path={`${match.url}/wall-one`} component={ExhibitHOC(WallOne)} />
          <Route path={`${match.url}/wall-two`} component={ExhibitHOC(WallTwo)} />
          <Route path={`${match.url}/wall-three`} component={ExhibitHOC(WallThree)} />
          <Route path={`${match.url}/wall-four`} component={ExhibitHOC(WallFour)} />
          <Route path={`${match.url}/wall-five`} component={ExhibitHOC(WallFive)} />
          <Route path={`${match.url}/wall-six`} component={ExhibitHOC(WallSix)} />
        </Switch>
      </div>
    )
  }
}

为了减少打字，我决定将这些组件包装在一个“高级组件”中，其目的是调度一个动作，该动作将在顶层“展示”父组件上设置适当的背景图像。

这是高阶组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions/wall-background-image'

export default function(ComposedComponent) {
  class ExhibitHoc extends Component {

    componentDidMount = () => this.props.setBackgroundImage(`./img/exhibit-one/${this.getWall()}/bg.jpg`)

    getWall = () => {
      // this part isnt important. it is a function that determines what wall I am on, in order to set
      // the proper image.
    }

    render() {
      return <ComposedComponent />
    }
  }

  return connect(null, actions)(ExhibitHoc);
}

最初加载ExhibitOne时，通过在控制台中查看Redux Logger，可以看到setBackgroundImage操作创建者执行了两次。我最初倾向于使用componentDidMount是因为我认为使用它会限制动作创建者只执行一次。这是日志的屏幕截图：

我想我可能会误解高阶组件的工作原理，或者它是某种类型的React Router V4东西？无论如何，对于为什么执行两次将不胜感激。

Answer 1

在 2020 年，这是由<React.StrictMode>包含<App />在新版本 Create React App 中的组件引起的。从index.js修复了我所有组件的双重安装问题中删除了有问题的组件。我不知道这是设计使然还是什么，但是看到 console.logs() 两次都是令人讨厌和误导的。

Answer 2

问题在于，component这里的prop是一个函数应用程序，在每个渲染器上都会产生一个新类。这将导致以前的组件被卸载而新的组件将被卸载（有关更多信息，请参见文档以了解react-router）。通常，您将使用render道具来处理此问题，但这不适用于高阶组件，因为在渲染期间使用HOC应用程序创建的任何组件无论如何都会在React的对帐过程中重新安装。

一个简单的解决方案是在ExhibitOne类之外创建组件，例如：

const ExhibitWallOne = ExhibitHOC(WallOne);
const ExhibitWallTwo = ExhibitHOC(WallTwo);
..
export default class ExhibitOne extends Component {
  ..
          <Route path={`${match.url}/wall-one`} component={ExhibitWallOne} />
          <Route path={`${match.url}/wall-two`} component={ExhibitWallTwo} />
          ..
}

或者，根据包装器的功能，可以将其声明为可呈现的常规组件（{this.props.children}而不是参数）<ComposedComponent/>，然后将组件包装在每个组件中Route：

<Route path={`${match.url}/wall-one`}
       render={(props) => <Wrap><WallOne {...props}/></Wrap>}
/>

请注意，您需要使用render而不是component来防止重新安装。如果组件不使用布线道具，您甚至可以删除{...props}。