Question

我曾经使用react + mobx来构建应用程序，进行存储并将其传递给提供程序，并注入装饰器。（其中一些应用程序很大，很多数据，表格，网格...）

// store.js
class Store {
    @mobx.observable counter = 0;

    @mobx.action
    increaseCounter = () => {
        this.counter++;
    }
}

// App.js
class App extends Component {
    constructor(props){
        super(props);
        this.store = new Store();
    }
    
    render(){
        return(
            <mobx.provider store={this.store}>
                <AppChildren />
            </mobx.provider>
        );
    }
}

// AppChildren.js
@mobx.inject('store')
class AppChildren extends Component {
    render(){
        const { counter, increaseCounter } = this.props.store;

        return(
            <div onClick={increaseCounter}>{counter}</div>
        );
    }
}

在此示例中，无论我在树上有多少个孩子，我都将始终能够注入商店并与之合作，而无需将状态/可观察到的道具向下传递，一次又一次（此应用程序有些陈旧，现在我知道上下文更好了。

我试图跟上React方法，所以我读了一些有关钩子的文章，并且已经对其进行了一些研究，是否有一些类似于上面介绍的模式？还有比这更好的东西吗？

好吧，如果有人有小费，文章，教程或任何我真正喜欢的东西！

Answer 1

对于功能组件，您可以使用此挂钩：

import { MobXProviderContext } from 'mobx-react'

function useStores() {
  return React.useContext(MobXProviderContext)
}


// usage

function Component() {
  const { userStore, someOtherStore} = useStores();

  return (...)
}

您仍然需要将商店传递给mobx Provider。

有关此方法和此处其他方法的更多信息，https://mobx-react.js.org/recipes-context

反应挂钩模式提示

1 个答案: