Расскажите об использовании React --componentWillReceiveProps

внешний интерфейс

Что такое компонентWillReceiveProps?

componentWillReceiveProps является связующим звеном в жизненном цикле React.Что касается жизненного цикла React, учащиеся могутздесьУзнать больше.

componentWillReceiveProps не будет выполняться при инициализации рендеринга, а сработает, когда компонент получит новое состояние (Props), которое обычно используется для повторного рендеринга дочернего компонента при обновлении состояния родительского компонента. Эта штука очень полезная, но при неправильном использовании может иметь очень серьезные последствия.

В callback-функции componentWillReceiveProps мы можем получить пропсы, полученные через this.props, а затем новые пропсы передаются через параметры функции, здесь мы можем сравнить два пропса, чтобы сделать состояние этого компонента безопасным Измените, а затем повторно отрисуйте наш компонент или вызовите какой-либо метод в дочернем компоненте.

//这种方式十分适合父子组件的互动，通常是父组件需要通过某些状态控制子组件渲染亦或销毁...

componentWillReceiveProps(nextProps) {//componentWillReceiveProps方法中第一个参数代表即将传入的新的Props
    if (this.props.sharecard_show !== nextProps.sharecard_show){
        //在这里我们仍可以通过this.props来获取旧的外部状态
        //通过新旧状态的对比，来决定是否进行其他方法
        if (nextProps.sharecard_show){
            this.handleGetCard();
        }
    }
}

Вышеупомянутый метод является широко используемым методом componentWillReceiveProps, но если он используется неправильно, это может привести к следующим последствиям: Как правило, компонент попадает в бесконечный цикл рендеринга, и он всегда будет принимать новое внешнее состояние и заставит себя быть все время перерисовывается.

componentWillReceiveProps(nextProps) {
    if (this.props.sharecard_show !== nextProps.sharecard_show){
        if (nextProps.sharecard_show){
            this.handleGetCard();
        }
    }
}

handleGetCard() {
    this.props.test()
}

//父组件内

test() {
    this.setState({
        sharecard_show: !this.state.sharecard_show
    })
}

Как только такой код появляется в проекте, велика вероятность, что он попадет в бесконечный цикл, два компонента будут продолжать передавать состояние и перерендериваться, и тогда страница оценивается как зависшая. Это одно из мест, на которое следует обратить внимание, и мы должны помнить, что лучше всего сравнивать два состояния, если вы хотите внести какие-либо изменения в componentWillReceiveProps, и переходить к следующему шагу, если состояние отличается. В противном случае легко вызвать множественные рендеринги компонентов, и эти рендеринги бессмысленны.

Категории