Условный рендеринг компонента реакции

Как лучше всего визуализировать компонент, который скрыт в какой-то момент своего жизненного цикла? 1) визуализировать компонент, но не показывать его (display:none). 2) отображать компонент только при необходимости. Что лучше для производительности? Если реквизиты и состояние компонента будут обновлены позже, будет ли лучше, если компонент присутствует, но скрыт в виртуальном DOM?

render() {
    return (
        <div style={{display: this.props.visible ? 'block' : 'none'}}>
            <RestofComponentHere />
        </div>
    );
}

или это:

render() {
    if (!this.props.visible) {
        return null;
    }
    return (
        <div>
            <RestofComponentHere />
        </div>
    );
}

reactjs javascript react-dom performance rendering
person reggie    schedule 24.12.2016    source источник
comment
Если говорить о производительности, то первый вариант лучше, потому что Node существует в DOM, а React меняет свойство css только для того, чтобы показать Node. Второй вариант противоположен, потому что React требует добавления/удаления Node в/из DOM., основываясь на лучших практиках - добавление или удаление элементов всегда медленнее, чем просто изменение видимости элемента   -  person Oleksandr T.    schedule 24.12.2016
comment
Да. Но также существует баланс между первым рендерингом страницы (который был бы быстрее, если компонент вообще не рендерится) и будущим использованием компонента. Допустим, компонент представляет собой подменю, которое отображается только тогда, когда пользователь решает отфильтровать элементы на странице. Большинство пользователей никогда этого не сделают. Так для них страница будет отображаться быстрее...   -  person reggie    schedule 24.12.2016
comment
Возможный дубликат Как условно загружать компоненты в ReactJS   -  person Red fx    schedule 14.09.2017

Ответы (2)


arrow_upward
0
arrow_downward

Просто выберите то, что лучше всего подходит для этой ситуации. Иногда это метод 1, а иногда метод 2. Если вы обнаружите, что это замедляет ваше приложение, то довольно легко перейти на метод 1, но это должно произойти только в том случае, если вы условно выполняете тонну раз. Когда у вас есть ссылка на компонент, вы хотите всегда отображать его, чтобы вы могли получить доступ к ссылке в componentDidMount, и чтобы он был скрыт.

Первый метод быстрее, как показано в ответе здесь, но не делайте микрооптимизации ради это если условно рендеринг - это более чистый код.

Я использовал смесь в своих приложениях.

person Martin Dawson    schedule 24.12.2016

arrow_upward
0
arrow_downward

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

    constructor(props){
       //Set some initial condition for display depending on prop or default value
        //Something similar to this: 
        display: props.toDisplay === undefined ? true : props.toDisplay
    } 

    componentDidMount(){
        //update the state depending on the response or change
    } 

    onClick(event){
      //It might depend on someOther component's click action. 
    }

Метод рендеринга будет иметь следующее:

    render(){
       const toDisplay = this.state.display 
       if(toDisplay && 
        // Component To render
        )
    }
person Priti Biyani    schedule 22.05.2017