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 id="Hello-nbsp-world">Hello, world!</h1>
<h2 id="现在是-nbsp-this-state-date-toLocaleTimeString">现在是 {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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM在react中，canvas用于绘制各种图表、动画等；可以利用“react-konva”插件使用canvas，该插件是一个canvas第三方库，用于使用React操作canvas绘制复杂的画布图形，并提供了元素的事件机制和拖放操作的支持。
react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM在react中，antd是基于Ant Design的React UI组件库，主要用于研发企业级中后台产品；dva是一个基于redux和“redux-saga”的数据流方案，内置了“react-router”和fetch，可理解为应用框架。
React是双向数据流吗Apr 21, 2022 am 11:18 AMReact不是双向数据流，而是单向数据流。单向数据流是指数据在某个节点被改动后，只会影响一个方向上的其他节点；React中的表现就是数据主要通过props从父节点传递到子节点，若父级的某个props改变了，React会重渲染所有子节点。
react中为什么使用nodeApr 21, 2022 am 10:34 AM因为在react中需要利用到webpack，而webpack依赖nodejs；webpack是一个模块打包机，在执行打包压缩的时候是依赖nodejs的，没有nodejs就不能使用webpack，所以react需要使用nodejs。
react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM在react中，forceupdate()用于强制使组件跳过shouldComponentUpdate()，直接调用render()，可以触发组件的正常生命周期方法，语法为“component.forceUpdate(callback)”。
react是组件化开发吗Apr 22, 2022 am 10:44 AMreact是组件化开发；组件化是React的核心思想，可以开发出一个个独立可复用的小组件来构造应用，任何的应用都会被抽象成一颗组件树，组件化开发也就是将一个页面拆分成一个个小的功能模块，每个功能完成自己这部分独立功能。
react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AMreact与vue的虚拟dom没有区别；react和vue的虚拟dom都是用js对象来模拟真实DOM，用虚拟DOM的diff来最小化更新真实DOM，可以减小不必要的性能损耗，按颗粒度分为不同的类型比较同层级dom节点，进行增、删、移的操作。
react和reactdom有什么区别Apr 27, 2022 am 10:26 AMreact和reactdom的区别是：ReactDom只做和浏览器或DOM相关的操作，例如“ReactDOM.findDOMNode()”操作；而react负责除浏览器和DOM以外的相关操作，ReactDom是React的一部分。
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
드림위버 CS6
시각적 웹 개발 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
에디트플러스 중국어 크랙 버전
작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
