Реагировать: Предотвратить повторный набор, когда родительские ререйдеры

Question

У меня есть компонент, Split, который занимает двоих детей. Первый ребенок будет отображаться в левой части экрана & вторым ребенком с правой стороны. Если ширина экрана будет ниже определенной точки, тогда отобразится только правая сторона, а левая сторона будет удалена из DOM.

Пример детей может быть компонентом Sidebar и компонентом Content. Для мобильных устройств я не хочу отображать меню, но имею специальное мобильное меню, которое я всплываю.

Мой вопрос: Как я могу удалить компонент Sidebar без размонтирования & переустановка компонента Content?

В принципе у меня есть что-то вроде этого:

<Split> 
    <Sidebar/> 
    <Content/> 
</Split> 

И Split «s метод визуализации выглядит примерно так:

let children; 
let firstChild = this.props.children[0]; 
let lastChild = this.props.children.pop(); 
if (this.state.responsive === 'singleColumn') { 
    children = (
    <div> 
     <div style={{display: 'none'}}>{firstChild}</div> 
     {lastChild} 
    </div> 
); 
} else { 
    children = (
    <div> 
     {firstChild} 
     {lastChild} 
    </div> 
); 
} 

return (
    <div> 
    {children} 
    </div> 
); 

Даже если {LastChild} всегда визуализируется, независимо от того, что он по-прежнему размонтируется и монтируется каждый раз, когда раскол должен перерисовываться!

Даже имея рендер, который выглядит следующим образом:

return (
    <div> 
    {this.props.children.pop()} 
    </div> 
); 

вызывает последний ребенок (который никогда не меняется), чтобы быть демонтирована & перемонтирована перед тем, как оказано.

Если я вместо изменения Split и передать компонент, который всегда будет в DOM в качестве атрибута, как так:

<Split staticComponent={<Content />}> 
    <Sidebar /> 
</Split> 

он прекрасно работает. Тогда почему это не работает, когда я просто выталкиваю последнего такого ребенка {this.props.children.pop()} в противоположность этому {this.props.staticComponent}

Есть ли разумный способ решить эту проблему?

Answer 1

Наконец-то удалось решить проблему! Я переписал Split «s воздавать выглядеть примерно так:

let left; 
if (this.state.responsive !== 'singleColumn') { 
    left = this.props.children.slice(0, -1); 
} 

return (
    <div ref="split" className={classes.join(' ')}> 
    {left} 
    {this.props.children[this.props.children.length-1]} 
    </div> 
); 

Таким образом, последний ребенок всегда визуализируется. Очевидно, pop() не работал, потому что тогда я изменил исходный массив дочерних элементов, который вызвал странное поведение.

Answer 2

Это может быть сделано с помощью метода жизненного цикла: shouldComponentUpdate:

shouldComponentUpdate: function(nextProps, nextState) { 
    return this.props.value !== nextProps.value; 
} 

Если логика внутри возвращать ложь, то компонент не будет обновляться.

ЗАКАНЧИВАТЬ документы: https://facebook.github.io/react/docs/advanced-performance.html

Answer 3

Вы можете использовать функцию shouldComponentUpdate в жизненном цикле компонента. Если он возвращает false, в соответствии с документацией

Если shouldComponentUpdate возвращает false, то render() будет полностью пропущен до следующего изменения состояния. Кроме того, componentWillUpdate и componentDidUpdate не будут вызываться.