반응 상태 머신이란 무엇입니까?
- coldplay.xixi원래의
- 2020-11-27 11:05:011849검색
React는 구성 요소를 상태 머신으로 간주하고 사용자와의 상호 작용을 통해 다양한 상태를 구현한 다음 UI를 렌더링하여 사용자 인터페이스와 데이터의 일관성을 유지합니다.
React는 구성 요소를 상태 머신(상태 머신)으로 취급합니다. 사용자와 상호 작용하여 다양한 상태가 달성된 다음 사용자 인터페이스와 데이터의 일관성을 유지하기 위해 UI가 렌더링됩니다.
React에서는 구성 요소의 상태를 업데이트한 다음 새 상태를 기반으로 사용자 인터페이스를 다시 렌더링하기만 하면 됩니다(DOM을 조작하지 않고).
구성 요소가 많은 애플리케이션에서는 파괴 시 구성 요소가 차지하는 리소스를 해제하는 것이 매우 중요합니다.
Clock 구성 요소가 처음으로 DOM에 로드될 때마다 React에서는 마운트라고 하는 타이머를 생성하려고 합니다.
마찬가지로 Clock에 의해 생성된 DOM이 제거될 때마다 타이머도 지우고 싶을 것입니다. 이를 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>분석:
comComponentDidMount() 및 comComponentWillUnmount() 메서드를 수명 주기 후크라고 합니다. componentDidMount()与componentWillUnmount()方法被称作生命周期钩子。
在组件输出到 DOM 后会执行componentDidMount()钩子，我们就可以在这个钩子上设置一个定时器。
this.timerID 为定时器的 ID，我们可以在 componentWillUnmount() 钩子中卸载定时器。
当 被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。 由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。 我们稍后会更新此状态。
React 然后调用 Clock 组件的render()方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。
当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。 在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。
浏览器每秒钟调用tick()方法。 在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。 通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次，render() 方法中的 this.state.date
comComponentDidMount() 후크가 실행됩니다. 이 후크에 타이머를 설정할 수 있습니다. this.timerID는 타이머의 ID입니다. componentWillUnmount() 후크에서 타이머를 제거할 수 있습니다. Clock의 출력이 DOM에 삽입되면 React는 componentDidMount() 수명 주기 후크를 호출합니다. 여기에서 Clock 구성 요소는 브라우저가 타이머를 설정하고 매초마다 Tick()을 호출하도록 요구합니다. 🎜🎜브라우저는 매초
ReactDOM.render()에 전달되면 React는 Clock 구성 요소의 생성자를 호출합니다. Clock은 현재 시간을 표시해야 하므로 this.state는 현재 시간을 포함하는 객체로 초기화됩니다. 이 상태는 나중에 업데이트하겠습니다. React는 Clock 구성 요소의render()메서드를 호출합니다. 이는 React가 화면에 무엇이 있어야 하는지 이해하고, React가 시계의 렌더링된 출력과 일치하도록 DOM을 업데이트하는 것입니다.
tick() 메서드를 호출합니다. 여기에서 Clock 구성 요소는 현재 시간이 포함된 객체로 setState()를 호출하여 UI 업데이트를 예약합니다. setState()를 호출함으로써 React는 상태가 변경되었음을 알고 화면에 표시할 내용을 결정하기 위해 render() 메서드를 다시 호출합니다. 이번에는 render() 메서드의 this.state.date가 달라지므로 렌더링된 출력에 업데이트된 시간이 포함되고 이에 따라 DOM이 업데이트됩니다. 🎜🎜DOM에서 Clock 구성 요소가 제거되면 React는 componentWillUnmount() 후크 함수를 호출하고 타이머가 지워집니다. 🎜🎜🎜관련 학습 권장사항: 🎜javascript 학습 튜토리얼🎜🎜🎜위 내용은 반응 상태 머신이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!