时间戳

首页 > 解决方案 > React Hook 模式提示

reactjs - React Hook 模式提示

问题描述

我曾经使用 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>
        );
    }
}

在这个例子中，无论树中有多少孩子，我总是能够注入商店并使用它，而无需传递状态/可观察的 trought 道具，一次又一次，一次又一次（这个应用程序是有点老了，我现在知道上下文更好）。

我正在努力跟上反应方法，所以我已经阅读了有关钩子的内容，并且已经玩了一点，有一些类似于上面介绍的模式吗？还有比这更好的吗？

好吧，如果有人有小费、文章、教程或任何我真的很感激的东西！

标签： reactjsreact-hooksmobx-react

解决方案

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

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

推荐阅读