Выполнить функцию OnRender в React Native - PullRequest
Новая
       20

Выполнить функцию OnRender в React Native

1 голос
/ 27 февраля 2020

Ниже приведен код, который генерирует серию кнопок. Когда начальный рендеринг имеет место, функция определяет, есть ли у элемента реквизит, называемый init. Если он делает это, он выполняет действие, как если бы эта кнопка была нажата.

Технически этот код работает, но он выдает предупреждение, поскольку он эффективен, вызывая повторную визуализацию в середине визуализации. Как вы запускаете эффективные функции OnRender? 

export class NavTabItem extends React.Component {
    constructor(props) {
        super(props);
        global.register(this, 'screen')
    }

    NavTabAction = () => {
        global.setState({
            screen: this.props.screen,
        })
    }

    render() {

// determine whether the element has the prop of init and if it does click on it.

        if(this.props.init){
            this.NavTabAction()
        }

        return (
            <TouchableOpacity onPress={this.NavTabAction}>
                <View style={global.state.screen == this.props.screen ? [styles.NavTabItem, styles.NavTabItemSelected] : styles.NavTabItem}>
                    <View style={styles.NavTabIcon} />
                    <TextCap11 style={styles.NavTabLabel}>{this.props.children}</TextCap11>
                </View>
            </TouchableOpacity>
     );
  }
}

Ответы [ 2 ]

1 голос
/ 27 февраля 2020

Для компонентов React на основе классов, таких как в вашем примере, вы должны использовать метод жизненного цикла componentDidMount(), который запускается только один раз после загрузки компонента, например: 

componentDidMount(){
  this.NavTabAction();
}

Тем не менее, я бы посоветовал вам использовать React Hooks , поскольку мир React движется от компонентов на основе классов к функциональным компонентам + хукам.

Для достижения аналогичной функциональности componentDidMount с хуками, вы должны использовать useEffect, как это в функциональном компоненте: 

useEffect(() => {
  this.NavTabAction();
}, []);  // the [] is important here to behave similar to componentDidMount.
0 голосов
/ 27 февраля 2020

Предупреждение вызвано выполнением функции на компоненте, который все еще выполняет рендеринг, и, хотя он технически работает, решение соответствует вопросу.

Существует ряд встроенных функций, в том числе одна, которая будет соответствовать требованиям эффективного onRender.

Удалите скрипт из рендера и поместите его над рендером внутри функции componentDidMount (). 

componentDidMount() {
        if(this.props.init){
            this.NavTabAction()
        }
    }

QED

...