Question

我希望我的组件的行为会有所不同，具体取决于浏览器窗口的宽度。

我没有重复使用相同的函数来获取每个组件中浏览器的宽度，而是考虑将所有组件包装在父组件中 -

<mainComponent>
  <childComponent1/>
  <childComponent2/>
  <.../>
</mainComponent>

获取窗口的宽度并将其传递给子组件 -

handleResize = (e) => {
  this.setState({windowWidth: window.innerWidth})
};

componentWillMount() {
  this.handleResize()
}

componentDidMount() {
  window.addEventListener('resize', this.handleResize)
}

componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize)
}

render() {
  return <div>
    {React.cloneElement(this.props.children, { windowWidth: this.state.windowWidth })}
  </div>
}

这似乎是一个糟糕的解决方案，因为它可能会对性能产生负面影响，尤其是在应用程序变大的情况下。

我是否认为此解决方案存在性能问题？
在调整大小事件期间，传递给子节点的prop值会在调整大小操作（725,724,723，...）期间不断更改。如果将宽度分组（s，m，l，xl，...）以便传递给孩子的道具不会经常变化，会不会有任何性能提升？
如果我使用像Redux或Relay这样的东西，可能会更容易管理状态，但是会有任何性能提升吗？
从性能角度来看，有没有更好的方法来解决这个问题？

Answer 1

我会说这一切听起来像是在过度思考这个问题。

您可以尝试查看Bootstrap网格系统，因为它可以为您完成所有艰苦的工作。甚至还有反应引导程序，所以你一定要检查出来。通过网格系统，因为它非常简单和有效。

网格系统完全符合您的要求。包含行和列中的组件，您可以根据浏览器的宽度传递不同的道具。有xs sm md和lg。

https://react-bootstrap.github.io/

父组件中事件处理程序的性能

1 个答案: