反应，和/回流数据流：在DOM

单组分两次

<LandingPage> 
    <PageHeader> 
     <Menu> 
      <ShoppingCart> 
     </Menu> 
    </PageHeader> 
    <MainPage> 
     <ShoppingCart> 
    </MainPage> 
</LandingPage>

我们关心的组件是我的购物。

安装它（componentDidMount）时，ShoppingCart会触发一个操作，以便ShoppingCartStore向服务器发出请求并返回文章列表 - 触发ShoppingCart的重新呈现。

它现在设置的方式，总是会有两个请求和两个rerender，因为这两个组件都在dom中。

一个解决方案是让公共根触发这些请求，但这将是LandingPage - 而且必须通过PageHeader和Menu和MainPage传递数据。

有没有更好的解决方案？这足够好吗？

来源

2016-01-13 mr-

我对所有数据请求使用api.store。我在条目app.js中调用了api.store。然后，我使用api.store侦听初始数据请求的操作。 app.js

'use strict'; 
 

 
import React from 'react'; 
 
import ReactDom from 'react-dom'; 
 

 
import AppCtrl from './components/app.ctrl.js'; 
 
import Actions from './actions/api.Actions'; 
 
import ApiStore from './stores/Api.Store'; 
 

 
window.ReactDom = ReactDom; 
 

 
Actions.apiInit(); 
 

 
ReactDom.render(<AppCtrl />, document.getElementById('react'));

api.store

import Reflux from 'reflux'; 
 

 
import Actions from '../actions/api.Actions'; 
 
import ApiFct from '../utils/sa.api'; 
 

 
let ApiStoreObject = { 
 
    newData: { 
 
    "React version": "0.14", 
 
    "Project": "ReFluxSuperAgent", 
 
    "currentDateTime": new Date().toLocaleString() 
 
    }, 
 
    listenables: Actions, 
 
    apiInit() { ApiFct.setData(this.newData); }, 
 
    apiInitDone() { ApiFct.getData(); }, 
 
    apiSetData(data) { ApiFct.setData(data); } 
 
} 
 
const ApiStore = Reflux.createStore(ApiStoreObject); 
 
export default ApiStore;

在连接到存储初始状态调用存储数据的组件，因此，如果数据已经在那里你得到它。

import React from 'react'; 
 

 
import BasicStore from '../stores/Basic.Store'; 
 

 
let AppCtrlSty = { 
 
    height: '100%', 
 
    padding: '0 10px 0 0' 
 
} 
 

 
const getState =() => { 
 
    return { 
 
    Data1: BasicStore.getData1(), 
 
    Data2: BasicStore.getData2(), 
 
    Data3: BasicStore.getData3() 
 
    }; 
 
}; 
 

 
class AppCtrlRender extends React.Component { 
 
    render() { 
 
    let data1 = JSON.stringify(this.state.Data1, null, 2); 
 
    let data2 = JSON.stringify(this.state.Data2, null, 2); 
 
    let data3 = JSON.stringify(this.state.Data3, null, 2); 
 
    return (
 
     <div id='AppCtrlSty' style={AppCtrlSty}> 
 
     React 0.14 ReFlux with SuperAgent<br/><br/> 
 
     Data1: {data1}<br/><br/> 
 
     Data2: {data2}<br/><br/> 
 
     Data3: {data3}<br/><br/> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default class AppCtrl extends AppCtrlRender { 
 
    constructor() { 
 
    super(); 
 
    this.state = getState(); 
 
    } 
 

 
    componentDidMount =() => { this.unsubscribe = BasicStore.listen(this.storeDidChange); }; 
 
    componentWillUnmount =() => { this.unsubscribe(); }; 
 
    storeDidChange = (id) => { 
 
    switch (id) { 
 
     case 'data1': this.setState({Data1: BasicStore.getData1()}); break; 
 
     case 'data2': this.setState({Data2: BasicStore.getData2()}); break; 
 
     case 'data3': this.setState({Data3: BasicStore.getData3()}); break; 
 
     default: this.setState(getState()); 
 
    } 
 
    }; 
 
}

从https://github.com/calitek/ReactPatterns React.14/ReFluxSuperAgent。

来源

2016-01-13 19:37:48

反应，和/回流数据流：在DOM

回答

相关问题