상태와 반응성

$mol의 상태는 스프레드시트처럼 동작합니다. 값이 어떻게 계산되는지 선언하면, 그것에 의존하는 모든 것이 스스로 갱신됩니다. 스토어도, 디스패치도, 이펙트 훅도 없습니다——의존성 그래프가 무엇을 다시 계산할지 추적합니다.

반응형 속성

@ $mol_mem으로 장식된 메서드는 캐시된 반응형 셀입니다. 한 번 실행되어 결과를 기억하고, 읽었던 무언가가 바뀌었을 때만 다시 계산합니다.1namespace $.$$ {2 export class $my_counter extends $.$my_counter {3 @ $mol_mem count() { return 0 }4 5 @ $mol_mem doubled() {6 return this.count() * 27 }8 }9}doubled는 count를 읽으므로 자동으로 count를 구독합니다. count를 바꾸면 doubled를 보여 주는 모든 뷰가 새로 고쳐집니다——손으로 구독할 것은 아무것도 없습니다.

읽기와 쓰기

속성은 게터이자 세터입니다. 인자 없이 호출하면 읽고, 인자를 주어 호출하면 씁니다.1@ $mol_action2increment() {3 this.count( this.count() + 1 )4}

액션 대 계산

이 한 가지 구분이 반응형 코드를 예측 가능하게 유지합니다.@ $mol_mem은 순수 계산입니다——다른 셀을 읽고 값을 반환할 뿐입니다.@ $mol_action은 이펙트입니다——상태 쓰기, 네트워크 호출, 타이머가 여기에 속합니다.@ $mol_mem 내부에서 셀에 쓰면 피드백 루프가 생깁니다(쓰기가 의존성을 무효화하고, 다시 계산되고, 또 씁니다). $mol은 이를 순환 구독으로 보고합니다. 해결책은 언제나 같습니다. 부수 효과는 액션에 두고, 계산은 순수하게 유지하세요.@ $mol_mem에서 할 수 있는 것하면 안 되는 것버튼 핸들러는 기반 클래스에서 @ $mol_mem으로 생성됩니다. 안전하게 쓸 수 있도록 @ $mol_action으로 재정의하세요.1@ $mol_action2submit() {3 this.saved( true )4}

파생 상태는 조합된다

의존성이 자동으로 추적되므로, 파생 값은 어떤 배선도 없이 연쇄됩니다. 각각은 바로 앞의 것을 읽고, 뿌리에서의 변화는 필요한 만큼만 정확히 퍼져 나갑니다.1@ $mol_mem full_name() {2 return `${ this.first() } ${ this.last() }`.trim()3}4 5@ $mol_mem greeting() {6 return this.full_name() ? `Hello, ${ this.full_name() }!` : 'Hello!'7}GitHub에서 이 페이지 편집도움이 되었나요?예아니요이전뷰 다음라우팅이 페이지에서반응형 속성 읽기와 쓰기 액션 대 계산 파생 상태는 조합된다 키가 있는 상태 비동기는 그저 하나의 값 이벤트 사이의 일시적 상태 다음