Question

我了解到关于mobx-react的第一件事就是使用＆＃34; @ observer＆＃34;用于跟踪在州类中定义的属性值的属性。这是我的样本;

//@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)}>...

当我提交表单时，＆＃34; SaveUser（）＆＃34;调用并设置应用程序状态值。你看，我没有定义＆＃34; @ observer＆＃34; SignUp类顶部的属性

这是州级; 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
  }
}

当我检查＆＃34; postSaveUser（）＆＃34;中的值时方法我看到的确切的值我设置它＆＃34; SignIn＆＃34;组件，这很奇怪吗？

我认为它只跟踪用＆＃34; @ observer＆＃34;定义的任何类中分配的值。属性，但虽然我不使用它，我能够访问数据？

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')
);

什么＆＃34; @ observer＆＃34;属性吗？

1 个答案: