React 구성 요소 업데이트(매초)

React 구성 요소 업데이트(매초)

React를 가지고 놀고 있는데, 다음과 같은 시간 구성요소가 있습니다.Date.now()화면에 표시:

import React, { Component } from 'react';

class TimeComponent extends Component {
  constructor(props){
    super(props);
    this.state = { time: Date.now() };
  }
  render(){
    return(
      <div> { this.state.time } </div>
    );
  }
  componentDidMount() {
    console.log("TimeComponent Mounted...")
  }
}

export default TimeComponent;

React 관점에서 시간을 다시 그리기 위해 이 구성 요소를 매초 업데이트하려면 어떻게 해야 할까요?

를 사용해야 합니다.setInterval변경을 트리거하려면 , 다만, 컴포넌트의 마운트 해제시에 타이머를 클리어 해, 에러나 메모리 누전을 방지할 필요가 있습니다.

componentDidMount() {
  this.interval = setInterval(() => this.setState({ time: Date.now() }), 1000);
}
componentWillUnmount() {
  clearInterval(this.interval);
}

@Waisky는 다음과 같이 제안했다.

를 사용해야 합니다.setInterval변경을 트리거하려면 , 다만, 컴포넌트의 마운트 해제시에 타이머를 클리어 해, 에러나 메모리 누전을 방지할 필요가 있습니다.

동일한 작업을 수행하려면 Hooks를 사용하십시오.

const [time, setTime] = useState(Date.now());

useEffect(() => {
  const interval = setInterval(() => setTime(Date.now()), 1000);
  return () => {
    clearInterval(interval);
  };
}, []);

코멘트에 대해서:

안에 아무것도 안 넣어도 돼[]합격하면time괄호 안에 있는 것은, 이펙트를 매번 실행한다는 것을 의미합니다.time변화, 즉 새로운 것을 호출한다.setInterval매번time우리가 찾고 있는 것이 아닙니다.호출만 할 수 있습니다.setInterval컴포넌트가 마운트될 때 한 번, 그 다음에setInterval콜setTime(Date.now())1000초마다.마지막으로, 우리는clearInterval컴포넌트가 마운트 해제된 경우.

사용 방법에 따라 컴포넌트가 갱신됩니다.time그 안에서, 매회, 의 가치가time변화들.그건 퍼팅과는 아무 상관이 없다.time에[]의useEffect.

다음 코드는 React.js 웹사이트에서 변경된 예입니다.

원래 코드는 https://reactjs.org/ #a-component에서 구할 수 있습니다.

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      seconds: parseInt(props.startTimeInSeconds, 10) || 0
    };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

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

  formatTime(secs) {
    let hours   = Math.floor(secs / 3600);
    let minutes = Math.floor(secs / 60) % 60;
    let seconds = secs % 60;
    return [hours, minutes, seconds]
        .map(v => ('' + v).padStart(2, '0'))
        .filter((v,i) => v !== '00' || i > 0)
        .join(':');
  }

  render() {
    return (
      <div>
        Timer: {this.formatTime(this.state.seconds)}
      </div>
    );
  }
}

ReactDOM.render(
  <Timer startTimeInSeconds="300" />,
  document.getElementById('timer-example')
);

컴포넌트의componentDidMount라이프 사이클 메서드에서는 상태를 갱신하는 함수를 호출하는 간격을 설정할 수 있습니다.

 componentDidMount() {
      setInterval(() => this.setState({ time: Date.now()}), 1000)
 }

class ShowDateTime extends React.Component {
   constructor() {
      super();
      this.state = {
        curTime : null
      }
    }
    componentDidMount() {
      setInterval( () => {
        this.setState({
          curTime : new Date().toLocaleString()
        })
      },1000)
    }
   render() {
        return(
          <div>
            <h2>{this.state.curTime}</h2>
          </div>
        );
      }
    }

나 자신도 좋아한다setTimeout그 이상setInterval클래스 기반 컴포넌트에서는 솔루션을 찾을 수 없었습니다.클래스 기반 컴포넌트에서는 다음과 같은 것을 사용할 수 있습니다.

