“@observer”属性有什么作用？

Question

我了解到的关于 mobx-react 的第一件事是使用“@observer”属性来跟踪在状态 class 中定义的属性值。这是我下面的示例；

//@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 class

顶部定义“@observer”属性

这是状态 class； AppState.js

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

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

问题是当我检查 "postSaveUser()" 方法中的值时，我看到的值正是我设置它的 "SignIn" 组件，这很奇怪吗？

我认为它只跟踪任何 class 中分配的值，这些值是用“@observer”属性定义的，但尽管我不使用它，但我能够访问数据吗？

Answer 1

在 React 组件上使用 @observer 装饰器 class 与使用 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')
);

“@observer”属性有什么作用？

what does "@observer" attribute do?

ecmascript-6

mobx

mobx-react