React Native перерисовывает только определенные компоненты

Допустим, у меня есть 10 или более компонентов на моей странице, теперь всякий раз, когда я меняю состояние с помощью setState, реагирую на собственный повторный рендеринг всех компонентов (тот, который изменяется, и все остальные, которые на самом деле не нужно менять).

Как сделать так, чтобы реагировать только на повторный рендеринг некоторых компонентов, на которые повлияло изменение состояния? Я где-то читал, что вы можете сделать это, используя ключевые реквизиты, но у меня нет примера, как это сделать.

export default class MyApp extends React.Component({

    constructor(props) {
        super(props);
        this.state = {
            result: ''
        }
    }

    LoadChild() {
        // Some functions that load a tabnavigator component
    }

    render() {
        return(
            <View style={{ flex: 1}}>
                <ParentComponent>
                    <Text>
                        //Some Text that need to be updated
                        { this.state.result }
                    </Text>

                    <ChildComponent>
                        { this.LoadChild() }
                    </ChildComponent>
                </ParentComponent>
            </View>
        );
    }
});

Всякий раз, когда я вызываю функцию, которая изменяет состояние, например setState({ result: 'test' }), мне нужно, чтобы текст в ParentComponent повторно отображал текущее состояние, но это также приводит к повторному отображению ChildComponent, вызывая функцию LoadChild() для повторного срабатывания, и поэтому componentDidMount() также срабатывает снова. Я хочу, чтобы состояние влияло только на текст в ParentComponent при изменении состояния.


react-native reactjs javascript rerender
person Charas    schedule 08.07.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

То, что вы ищете, это shouldComponentUpdate. Это задокументировано здесь. Также ознакомьтесь с документами по оптимизации производительности.

тлдр:

В настоящее время, если shouldComponentUpdate() возвращает false, то UNSAFE_componentWillUpdate(), render() и componentDidUpdate() вызываться не будут.

ключи служат немного другой цели, читайте здесь

person vonovak    schedule 08.07.2018
comment
Привет, спасибо за ваш ответ, изучил его, когда попробовал shouldComponentUpdate, как я понял, он остановил все для повторного рендеринга, где я хочу повторно визуализировать, но только какой-то компонент, как мне отделить shouldComponentUpdate, чтобы он только повторно отображал определенный компонент? Я обновил и добавил некоторые коды для лучшего понимания. - person Charas; 09.07.2018