리액트 앱의 setInterval

리액트 앱의 setInterval

리액트는 아직 처음이지만, 천천히 진행하다가 뭔가 마음에 걸리는 것을 발견하게 되었습니다.

React에서 "타이머" 컴포넌트를 구축하려고 하는데, 솔직히 제가 제대로(또는 효율적으로) 하고 있는지 모르겠습니다.아래 코드에서 개체를 반환하도록 상태를 설정합니다.{ currentCount: 10 }장난치고 있다componentDidMount,componentWillUnmount,그리고.render주를 10에서 9까지만 카운트다운할 수 있어요

2부 질문:내가 뭘 잘못 알고 있는 거지?그리고 set Timeout을 사용하는 보다 효율적인 방법은 없을까?componentDidMount&componentWillUnmount)?

잘 부탁드립니다.

import React from 'react';

var Clock = React.createClass({

  getInitialState: function() {
    return { currentCount: 10 };
  },

  componentDidMount: function() {
    this.countdown = setInterval(this.timer, 1000);
  },

  componentWillUnmount: function() {
    clearInterval(this.countdown);
  },

  timer: function() {
    this.setState({ currentCount: 10 });
  },

  render: function() {
    var displayCount = this.state.currentCount--;
    return (
      <section>
        {displayCount}
      </section>
    );
  }

});

module.exports = Clock;

코드에는 다음 4가지 문제가 있습니다.

• 타이머 방식에서는 항상 현재 카운트를 10으로 설정합니다.
• 렌더 메서드의 상태를 업데이트하려고 합니다.
• 사용 안 함setState실제로 상태를 변경하는 방법
• intervalId를 상태에 저장하지 않았습니다.

이 문제를 해결합시다.

componentDidMount: function() {
   var intervalId = setInterval(this.timer, 1000);
   // store intervalId in the state so it can be accessed later:
   this.setState({intervalId: intervalId});
},

componentWillUnmount: function() {
   // use intervalId from the state to clear the interval
   clearInterval(this.state.intervalId);
},

timer: function() {
   // setState method is used to update the state
   this.setState({ currentCount: this.state.currentCount -1 });
},

render: function() {
    // You do not need to decrease the value here
    return (
      <section>
       {this.state.currentCount}
      </section>
    );
}

이로 인해 타이머가 10에서 -N으로 감소합니다.타이머를 0으로 줄이는 경우 약간 변경된 버전을 사용할 수 있습니다.

timer: function() {
   var newCount = this.state.currentCount - 1;
   if(newCount >= 0) { 
       this.setState({ currentCount: newCount });
   } else {
       clearInterval(this.state.intervalId);
   }
},

다음을 사용하여 10초 카운트다운 업데이트class Clock extends Component

import React, { Component } from 'react';

class Clock extends Component {
  constructor(props){
    super(props);
    this.state = {currentCount: 10}
  }
  timer() {
    this.setState({
      currentCount: this.state.currentCount - 1
    })
    if(this.state.currentCount < 1) { 
      clearInterval(this.intervalId);
    }
  }
  componentDidMount() {
    this.intervalId = setInterval(this.timer.bind(this), 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId);
  }
  render() {
    return(
      <div>{this.state.currentCount}</div>
    );
  }
}

module.exports = Clock;

Hooks(클래스를 쓰지 않고 상태 및 기타 React 기능을 사용할 수 있는 새로운 기능 제안)를 사용하여 10초 카운트다운을 갱신했습니다.현재 React v16.7.0-alpha)에 있습니다.

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const Clock = () => {
    const [currentCount, setCount] = useState(10);
    const timer = () => setCount(currentCount - 1);

    useEffect(
        () => {
            if (currentCount <= 0) {
                return;
            }
            const id = setInterval(timer, 1000);
            return () => clearInterval(id);
        },
        [currentCount]
    );

    return <div>{currentCount}</div>;
};

const App = () => <Clock />;

ReactDOM.render(<App />, document.getElementById('root'));

setInterval을 구현하기 위해 React Hook 접근 방식을 찾는 사용자가 있는 경우.Dan Abramov가 그의 블로그에서 그것에 대해 말했다.클래스 어프로치를 포함한 주제에 대해 잘 읽고 싶다면 체크해 주세요.기본적으로 코드는 setInterval을 선언형으로 변환하는 커스텀 후크입니다.

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

또한 편의를 위해 Code Sandbox 링크도 게시합니다.https://codesandbox.io/s/105x531vkq

리액트 후크를 사용하여 setInterval 관리:

  const [seconds, setSeconds] = useState(0)

  const interval = useRef(null)

  useEffect(() => { if (seconds === 60) stopCounter() }, [seconds])

  const startCounter = () => interval.current = setInterval(() => {
    setSeconds(prevState => prevState + 1)
  }, 1000)

  const stopCounter = () => clearInterval(interval.current)

@dotnetom, @greg-herbowicz 감사합니다.

"this.state is defined"가 반환되는 경우 - bind timer 함수:

constructor(props){
    super(props);
    this.state = {currentCount: 10}
    this.timer = this.timer.bind(this)
}

Dan Abramov를 사용하고 있는 경우 useInterval 훅을 수동으로 취소하려면 지연변수로 null을 전달하는 훅을 다시 호출하기만 하면 됩니다.

작업 예는 https://codesandbox.io/s/useinterval-cancel-interval-dan-abramov-extended-oe45z?file=/src/index.http:/https://codesandbox.io/s/useinterval-cancel-interval-dan-abramov-extended-oe45z?file 에서 확인할 수 있습니다.

창 변수에 추가하는 것은 간단합니다.

useEffect(() => {
    window.interval23 = setInterval(
      () => setState('something'),
      2500
    )
    return () => {
      clearInterval(window.interval23)
    }
 }, [])

그러나 윈도우 변수가 이미 존재하는 경우 윈도우 변수가 라이브러리에서 인터럽트될 수 있으므로 윈도우 변수를 사용하여 작성하는 것은 가능한 한 고유하게 유지하십시오.

set Timeout과 use Effect를 조합하여 가짜 재귀라고 하는 것을 작성함으로써 인터벌을 사용하여 상태를 설정할 수 있습니다.

  import {useEffect,useState} from 'react'

  const [state,setState]=useState(0)

  function Interval(){
      setTimeout(()=>{
         setState(state+1)
       },2000)
  }
   useEffect(()=>Interval(),[state])

 //this code runs repeatedly in interval of 2 seconds

리액트 클래스의 상태를 매초 갱신하고 있습니다.my index.js는 현재 시간을 반환하는 함수를 전달합니다.

import React from "react";

class App extends React.Component {
  constructor(props){
    super(props)

    this.state = {
      time: this.props.time,

    }        
  }
  updateMe() {
    setInterval(()=>{this.setState({time:this.state.time})},1000)        
  }
  render(){
  return (
    <div className="container">
      <h1>{this.state.time()}</h1>
      <button onClick={() => this.updateMe()}>Get Time</button>
    </div>
  );
}
}
export default App;

import React, { useState, useEffect } from "react";

export const Count = () => {
const [currentCount, setCount] = useState(1);

const timer = () => setCount(currentCount + 1);

useEffect(
    () => {
        if (currentCount <= 0) {
            return;
        }
        const id = setInterval(timer, 1000);
        return () => clearInterval(id);
    },
    [currentCount]
);

console.log(currentCount)

return <div>Count : - {currentCount}</div>;
};

언급URL : https://stackoverflow.com/questions/36299174/setinterval-in-a-react-app