反応文書State
1. State
2. ClassComponent
import React, { Component } from 'react';
class ClassComponent extends 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 (
<div>
<h1>Hello, world! It's ClassComponenet</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
export default ClassComponent;
3. FunctionalComponent
import React, { useState, useEffect } from 'react';
export default function FunctionalComponent() {
const [date, setDate] = useState(new Date());
const tick = () => {
setDate(new Date());
};
useEffect(() => {
const interval = setInterval(() => tick(), 1000);
return () => {
clearInterval(interval);
};
}, []);
return (
<div>
<h1>Hello, world! It's FunctionalComponent</h1>
<h2>It is {date.toLocaleTimeString()}.</h2>
</div>
);
}
Reference
この問題について(反応文書State), 我々は、より多くの情報をここで見つけました https://velog.io/@kokyusik91/리액트-공식문서-Stateテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol