0

在我的 React App 的根组件中，我有这个：

class App extends Component {
...
  ComponentDidMount() {
    window.addEventListener('resize', this.handleResize, false);
  }
  handleResize{
    this.parentSize = {height: window.innerWidht - this.node.offsetLeft ..., width: ...};
    this.forceUpdate();
  }
  render() {
    <div ref="e=>this.node=e}>
      <ChildComponent parentSize={this.ParentSize} />
    </div>
  }
}

我注意到当 App 组件通过 setState 或 forceUpdate() 重新渲染时，子组件实际上被重新安装（因此每次更新都会调用 componentWillUnmount、componentWillMount、componentDidMount）。我期望的行为是再次调用 Child 组件的渲染函数。我最近升级到 React-router 4.x，所以我不确定它是否与此有关。

有人可以告诉我这是否是设计使然吗？当我尝试在其中获取数据时，多次调用我的 componentDidMount 会导致一些问题，并且我不想在调整大小期间多次执行该昂贵的操作。

更新：

我找到了这个问题的可能原因。我有多个嵌套组件，由于很难发布整个项目，因此有时很难发布导致问题的实际代码。但我认为就是这样：

return (
  <div className="app-view" style={style} ref={el=>this.node=el}>
    <Switch>
      <Route exact path='/' component={() => <Home store={store} />} />
      <Route path='*' component={Error404} />
    </Switch>
  </div>
);

在这里，我试图将道具传递给路由中的组件（React-router 4.x），我通过提供一个创建主页的函数来做到这一点，该函数可能在每次渲染时重新创建主页。

所以问题就变成了，如何在路由内的每次渲染时不重新创建页面的情况下传递道具？

4

2 回答 2

8

我已经确认这个问题与我最近的 React-Router 4.x 升级有关。React-Router 的文档：

当你使用组件（而不是渲染或子，下面）时，路由器使用 React.createElement 从给定组件创建一个新的 React 元素。这意味着如果您为组件属性提供内联函数，您将在每次渲染时创建一个新组件。这会导致现有组件卸载和新组件安装，而不是仅仅更新现有组件。使用内联函数进行内联渲染时，请使用 render 或 children 道具（如下）。

感谢大家的支持。

于 2017-08-11T12:35:31.887 回答
1

在我看来，从您发布的代码来看，您提到的功能都会改变this.parentSize然后重新呈现页面。事件如果 的值this.parentSize没有改变，它的值被重新赋值：

this.parentSize = {height: window.innerWidht - this.node.offsetLeft ..., width: ...};

如果我的理解是正确的，那么子组件需要重新渲染，因为用于生成组件的信息发生了变化，因此必须重新渲染组件以考虑到道具的变化。很可能是 DOM 没有变化，所以页面在视觉上没有变化。

printOperations您可以通过使用 Perf 插件和使用该功能来检查正在执行的操作。

防止重新渲染的一种方法是shouldcomponentupdate在您不希望组件重新渲染时使用并返回 false

编辑：

根据上面提供的信息，您似乎想通过调用父组件上的函数来更新子组件，但不希望父组件重新渲染？

如果是这种情况，您可以执行以下操作：

子组件第一次渲染时，调用componentWillMount，并从父组件获取您希望能够控制的道具，并将其保存为状态，如下所示：

componentWillMount() {
  const { myProp } = this.props;
  this.setState({
    myProp
  });
}

然后在这个组件中创建一个函数，称为：

updateMyProp(newProp) {
  this.setState({
    myProp: newProp
  })
}

从此，这个变量由控制state而不是props

接下来，在父页面上，组件需要有一个ref变量，像这样：

<Yourcomponent
  ref={d=> this.componentName = d}
  ...
/>

updateMyProp现在，您可以通过执行以下操作从父页面调用该函数：

this.componentName.updateMyProp(someNewValue)

这将导致子组件渲染，而不是父组件

我希望我能正确理解你的问题！！

于 2017-08-11T11:36:52.577 回答