Производительность обработчика события в родительском компоненте

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> 
} 

Это похоже на плохое решение, поскольку это может негативно повлиять на производительность, особенно если приложение становится большим.

1. Могу ли я предположить, что с этим решением возникнет проблема с производительностью?
2. Во время события изменения размера значение пропусков, переданное ребенку, непрерывно изменяется во время действия изменения размера (725, 724, 723, ...). Будут ли какие-либо выигрыши в производительности, если ширина сгруппирована (s, m, l, xl, ...), так что реквизит, переданный ребенку, не изменяется так часто?
3. Может быть, проще управлять состоянием, если я использую что-то вроде Redux или Relay, но будет ли какое-то увеличение производительности?
4. Есть ли лучший способ решить эту проблему с точки зрения производительности?

Answer 1

Я бы сказал, что все это звучит так, будто вы слишком задумываетесь о проблеме.

Вы можете попробовать и посмотреть на систему сетки Bootstrap, так как она выполняет всю тяжелую работу для вас. Существует даже реакция-бутстрап, написанный, поэтому вы обязательно должны это проверить. Переходите через сетку, так как она довольно проста и эффективна.

Система сетки делает именно то, что вы пытаетесь сделать. Обтекает компонент в строках и столбцах, к которым вы передаете разные реквизиты, которые отвечают по ширине браузера. Существует xs sm md и lg.

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