Home > Article > Web Front-end > what is react state machine
what is react state machine
- coldplay.xixiOriginal
- 2020-11-27 11:05:011900browse
React regards the component as a state machine, realizes different states through interaction with the user, and then renders the UI to keep the user interface and data consistent.
React treats components as a State Machine (State Machines). By interacting with the user, different states are achieved, and then the UI is rendered to keep the user interface and data consistent.
In React, you only need to update the component's state, and then re-render the user interface based on the new state (without manipulating the DOM).
In applications with many components, it is very important to release the resources occupied by the components upon destruction.
Every time the Clock component is loaded into the DOM for the first time, we want to generate a timer, which is called mounting in React.
Similarly, whenever the DOM generated by Clock is removed, we will also want to clear the timer, which is called unloading in React.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
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 (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('example')
);
</script>
</body>
</html>Analysis:
componentDidMount() and componentWillUnmount() methods are called life cycle hooks.
After the component is output to the DOM, the componentDidMount() hook will be executed, and we can set a timer on this hook.
this.timerID is the ID of the timer. We can uninstall the timer in the componentWillUnmount() hook.
React calls the Clock component's constructor when is passed to ReactDOM.render(). Since Clock needs to display the current time, this.state is initialized with an object containing the current time. We will update this status later.
React then calls the render() method of the Clock component. This is React understanding what should be on the screen, and then React updates the DOM to match the Clock's rendered output.
When Clock's output is inserted into the DOM, React calls the componentDidMount() lifecycle hook. In it, the Clock component requires the browser to set a timer and call tick() every second.
The browser calls the tick() method every second. In it, the Clock component schedules UI updates by calling setState() with an object containing the current time. By calling setState() , React knows that the state has changed and calls the render() method again to determine what should be displayed on the screen. This time, the this.state.date in the render() method will be different, so the rendered output will contain the updated time, and the DOM will be updated accordingly.
Once the Clock component is removed from the DOM, React will call the componentWillUnmount() hook function and the timer will be cleared.
Related learning recommendations: javascript learning tutorial
The above is the detailed content of what is react state machine. For more information, please follow other related articles on the PHP Chinese website!