使用 mobx 在渲染中反应内联函数答案

【问题标题】：React inline function in render with mobx使用 mobx 在渲染中反应内联函数
【发布时间】：2019-02-22 23:26:58
【问题描述】：

我可以在 mobx 的渲染中使用 bind 函数吗？我知道这种做法会导致性能下降，但我的同事说如果我们使用mobx 我们可以在渲染中使用bind 函数

例子：

import { inject, observer } from 'mobx-react'

@inject('store')
@observer
export default class Component extends React.Component {
  render() {
    const {
      store: {
        pushByPath,
      },
    } = this.props
    return (
      <div>
        <button
          onClick={() => pushByPath('param1')}
        />
        <button
          onClick={() => pushByPath('param2')}
        />
        <button
          onClick={() => pushByPath('param3')}
        />
      </div>
    )
  }
}

【问题讨论】：

如果您能在这里分享您的最终目标/您想做什么，这会有所帮助。 bind 是 JavaScript 特有的功能，可以玩转实例。
主要问题是 mobx 是否将您从渲染中的bind 问题中拯救出来

标签： reactjs mobx mobx-react

【解决方案1】：

如果您需要将函数 pushByPath 绑定到商店的实例，您可以遵循这样的模式：

import {action} from 'mobx';

class Store {

   @action.bound pushByPath(path) {
       // this here will always point to an instance of Store
   }
}

实际上，您可以使用 bind 并且真正重新创建函数会影响性能，但对于现代浏览器来说确实非常小。你用不mobx也没关系。

【讨论】：