Question

在我的父组件中，我有一个onScroll侦听器，该侦听器确定滚动时是否击中特定点。状态中存储了一个布尔值。我将此状态变量传递给孩子。在那个孩子中，我有一个样式化的组件，该组件随作为道具传递的布尔状态变量而变化。当我快速滚动时，css似乎变化得很慢。反正有什么可以加快速度的吗？

父项：

 class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false
    }
  }

  componentDidMount() {
    var test = ReactDOM.findDOMNode(this.refs.test);
    test.addEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    if (test.scrollTop = 10) {
      this.setState({
        flag: true
      })
    } else {
      this.setState({
        flag: false
      })
    };
  }
  render() { 
    return (
      <Component ref="test" >
      <Child flag={
        this.state.flag
      }/> 
      </Component>
    )
  }
}

子组件：

const Container = styled.div`
     height: ${({flag})=>flag ? "10px" : "50px"}
`;

....
....
....

render(){
  <Container flag={this.props.flag}/>
}

这是我通常所做的事情的一个非常基本的想法，当我真正快速滚动超过触发点时，渲染之前需要一秒钟。无论如何，我可以避免这种延迟并加快速度。还是有推荐的更好的方法呢？

Answer 1

在handleScroll方法中，您无需声明测试。您应该喜欢以下内容：

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      flag: false
    }
  }

  componentDidMount() {
    var test = ReactDOM.findDOMNode(this.refs.test);
    test.addEventListener('scroll', this.handleScroll);
  }

  handleScroll = (event) => {
    if (event.scrollTop = 10) {
      this.setState({
        flag: true
      })
    } else {
      this.setState({
        flag: false
      })
    };
  }
  render() {
    return ( 
      <Component ref="test">
        <Child flag={
          this.state.flag
        }/> 
      </Component>
    )
  }
}

在props上更新样式组件的样式的速度变慢吗？

1 个答案: