0

我正在构建一个react-scroll在主页上使用的 React 应用程序。我有一系列元素，它们跨越了我正在滚动div的整个视口（height: 100vh; width: 100vw当您选择任何导航箭头（向上或向下）时，窗口会平滑滚动到下一个位置，但在此过程中会出现卡顿。该问题似乎this.setState是在我的handleSectionChange方法中调用时引起的，因为将其注释掉可以解决问题，但是它也删除了更新导航箭头值所需的功能。

// Located in main component and passed as a prop to component that calls it
handleSectionChange(incrementValue) {
    // Number of section being scrolled to
    var newSectionNumber = this.state.displayedSectionNumber + incrementValue
    var prevSection = homeViewSections.sections[newSectionNumber - 1];
    var nextSection = homeViewSections.sections[newSectionNumber + 1];

    // ID of section below current section to assign "to" property to in Link component
    var nextSectionId = "";

    // ID of section above current section to assign "to" property to in Link component
    var prevSectionId = "";
    var downArrowContainer = document.querySelector('.navigationArrowContainer.down')
    var upArrowContainer = document.querySelector('.navigationArrowContainer.up')

    // Repositions down arrow if intro section is displayed
    if (newSectionNumber === 0) {
        downArrowContainer.classList.add("homeIntroPosition")
    } else {
        downArrowContainer.classList.remove("homeIntroPosition")
    }

    // Displays up arrow if any section other than the first one is displayed
    if (newSectionNumber > 0) {
        prevSectionId = prevSection.referenceId
        upArrowContainer.style.visibility = "initial"
    } else {
        upArrowContainer.style.visibility = "hidden"
    }

    this.setState({
        displayedSectionNumber: newSectionNumber,
        prevSectionId: prevSectionId,
        nextSectionId: nextSectionId
    })
}

该handleSectionChange方法作为道具传递给另一个调用它的组件（并且是唯一调用它的方法）

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

handleScroll() {
    const vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    const scrollValue = window.scrollY;
    const newSectionNumber = Math.round(scrollValue / vh)
    this.animateHomeViewNavBar()
    this.setHomeViewNavLinkToActive();
    if (newSectionNumber !== this.props.currentSectionNumber)
        this.props.handleSectionChange(newSectionNumber - this.props.currentSectionNumber)
}

handleSectionChange正如您从上面的代码中看到的那样，调用该方法的次数似乎不是问题，因为if条件将其限制为仅在更改节号时。我能够handleChangeMethod通过注释掉各种组合this.animateHomeViewNavbar的this.setHomeViewNavLinkToActive方法来查明问题，解决问题的唯一方法是注释掉该handleSectionChange方法，即使调用其他方法也是如此。然后，如前所述，handleSectionChange当我注释掉时，该方法似乎消除了问题this.setState，但这当然是功能所必需的。这也是两个适用类中唯一调用 的方法setState，因此似乎没有任何冲突。

4

0 回答 0