MOBX로 JavaScript 응용 프로그램 상태를 관리하는 방법

이 기사는 Michel Weststrate와 Aaron Boyer가 동료 검토했습니다. Sitepoint의 콘텐츠를 완벽하게 만들어 주신 Sitepoint의 모든 동료 검토 자에게 감사드립니다! jQuery를 사용하는 매우 간단한 응용 프로그램보다 더 복잡한 응용 프로그램을 작성한 적이 있다면 UI의 다른 부분을 동기화하는 데 문제가 있었을 수 있습니다. 종종 데이터 변경은 여러 위치에 반영되어야하며 응용 프로그램이 커지면 문제가 발생할 수 있습니다. 이러한 혼란을 제어하기 위해, 이벤트는 종종 변경이 언제 발생했는지 응용 프로그램의 다른 부분에 알리는 데 사용됩니다.

그래서 오늘 애플리케이션 상태를 어떻게 관리 했습니까? 나는 당신이 변화를 과도하게 구독한다고 말하기 위해 자유를 취할 것입니다. 좋아요. 나는 당신조차 모르지만, 그것을 지적 할 것입니다. 당신이 초과 구독이 아니라면, 나는 당신이 너무 열심히 일했다고 확신합니다.

물론 , 당신이 mobx를 사용하지 않는 한…

키 포인트

MOBX를 사용한 상태 관리를 단순화합니다.

MOBX 자동 업데이트 : MOBX의

구현은 수동 이벤트 처리없이 상태 변경에 응답하여 UI 구성 요소를 자동으로 업데이트하기 위해 MOBX의

기능을 구현하여 전체 애플리케이션의 동기화 프로세스를 단순화합니다.

계산 된 값으로 성능을 향상시킵니다. 는 MOBX에서 계산 된 값을 사용하여 상태에서 데이터를 도출하여 필요할 때만 구성 요소를 다시 렌더링하여 전반적인 응용 프로그램 성능을 향상시킵니다.

mobx는 시작하기 쉽습니다. 표준 객체를 관측 가능한 객체로 변환하여 MOBX를 기존 JavaScript 응용 프로그램에 원활하게 통합하여 전체 재 작성없이 점진적으로 채택 할 수 있습니다.

MOBX 운영에 대한 트랜잭션 수정 :
• MOBX 작업을 적용하여 트랜잭션에서 상태 수정을 캡슐화하여 중복 렌더링을 배치하고 최소화하여보다 효율적이고 오류가 발생하기 쉬운 코드를 최소화합니다.
"상태"란 무엇입니까?
• 이것은 캐릭터입니다. 이봐, 그게 나야! 나는 이름, 마지막 이름 및 나이가 있습니다. 또한 문제가 있으면 함수가 나타날 수 있습니다. 이 사람에 대한 다양한 출력 (뷰, 서버, 디버그 로그)에 어떻게 알 수 있습니까? 이 알림은 언제 트리거됩니까? Mobx 이전에는 사용자 정의 jQuery 이벤트 또는 JS-Signals를 트리거하는 세터를 사용합니다. 이 옵션은 저에게 잘 제공되지만, 저의 사용법은 세심한 것과는 거리가 멀습니다. Person Object의 일부가 변경되면 "변경된"이벤트를 트리거합니다. autorun 내 이름을 보여주는보기 코드가 있다고 가정합니다. 내 나이를 바꾸면 그 사람의 변화된 사건에 묶여있는 견해가 업데이트됩니다.

var person = {
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
};

우리는이 오버 트리거를 어떻게 강화합니까? 단순한. 각 필드의 세터를 설정하고 각 변경에 대해 별도의 이벤트를 설정하십시오. 잠깐만 - 나이와 이름을 한 번에 변경하려면 오버 트리거를 시작할 수 있습니다. 두 변경 사항이 모두 완료 될 때까지 이벤트 발사를 지연시키는 방법을 만들어야합니다. 그것은 일하는 것처럼 들리고, 나는 게으르다 ...
<<> mobx는 구조에옵니다

mobx는 Michel Weststrate가 개발 한 간단하고 집중적이고 효율적이며 눈에 띄지 않는 주 관리 라이브러리입니다. Mobx 문서에서

단순히 주에 대해 무언가를하고 Mobx는 응용 프로그램이 이러한 변경 사항을 존중하도록 할 것입니다.

차이를 알아 차렸습니까? 는 내가 만든 유일한 변화입니다. 예제를 다시 확인해 봅시다 : <🎜 🎜>

를 사용하여

를 사용하여 Mobx는 액세스 한 내용 만 관찰합니다.

이것이 깔끔하다고 생각되면 다음을 확인하십시오.

person.events = {};

person.setData = function (data) {
  $.extend(person, data);
  $(person.events).trigger('changed');
};

$(person.events).on('changed', function () {
  console.log('first name: ' + person.firstName);
});

