没有通量的同构 react.js

Posted 2023-02-22

【中文标题】没有通量的同构 react.js

【英文标题】：isomorphic react.js without flux

【发布时间】：2016-08-17 18:18:44

【问题描述】：

我是 react.js 的新手。我想制作同构 react.js 组件。我想知道是否可以在没有通量模式的情况下制作它？现在我的组件很少，组件内部有 api fetch 方法，看起来这个 api 调用运行了两次:(。

为了更清楚，我想在服务器端渲染 DOM，并想在浏览器端处理 react.js 组件事件。

我的组件看起来像：

Class MyComponent extends React.Component

 // my component code 
 // components events 

 render()  




if (!is_server()) 


apiFetch.my_api_call(function (result) 
    ReactDom.render(<MyComponent data=result.data/>, document.getElementById('navigation'))
);


else

apiFetch.my_api_call(function (result) 
    res.status(200).send(
        ReactDOMServer.renderToString(React.createElement(MyComponent, data: result.data))
    );
);

【参考方案1】：

创建一个父组件，其子组件将是MyComponent

class ParentComponent extends React.Component 
  componentDidMount() 
    // make api call
    apiCall.then((data) => 
      this.setState(
        reqData : data,
      )
    )
  

  getComponentToRender() 
    if(typeof this.state.reqData === 'undefined') 
      return false;
     else 
      return (
        <MyComponent data=result.data/>
      )
    
  

  render() 
    const componentToRender = this.getComponentToRender();
    return (
      <div>
        <componentToRender />
      </div>
    )
  

现在，无论 API 调用如何，都渲染您的 ParentComponent。一旦ParentComponent被挂载，就会自动触发MyComponent的渲染。