클래스 베이스 컴포넌트 및 setInterval:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

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

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      this.state.date.toLocaleTimeString()
    );
  }
}

ReactDOM.render( 
  <Clock / > ,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app" />

함수 기반 컴포넌트 및 setInterval:

https://codesandbox.io/s/sweet-diffie-wsu1t?file=/src/index.http://https://codesandbox.io/s/sweet-diffie-wsu1t?file

함수 기반 컴포넌트 및 setTimeout:

https://codesandbox.io/s/youthful-lovelace-xw46p

그래서 당신은 올바른 길을 가고 있었군요.사용자 내부componentDidMount()이 작업을 완료하려면setInterval()변경을 트리거하지만 컴포넌트 상태를 갱신하는 방법은setState(), 그래서 당신의 내부에는componentDidMount()당신은 이렇게 할 수 있었다:

componentDidMount() {
  setInterval(() => {
   this.setState({time: Date.now()})    
  }, 1000)
}

또, 사용하는 것은Date.now()기능을 사용할 수 .componentDidMount()은 인간이 수 의 긴 수 , 엄밀히 1월 1일 단위로 되고 있습니다.는 이을 읽는 읽을 수 있도록 싶기 과 이 시간을 만들고 .한 숫자의 긴 세트를 얻을 것입니다, 그러나 기술적으로 1970년 1월 1일 이후 밀리초 단위로 업데이트되는 시간입니다, 그러나 우리는 이 시간을 인간이 시간을 읽는 방법에 대해 읽을 수 있도록 하고 싶습니다, 그래서 학습과 구현에 더하여.setInterval , 배우고 싶다.new Date() ★★★★★★★★★★★★★★★★★」toLocaleTimeString()을 사용하다

class TimeComponent extends Component {
  state = { time: new Date().toLocaleTimeString() };
}

componentDidMount() {
  setInterval(() => {
   this.setState({ time: new Date().toLocaleTimeString() })    
  }, 1000)
}

「 「 」도했습니다.constructor()것은 시 100%에 해당합니다.내 리팩터는 100 %로 사이트를 초기화하는 것과 동등합니다.constructor()★★★★★★ 。

componentWillReceiveProps()가 폐지된 React V16의 변경으로 인해 컴포넌트 업데이트에 사용하는 방법론입니다.다음 예는 Typescript에 있으며 static get Derived State From Props 메서드를 사용하여 Propes가 갱신될 때마다 초기 상태와 갱신 상태를 가져옵니다.

    class SomeClass extends React.Component<Props, State> {
  static getDerivedStateFromProps(nextProps: Readonly<Props>): Partial<State> | null {
    return {
      time: nextProps.time
    };
  }

  timerInterval: any;

  componentDidMount() {
    this.timerInterval = setInterval(this.tick.bind(this), 1000);
  }

  tick() {
    this.setState({ time: this.props.time });
  }

  componentWillUnmount() {
    clearInterval(this.timerInterval);
  }

  render() {
    return <div>{this.state.time}</div>;
  }
}

이는 setInterval이 아닌 setTimeout을 사용해도 구현할 수 있습니다.useState는 컴포넌트를 다시 렌더링할 때 setTimeout을 계속 호출합니다.여기 매초 타이머를 업데이트하는 샘플 컴포넌트가 있습니다.또, 이쪽에서 뭔가 실수가 있으면 가르쳐 주세요.

import React, { useEffect, useState } from 'react'

export default function Footer() {
    const [seconds, setSeconds] = useState((new Date()).getSeconds());

    function GetTime() {
        setSeconds((new Date()).getSeconds());
        console.count(seconds);
    }

    setTimeout(() => {
        console.log("Footer Rendered");
        GetTime();
    }, 1000);

    return (
        <footer>
            <h2>Test Footer</h2>
            <p>Copyright &copy; {seconds}</p>
        </footer>
    )
}

언급URL : https://stackoverflow.com/questions/39426083/update-react-component-every-second