"@ observer"속성은 무엇을합니까?

Question

mobx 반응에 대해 처음 배운 것은 "@observer"속성을 사용하여 상태 클래스에 정의 된 속성 값을 추적하는 것입니다. 이것은 아래 예제입니다.

//@observer cut it off 
SingUp.js 

    import React, {Component} from 'react' 
    import {observer} from 'mobx-react' 

class SignUp extends Component{ 
    constructor(props){ 
    super(props) 
    } 
    SaveUser(e){ 
    e.preventDefault(); 
    this.props.appState.user.username = this.username.value; 
    this.props.appState.user.password = this.password.value; 
    this.props.appState.postSaveUser(); 
    } 
    render(){<form onSubmit={()=>this.SaveUser(e)}>... 

"SaveUser()"라는 양식을 제출하고 앱 상태 값을 설정할 때. SignUp 클래스 상단에 "@observer"속성을 정의하지 마십시오.

이며 여기에는 상태 클래스가 있습니다. 내가 값이 정확히 내가 '로그인의 "구성 요소 설정을 참조하십시오"postSaveUser() "메소드의 값을 확인할 때

import { observable, action} from "mobx" 
import {user} from './models/user' 

class AppState { 
    @observable user=new user; 
    constructor() { 
    } 
    postSaveUser(){ 
     debugger 
     var asd = this.user 
    } 
} 

AppState.js 것은 그것이 이상한입니까?

"@observer"속성으로 정의 된 모든 클래스에 할당 된 값만 추적한다고 생각했지만 데이터를 사용할 수는 없지만 데이터에 액세스 할 수 있습니까?

Answer 1

React 구성 요소 클래스에 @observer 데코레이터를 사용하는 것은 autorun을 사용하는 것과 같습니다. 마지막 렌더링에서 참조 해제 된 관측 값이 변경되면 구성 요소가 다시 렌더링됩니다. 물론 관측 가능한 데이터의 값을 변경할 수 있습니다. @observer 데코레이터를 사용하지 않으면 React 구성 요소가 자동으로 다시 렌더링되지 않습니다.

예 (JSBin)

class Store { 
    @observable data = 'cool'; 
} 

const store = new Store(); 

setTimeout(() => { 
    store.data = 'wow'; 
}, 2000); 


@observer 
class Observer extends Component { 
    render() { 
    return <h1> This component will re-render when {store.data} changes.</h1>; 
    } 
}; 

class NonObserver extends Component { 
    render() { 
    return <h1> This component will NOT re-render when {store.data} changes.</h1>; 
    } 
}; 

ReactDOM.render(
    <div> 
    <Observer /> 
    <NonObserver /> 
    </div>, 
    document.getElementById('app') 
);