person.setData({age: 38});

관심이 있습니까? 나는 당신이 관심이 있다는 것을 알고 있습니다.

<🎜 🎜> <<> Mobx Core 개념 mobx.observable <🎜 🎜> console.log 관찰 가능 <🎜 🎜>

mobx 관측 가능한 객체는 단지 물체 일뿐입니다. 이 예에서는 아무것도 관찰하지 않습니다. 이 예제는 mobx를 기존 코드 기반에 통합하는 방법을 보여줍니다. 시작하려면 또는

var person = mobx.observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 37,
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
});

를 사용하십시오.

<<> autorun <🎜 🎜> autorun 관찰 가능성이 변할 때 무엇을하고 싶습니까? 참조 된 관측 가능한 값이 변경 될 때 콜백을 트리거하는 <<>를 소개하겠습니다. 위의 예에서

는 연령이 변할 때 발사되지 않습니다.

<<> 계산 <🎜 🎜>

mobx.autorun(function () {
  console.log('first name: ' + person.firstName);
});

person.age = 38; // 打印为空
person.lastName = 'RUBY!'; // 仍然为空
person.firstName = 'Matthew!'; // 此处触发

기능을 보았습니까? 매개 변수가없고

가 있습니까? Mobx는 자동으로 계산 된 값을 생성합니다. 이것은 내가 가장 좋아하는 Mobx 기능 중 하나입니다.

에 이상한 것이 있습니까? 다시 시청하십시오. 이것은 함수입니다. 결과를 호출하지 않고 볼 수 있습니다! 일반적으로 <🎜 🎜> 대신 를 호출합니다. 당신은 방금 당신의 첫 JS Getter를 만났습니다.

재미는 여기서 끝나지 않습니다! Mobx는 변경에 대한 계산 된 값의 종속성을 모니터링하고 변경할 때만 실행됩니다. 아무것도 변경되지 않으면 캐시 된 값이 반환됩니다. 다음 상황을 참조하십시오 : <🎜 🎜> 여기서 계산을 여러 번 누른다는 것을 알 수 있지만 기능이 실행되는 유일한 시간은 FirstName 또는 LastName이 변경 될 때입니다. 이것은 Mobx가 응용 프로그램 속도를 크게 높일 수있는 방법 중 하나입니다.

더!

나는 더 이상 멋진 mobx 문서를 계속 다시 작성하지 않을 것입니다. 더 많은 방법을 사용하고 관찰 가능한 객체를 만드는 방법은 문서를 확인하십시오.

mobx.autorun(function () {
  console.log('Full name: ' + person.fullName);
});

person.age = 38; // 打印为空
person.lastName = 'RUBY!'; // 触发
person.firstName = 'Matthew!'; // 也触发

(다음 내용은 일부 코드 예제와 자세한 설명을 생략하고 핵심 내용과 구조를 유지합니다)

mobx를 에 넣습니다 너무 지루하기 전에 무언가를 만들어 봅시다. mobx.observable() 이것은 변경 될 때마다 사람의 전체 이름을 보여주는 간단한 비 몰 X 예제입니다.

우리는 이름을 바꾸지 않더라도 이름은 10 번 렌더링되었습니다. 많은 이벤트를 사용 하여이 문제를 최적화하거나 어떤 종류의 변경 페이로드를 확인할 수 있습니다. 이것은 너무 많은 일입니다.

이것은 mobx로 구축 된 것과 동일한 예입니다 이벤트, 트리거 또는 온이 없음에 유의하십시오. Mobx를 사용하면 최신 가치와 그것이 바뀌 었다는 사실을 다루고 있습니다. 한 번만 렌더링 되었습니까?

가 모니터링하는 것을 변경하지 않았기 때문입니다.

약간 덜 사소한 것을 만들어 봅시다 : 여기서는 전체 개인 객체를 편집하고 데이터 출력을 자동으로 모니터링 할 수 있습니다. 이제이 예제에는 소프트 포인트가 있으며 가장 주목할만한 점은 입력 값이 Person Object와 동기화되지 않는다는 것입니다. 이 문제를 해결합시다 :

나는 당신이 또 다른 불만이 있습니다 : "루비, 당신은 과도하게 렌더링되었습니다!" 이것이 많은 사람들이 React를 사용하기로 선택한 이유입니다. React를 사용하면 별도로 렌더링 할 수있는 위젯으로 출력을 쉽게 분해 할 수 있습니다.

완전성을 위해, 여기에 내가 최적화 한 jQuery 예제가 있습니다.

실제 앱에서 이런 일을할까요? 아마. 이 세분화가 필요한 경우 언제든지 React를 사용하겠습니다. 실제 응용 프로그램에서 mobx와 jquery를 사용할 때, 나는 그것을 변경할 때마다 전체 DOM을 재건하지 않을 정도로 충분히 autorun를 사용합니다.

