Question

我们希望显示一个看起来像gif的图片的循环幻灯片。此网址上显示当前结果：https://figuredevices.com。

我们当前的方法是使用不透明度来显示或隐藏幻灯片：

class SlideShow extends React.Component {

  constructor(props, context) {
    super(props);
    this.state = {
      currentSlide: 0
    };
    this.interval = null;

  }

  componentDidMount() {
    this.interval = setInterval(this.transitionToNextSlide.bind(this), 200);
  }

  componentWillUnmount(){
    if(this.interval){
      clearInterval(this.interval);
    }
  }

  transitionToNextSlide() {

    let nextSlide = this.state.currentSlide + 1;

    if (nextSlide == this.props.slides.length) {
        nextSlide = 0;
    }
    this.setState({currentSlide: nextSlide});
  }


  render () {

    let slides = this.props.pictures.map((picture, idx) => {
      let slideContainerStyle = {
        opacity: this.state.currentSlide == idx ? 1 : 0
      };
      return(
        <div style={slideContainerStyle} key={idx}>
          <Slide picture={picture}/>
        </div>
      );
    })

    let containerStyle = {
      width:'100%'
    };

    return (
      <div style={containerStyle}>
          {slides}
      </div>
    );

  }

};

将图片5加5加载到this.props.picture。图片的数量没有限制，我担心这个数字增长的性能。有两件事对我来说不合适：

render方法中的map操作每200ms遍历一个整数组，只改变两个css属性。
DOM的大小正在增长，但大多数节点都是隐藏的

您是否建议采用更好的方法，可能使用animation或react-motion？

Answer 1

您应该将所有图片保存为数组，并且每200毫秒增加数组索引。然后，不是每次都显示所有图片，而是让它以当前索引显示图片。这样做要好得多，因为你只返回一张照片而不是一堆看不见的照片：）

注意：我无法对此进行测试，因此我不确定一切语法是否完全正确，但这是一般的想法。每200ms，增加slideIndex。然后，总是返回一个只包含您想要查看的图片的div。

module

React.js循环图片幻灯片

1 个答案: