reactjs - 将 mobx 可观察对象作为 props 传递给 React 组件是否安全

Question

假设，我有一个 Product 模型，它有 10 多个属性，其中一些也是对象。

{
  "product": {
    "name": "shoe",
    "brand": "....",
    "categories": {
      "abc": {
        ...
      }
    },
    ...
  }
}

我需要更新 react 组件中的产品，但是，产品还有一些子组件可供其他组件查看/更改。

@observer
class ProductContainer extends Component {

    @observable product;

    render() {
        return (
            <ProductDetails product={product} />
        )
    }
}


@observer
class ProductDetails extends Component {

    static propTypes = {
        product: PropTypes.any
    }

    @autobind
    @action
    handleChangeName(event) {
        const {product} = this.props;
        product.name = event.target.value;
    }

    render() {
        const {product} = this.props;
        return (
            <form>
                <label>Name: <input type="text" onChange={this.handleChangeName} /> </label>
                <CategoryView categories={product.categories} />
            </form>
        );
    }
}

如示例中所示，我有内部组件，例如 CategoryView，我向其传递可观察对象的子对象(也是可观察的)。

我在示例中所做的是不更改 product 属性引用，而是更改它的子项和属性(例如名称)。

React 说 props 应该是不可变的，但是下面的例子工作得很好。这样做安全吗？

Answer 1

MobX 完全没问题，这是正确的方式。

有时您不想更改这样的属性，而是围绕您的数据创建某种模型包装器(例如 https://github.com/mobxjs/mobx-state-tree 或其替代方案)并使用模型方法来更改内容。但你的例子也可以。

尽管您需要使用 observer 装饰器包装 ProductDetails ，以便它可以对更改使用react。 (也许您只是在示例中省略了它)