당신은이 시점에 왔습니다. 따라서 여기에 React and Mobx 로 구축 된 것과 동일한 예가 있습니다. 슬라이드 쇼 를 만들자 슬라이드 쇼의 상태를 어떻게 대표 할 것인가? 단일 슬라이드 공장으로 시작하겠습니다 : 우리는 모든 슬라이드를 집계 할 무언가가 있어야합니다. 지금 구축합시다 :
슬라이드 쇼가 시작되었습니다! 우리는 수집에서 슬라이드를 추가하고 제거하고 UI를 그에 따라 업데이트 할 수있는 관찰 가능한 슬라이드 배열이 있기 때문에 더 흥미 롭습니다. 다음으로, 계산 된 값을 추가하여 필요에 따라 최신 상태를 유지합니다.

슬라이드 쇼를 렌더링합시다. 우리는 HTML 출력에 대한 준비가되어 있지 않으므로 콘솔에만 인쇄 할 것입니다.

그것은 멋지다, 우리는 슬라이드가있다.

방금 그들의 현재 상태를 인쇄했다. 하나 또는 두 개의 슬라이드를 변경합시다 :

우리의

가 작동하는 것처럼 보입니다. 가 모니터링하는 것을 변경하면 발사됩니다. 출력 파생을 콘솔에서 html로 변경하겠습니다 : 우리는 이제이 슬라이드 쇼의 기본 표시를 가지고 있었지만 아직 상호 작용은 없습니다. 축소판을 클릭하고 기본 이미지를 변경할 수 없습니다. 그러나 콘솔을 사용하여 이미지 텍스트를 쉽게 변경하고 슬라이드 쇼를 추가 할 수 있습니다. 선택한 슬라이드 쇼를 설정하기위한 첫 번째이자 유일한 조치를 만들어 봅시다. 다음을 추가하여

>를 수정해야합니다 당신은 물어볼 수 있습니다. 왜 작업을 사용해야합니까? 좋은 질문! 내가 관찰 가능한 값 변화의 다른 예에서 보여준 것처럼 Mobx 작업은 필요하지 않습니다.

운영은 여러 측면에서 도움이 될 것입니다. 먼저, 모든 MOBX 운영은 거래에서 실행됩니다. 이것은 우리의 및 기타 MOBX 반응이 트리거하기 전에 작업이 완료되기를 기다릴 것임을 의미합니다. 그것에 대해 생각하십시오. 트랜잭션 외부의 활성 슬라이드를 비활성화하고 다음 슬라이드를 활성화하려고하면 어떻게됩니까? 우리의

는 두 번 트리거됩니다. 디스플레이 할 수있는 활성 슬라이드가 없기 때문에 첫 번째 런은 어색합니다.

거래 특성 외에도 MOBX 운영은 디버깅을 더 쉽게 만드는 경향이 있습니다. autorun로 전달한 첫 번째 선택적 매개 변수는 문자열 "Set Active Slide"입니다. 이 문자열은 Mobx의 디버그 API를 사용하여 출력 될 수 있습니다. autorun 그래서 우리는 우리의 작동을 가지고 있습니다. <.> 그게 다야. 이제 썸네일을 클릭하면 활동이 예상대로 전파됩니다. 슬라이드 쇼의 작업 예는 다음과 같습니다. 이것은 React를 사용한 동일한 슬라이드 쇼의 예입니다.

참고, 모델을 전혀 변경하지 않았습니까? MOBX의 관점에서, React는 jQuery 또는 콘솔과 같은 데이터의 또 다른 파생물 일뿐입니다.

mobx.action jQuery 슬라이드 쇼 예제

에 대한 경고 jQuery 예제를 어떤 식 으로든 최적화하지는 않았습니다. 우리는 그것을 변경할 때마다 전체 슬라이드 쇼 DOM을 파괴합니다. 파괴함으로써, 우리는 슬라이드 쇼의 모든 HTML을 클릭마다 교체한다는 것을 의미합니다. 강력한 jQuery 기반 슬라이드 쇼를 구축하는 경우 활성 클래스를 설정하고 삭제하고

의 속성을 변경하여 초기 렌더링 후 DOM을 조정할 수 있습니다.

더 알고 싶습니까?

mobx에 대해 자세히 알아 보려면 아래의 다른 유용한 리소스를 확인하십시오. 질문이 있으시면 아래 의견에 알려 주거나 Mobx Gitter 채널에서 저를 찾으십시오.

Mobx

로 JavaScript 애플리케이션 상태 관리에 대한 FAQ

(FAQ 부분은 기사가 너무 길고 핵심 내용과 관련이 없기 때문에 다음 내용에서 생략됩니다.)

위 내용은 MOBX로 JavaScript 응용 프로그램 상태를 관리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!