代码之家 › 专栏 › 技术社区 › TyForHelpDude

“@observer”属性做什么?

mobx-react mobx ecmascript-6

1

TyForHelpDude · 技术社区 · 7 年前

关于mobx react,我学到的第一件事是使用“@observer”属性跟踪state类中定义的属性值。。

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

这是国家级的;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”组件的值,这奇怪吗?

1 回复 | 直到 7 年前

1

Tholle 7 年前

@observer React组件类上的装饰器与使用 autorun . 当在上次渲染中取消引用的观察值发生更改时,组件将重新渲染。当然,您仍然可以更改可观察数据的值,只是如果不使用室内装修设计师

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