Reactjs 在react组件中的何处调用该方法？

我是新手。我创建了一个简单的滑块组件。它正在工作，但我想问是否有一种正确的方法来调用该方法？现在我正在调用构造函数。如果有任何建设性的批评，我将不胜感激。多谢各位

import React from 'react';

export default class Slider extends React.Component {

    constructor() {
        super();

        this.state = {
            current: 4
        };

        this.current = this.state.current;

        setTimeout(() => {
            this.animate();
        }, 5000);
    }

    animate() {
        this.getCurrent();
        this.setState({
            current: this.current
        });
    }

    getCurrent() {
        this.current = (this.current >= this.props.slides.length - 1) ? 0 : this.current + 1;
        return this.current;
    }

    render() {
        var slides = this.props.slides;
        var slideList  = slides.map((slide, index) => {
            let slideClass = (index == this.state.current) ? 'slider-item active' : 'slider-item';
            return <div className={slideClass} key={index}><span>{slide}</span></div>;
        });

        return (
            <div className="slider-component">{slideList}</div>
        )
    }
}

从“React”导入React；
导出默认类滑块扩展React.Component{
构造函数（）{
超级（）；
此.state={
目前：4
};
this.current=this.state.current；
设置超时（（）=>{
这个。动画（）；
}, 5000);
}
制作动画（）{
这是getCurrent（）；
这是我的国家({
电流：这是电流
});
}
getCurrent（）{
this.current=（this.current>=this.props.slides.length-1）？0:this.current+1；
返回此.current；
}
render（）{
var slides=this.props.slides；
var slideList=slides.map（（幻灯片，索引）=>{
让slideClass=（index==this.state.current）？“slider项处于活动状态”：“slider项”；
返回{slide}；
});
返回(
{slideList}
)
}
}

在componentDidMount（）处调用它

在componentDidMount（）处调用它

理想情况下，构造函数应该只构造应该在以后的页面中使用的对象，如果您想在“mount”上运行某些东西，我会将其添加到

componentDidMount（）中

因为如果您将滑块构建为自己的组件，那么每次它被“激活”时，它都会运行该方法一次。

理想情况下，构造函数应该只构建应该在以后的页面中使用的对象，如果您想在“mount”上运行某些内容，我会将其添加到

ComponentDidMount（）中

因为如果您将滑块构建为自己的组件，那么每次它被“激活”时，它都会运行该方法一次。

在

componentDidMount

中执行此操作，如下所示：

componentDidMount() {
  this.timer = setTimeout(() => {
      this.animate();
      this.timer = undefined
  }, 5000);
}

componentWillUnmount() {
  if (this.timer) {
    clearTimeout(this.timer)
  }
}

但不要忘记在卸载时清除计时器，如下所示：

componentDidMount() {
  this.timer = setTimeout(() => {
      this.animate();
      this.timer = undefined
  }, 5000);
}

componentWillUnmount() {
  if (this.timer) {
    clearTimeout(this.timer)
  }
}

---

否则，如果此组件在5000ms之前卸载，代码将中断，因为它将尝试在卸载的组件中执行

setState

。

在

componentDidMount

中执行此操作，如下所示：

componentDidMount() {
  this.timer = setTimeout(() => {
      this.animate();
      this.timer = undefined
  }, 5000);
}

componentWillUnmount() {
  if (this.timer) {
    clearTimeout(this.timer)
  }
}

但不要忘记在卸载时清除计时器，如下所示：

componentDidMount() {
  this.timer = setTimeout(() => {
      this.animate();
      this.timer = undefined
  }, 5000);
}

componentWillUnmount() {
  if (this.timer) {
    clearTimeout(this.timer)
  }
}

---

否则，如果该组件在5000ms之前卸载，代码将中断，因为它将尝试在卸载的组件中执行

setState

。

我认为更好的选择是使用

componentDidMount

函数。我认为更好的选择是使用

componentDidMount

函数。谢谢！是的，我只看过一次。谢谢！是的，我只看到它运行过一次。我复制粘贴此代码，但它不再工作了？不要忘记

组件将卸载

部分。这同样重要。只是一个问题，this.timer=undefined是否应该在unmount中？@B.V您是指

this.timer=undefined

中的

componentDidMount

？这是没有必要的。为了安全起见，我已经把它放了。我复制粘贴了这个代码，但是它不再工作了？不要忘记

组件将卸载

部分。这同样重要。只是一个问题，this.timer=undefined是否应该在unmount中？@B.V您是指

this.timer=undefined

中的

componentDidMount

？这是没有必要的。为了安全起见，我已经把它放了。