[javascript] ReactJS : setTimeout ()이 작동하지 않습니까?

Question 1

이 코드를 염두에 두십시오.

var Component = React.createClass({

    getInitialState: function () {
        return {position: 0};
    },

    componentDidMount: function () {
        setTimeout(this.setState({position: 1}), 3000);
    },

    render: function () {
         return (
            <div className="component">
                {this.state.position}
            </div>
         );
    }

});

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

상태는 3 초 후에 만 변경되지 않습니까? 즉시 변경됩니다.

여기서 내 주요 목표는 3 초마다 상태를 변경하는 setInterval()것이지만 ( ) 작동하지 않았기 때문에 작동하지 않는을 시도했습니다 setTimeout(). 이것에 불이 있습니까? 감사!

Question 2

하다

setTimeout(
    function() {
        this.setState({ position: 1 });
    }
    .bind(this),
    3000
);

그렇지 않으면, 당신은 결과 전달하는 setState로를 setTimeout.

ES6 화살표 기능을 사용하여 this키워드 사용을 피할 수도 있습니다 .

setTimeout(
  () => this.setState({ position: 1 }),
  3000
);

Question 3

setTimeout(() => {
  this.setState({ position: 1 });
}, 3000);

ES6 화살표 기능이의 컨텍스트를 변경하지 않기 때문에 위의 내용도 작동합니다 this.

Question 4

타임 아웃을 생성 할 때마다 componentWillUnmount에서이를 지워야합니다 (아직 실행되지 않은 경우).

      let myVar;
         const Component = React.createClass({

            getInitialState: function () {
                return {position: 0};
            },

            componentDidMount: function () {
                 myVar = setTimeout(()=> this.setState({position: 1}), 3000)
            },

            componentWillUnmount: () => {
              clearTimeout(myVar);
             };
            render: function () {
                 return (
                    <div className="component">
                        {this.state.position}
                    </div>
                 );
            }

        });

ReactDOM.render(
    <Component />,
    document.getElementById('main')
);

Question 5

이것이 조금 오래되었다는 것을 알고 있지만 React가 구성 요소가 마운트 해제 될 때 간격을 지우는 것이 좋습니다. https://reactjs.org/docs/state-and-lifecycle.html

그래서이 토론에이 답변을 추가하고 싶습니다.

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

Question 6

setState괄호로 인해 즉시 호출됩니다! 익명 함수로 래핑 한 다음 호출합니다.

setTimeout(function() {
    this.setState({position: 1})
}.bind(this), 3000);

Question 7

누가 setTimeout을 호출했는지 말하지 않았습니다.

여기서 추가 함수를 호출하지 않고 타임 아웃을 호출하는 방법입니다.

1. 추가 기능을 만들지 않고도 할 수 있습니다.

setTimeout(this.setState.bind(this, {position:1}), 3000);

용도의 function.prototype.bind ()

setTimeout은 함수의 위치를 가져와 컨텍스트에 유지합니다.

2. 더 적은 코드를 작성하여도 동일한 작업을 수행하는 또 다른 방법입니다.

setTimeout(this.setState, 3000, {position:1});

아마도 어떤 시점에서 동일한 바인딩 방법을 사용합니다.

setTimeout은 함수의 위치 만 취하고 함수에 이미 컨텍스트가 있습니까? 어쨌든 작동합니다!

참고 : 이들은 js에서 사용하는 모든 기능에서 작동합니다.

Question 8

코드 범위 ( this) 는 window반응 구성 요소가 아닌 객체 가되므로 setTimeout(this.setState({position: 1}), 3000)이런 방식으로 충돌이 발생합니다.

즉하지 그것이, 반작용 자바 스크립트에서 오는 JS 폐쇄

따라서 현재 반응 구성 요소 범위를 바인딩하려면 다음을 수행하십시오.

setTimeout(function(){this.setState({position: 1})}.bind(this), 3000);

또는 브라우저가 es6를 지원하거나 projs가 es6를 es5로 컴파일하는 기능을 지원하는 경우 화살표 기능도 사용해보세요. 화살표 func는 ‘이’문제를 해결하는 것입니다.

setTimeout(()=>this.setState({position: 1}), 3000);