特殊业务场景下如何做技术选型？

Question

各位好，公司近期打算开发一个website build项目，我遇到了一些难题来此请教各位前辈。

• 技术栈：React为基础，其它随意。

• 个人能力：16年8月工作至今，开发React系列项目三个月，基础还行。

• 项目简介：用户可自主搭建属于自己的网站。参考国外wix和squarespace

• 问题描述：

一个网页对应着一个（唯一）JSON数据结构，由ajax在顶级组件获取，通过props一层层向下传递。以此渲染出页面
大致数据结构如下：

{
    pageId: xxxxx,
    containers: [
       {
           containerId: xxx1,
           components: [
               {
                   componentId: xxxx1, 
                   title: 'xxxxx',
                   logo:'http://xxx.jpg'
               },
               {
                   componentId: xxxx2, 
                   title: 'xxxxx',
                   description:'this is a description'
               }
           ]
       }, {
           containerId: xxx2,
           // ...
       }
    ]
}

对应的React组件结构也是大致如此：

//Page.jsx 一个Page组件由多个不同Container组件组成，至于Container是什么组件都是由数据中的id决定的
Class Page extends React.Component {
    componentDidMount() {
        // 获取JSON数据，并更新至this.state.data
    }
    
    render() {
        <div>
            <Container1 data={ data[0] } />
            <Container2 data={ data[1] } />
            <Container3 data={ data[2] } />
            // ...
        </div>
    }
}

// Container.jsx 一个Container组件由多个不同Component组件组成，至于Component是什么组件都是由数据中的id决定的
Class Container extends React.Component {

    render() {
        <div>
            <Component1 data={ this.props.data[0] } />
            <Component2 data={ this.props.data[1] } />
            <Component3 data={ this.props.data[2] } />
            // ...
        </div>
    }
}
 

凭借React优秀的组件化方案，将数据通过props层层下发，可以很轻松的将整个网页渲染出来。
但是，这是一个website build项目，用户可以在任意组件中自主更改内容，所以我遇到了一个难题：
当用户更改了第三个Container中第二个Component的数据，我该如何去更新对应的pagedata.containers[2].components[1]的数据？真实情况是我并不知道这里的索引[2]和[1]。

平常用得比较多的是Redux，这种需要事先定义好action和reducer的方式在这个业务场景下是完全用不上了。为此了解一下mobx（还没有特别熟悉），发现也不是很契合。
目前我没有其他办法，只能将更新数据的方法也通过props传递人组件中。示例代码如下：

Class Page extends React.Component {
    
    dispatchCallback = index => {
        return (data) => {
            // data是子组件修改过后的新数据
            // index是将data更新到对应的位置
            // ...
        }
    }
    
    render() {
        <div>
            <Container1 data={ data[0] } dispatchCallback={ this.dispatchCallback(0) }/>
            <Container2 data={ data[1] } dispatchCallback={ this.dispatchCallback(1) }/>
            <Container3 data={ data[2] } dispatchCallback={ this.dispatchCallback(2) }/>
        </div>
    }
} 

综上，因此来向各位有经验的朋友请教一番。是否有更合理的解决方式？
我觉得这种项目比较特殊，整个项目任何一点儿固定的地方都没有，整个page完全数据驱动。以往我做正常业务逻辑的项目感觉不会这么累。也想问问各位经验丰富前辈，所谓的复杂业务逻辑，何为复杂噢？谢谢。

Answer 1

你的container和component都是有Id的，完全可以通过id来辨别哪个组件发生了修改，然后发送action。Redux依然可以使用，关键是你这个场景交互比较灵活，你要设计好你的全局state。对于复杂业务场景来说，state的设计格外重要。
正好刚写了篇这方面的文章，你可以参考下：https://segmentfault.com/a/11...