Question

我正在使用React和mobx来处理应用程序状态。

我正在使用转储组件，这些组件通过外部存储（ajax调用，过滤器或映射数组等）来更改数据

在表单中，当您必须通过onChange事件处理输入更改时，当前我正在组件本身内部使用可观察的行为。

这是不好的做法吗？还是应该将所有操作和可观察的数据置于外部状态内？

如果相反，这种做法是可以接受的，那么我该如何应对因在外部存储中执行的Ajax调用操作而不得不重置本地可观察状态（例如文本输入）的情况？我可以在动作存储中使用回调来放弃对组件内部动作的控制，如以下示例所示：

import React from 'react';
import { observer, inject } from "mobx-react";
import { observable, action } from "mobx";

@inject("rootStore")
@observer
class ContactForm extends React.Component {

constructor(props) {
  super(props);
  this.externaStore = this.props.rootStore.contactStore
  this.onChangeInput = this.onChangeInput.bind(this)
}

@observable text = ''

@action
onChangeInput(event) {
  this.text = event.target.value
}

@action
resetForm() {
  this.text = ''
}

render() {
 return (
  <form>
    <div className="form-group">
      <label htmlFor="input-text" className="control-label">Text input: 
      </label>
      <input onChange={this.onChangeInput} type="text" value={this.text} id="input-text" name="input-text" className="form-control" />
   </div>

    <button onClick={() => this.externaStore.submitForm(this.text, this.resetForm)} className="btn btn-danger btn-xs" type="button" title="Aggiungi">
      <i className="fa fa-save"></i> Aggiungi
    </button>
   </form>
  )
 }
}

class ExternalStore {

constructor(rootStore) {
  this.rootStore = rootStore
  this.service = rootStore.service
}

@observable textList = []

@action
submitForm(text, cb) {
  this.service.doAjax('POST', '/api/text', JSON.stringify(text)).then(data => {
   this.textList.push(text)
   cb()
  })
 }
}

是否存在另一种处理类似案件的最佳实践？

Answer 1

即使使用Mobx，此答案也不正确。阅读下面的链接以获取更多信息。请参阅“ @observer组件”下的文档。

here

文本也复制到下面：

可观察到的本地组件状态

就像普通的类一样，您可以使用@observable装饰器在组件上引入可观察的属性。这意味着您可以在组件中拥有局部状态，这些组件不需要由React的冗长和命令式setState机制来管理，但功能却是如此强大。反应状态将由呈现器拾取，但不会显式调用componentWillUpdate和componentDidUpdate以外的其他React生命周期方法。如果您需要其他React生命周期方法，只需使用基于正常React状态的API。

上面的示例也可以写成：

import { observer } from "mobx-react"
import { observable } from "mobx"

@observer
class Timer extends React.Component {
  @observable secondsPassed = 0

  componentWillMount() {
    setInterval(() => {
      this.secondsPassed++
    }, 1000)
  }

  render() {
    return <span>Seconds passed: {this.secondsPassed} </span>
  }
}

ReactDOM.render(<Timer />, document.body)

...基于挂钩的组件中可观察到的局部状态要使用功能组件内部的局部可观察状态，可以使用useLocalStore和useAsObservableSource挂钩。

Answer 2

我认为通常的答案是MobX（或Redux）不是表单状态的正确选择。这有很多原因，但主要是出于性能，复杂性和可维护性的考虑。 MobX / Redux用于全局应用程序状态，而表单状态则更本地化。

社区正在朝着Formik之类的库发展，该库使您可以在组件内部本地全面管理表单状态和生命周期。它也可以与MobX / Redux配合使用，以选择从全局状态初始化值。检查一下，这非常棒！

https://github.com/jaredpalmer/formik

MobX本地状态与全局状态

2 个答案: