바닐라 자바스크립트를 사용한 상태 관리
7527 단어 reduxcontextvanillajavascript
TL;DR
| 확인this Codepen하세요.
소개
Vanilla JS를 사용하여 상태 관리 라이브러리를 생성하는 방법에 대해 읽은 후 비슷한 일을 하지만 더 개발자 친화적인 방식으로 하고 싶어졌습니다.
우리는 기본적으로 setState와 같은 함수를 호출하지 않고 UI 새로 고침을 수동으로 트리거하지 않고도 상태를 쉽게 업데이트할 수 있는 것을 원합니다. 이는 App.state.count++;와 같은 작업을 수행할 수 있어야 하며 UI를 새로 고치기에 충분해야 함을 의미합니다.
이러한 이유로 우리는 JS Proxies 을 사용할 것입니다.
기본적으로 프록시는 사용자(개발자)와 읽거나 편집하려는 개체 사이의 중개자와 같습니다. 이를 통해 해당 객체에 대한 기본 작업을 가로채고 재정의할 수 있습니다. 이는 누군가가 해당 객체의 속성을 편집하거나 읽으려고 할 때마다 알고 있다는 멋진 표현입니다.
암호
이제 기본적인 상태 관리 시스템을 만들려면 다음을 만들어야 합니다.
Vanilla JS를 사용하여 상태 관리 라이브러리를 생성하는 방법에 대해 읽은 후 비슷한 일을 하지만 더 개발자 친화적인 방식으로 하고 싶어졌습니다.
우리는 기본적으로
setState와 같은 함수를 호출하지 않고 UI 새로 고침을 수동으로 트리거하지 않고도 상태를 쉽게 업데이트할 수 있는 것을 원합니다. 이는 App.state.count++;와 같은 작업을 수행할 수 있어야 하며 UI를 새로 고치기에 충분해야 함을 의미합니다.이러한 이유로 우리는 JS Proxies 을 사용할 것입니다.
기본적으로 프록시는 사용자(개발자)와 읽거나 편집하려는 개체 사이의 중개자와 같습니다. 이를 통해 해당 객체에 대한 기본 작업을 가로채고 재정의할 수 있습니다. 이는 누군가가 해당 객체의 속성을 편집하거나 읽으려고 할 때마다 알고 있다는 멋진 표현입니다.
암호
이제 기본적인 상태 관리 시스템을 만들려면 다음을 만들어야 합니다.
actual state object middleware proxy . 앱
| 앱에서 원하는 것은 기본적으로 상태를 표시하는 UI를 반환하는 것입니다.
const App = function _App() {
return `
<h1>Vanilla State Management</h1>
<button onClick='App.state.count++;'>You pressed me ${App.state.count} ${App.state.count === 1 ? 'time' : 'times'}!</button>
`;
};
앱 상태
| 상태 개체의 무언가가 변경될 때마다 UI를 업데이트하는 미들웨어 프록시와 결합된 상태 개체입니다.
const handler = {
set: function(obj, prop, value) {
obj[prop] = value;
document.getElementById('app').innerHTML = App();
},
};
App.state = new Proxy({ count: 0 }, handler);
마무리
| 이것이 완전한 모습입니다.
<body>
<div id="app">loading...</div>
<script>
const App = function _App() {
return `
<h1>Vanilla State Management</h1>
<button onClick='App.state.count++;'>You pressed me ${App.state.count} ${App.state.count === 1 ? 'time' : 'times'}!</button>
`;
};
const handler = {
set: function(obj, prop, value) {
obj[prop] = value;
document.getElementById('app').innerHTML = App();
},
};
App.state = new Proxy({ count: 0 }, handler);
// Initial Loading of the App
document.getElementById('app').innerHTML = App();
</script>
</body>
Reference
이 문제에 관하여(바닐라 자바스크립트를 사용한 상태 관리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/christosmaris/vanilla-js-state-management-using-proxies-19l5
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<div id="app">loading...</div>
<script>
const App = function _App() {
return `
<h1>Vanilla State Management</h1>
<button onClick='App.state.count++;'>You pressed me ${App.state.count} ${App.state.count === 1 ? 'time' : 'times'}!</button>
`;
};
const handler = {
set: function(obj, prop, value) {
obj[prop] = value;
document.getElementById('app').innerHTML = App();
},
};
App.state = new Proxy({ count: 0 }, handler);
// Initial Loading of the App
document.getElementById('app').innerHTML = App();
</script>
</body>
Reference
이 문제에 관하여(바닐라 자바스크립트를 사용한 상태 관리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/christosmaris/vanilla-js-state-management-using-proxies-19l5텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
