关于webapp架构和reactJs的建议

Advice about webapp architecture and reactJs

本文关键字：reactJs webapp 关于      更新时间：2023-09-26

这个问题更多的是为了了解你对我试图解决这个问题的方式的看法。我需要一点ReactJs的专业知识，因为我是个新手。

首先是一点上下文。我正在使用ReactJs开发一个web应用程序作为前端部分。这个网络应用程序将有很多翻译，所以为了维护，我认为最好将所有翻译存储在数据库中，而不是将它们存储在文件中。通过这种方式，我可以使用sql脚本来管理它们。

我使用MySQL数据库作为后端，但出于性能原因，我添加了ElasticSearch作为第二个数据库（嗯，它更像是一个全文搜索引擎）。

因此，一旦应用程序启动，翻译就会自动加载到ElasticSearch中。每个翻译都有一个代码和一个文本，所以在弹性搜索中，我只加载一个语言环境（默认为英语）的翻译，当用户切换语言环境时，会调用以加载所选语言环境的所有翻译并更新其相应的文本。

通过这种方式，从前面开始，我只能通过代码引用翻译，并且我将在正确的语言环境中翻译文本。

现在，我该如何在反应中做到这一点？

到目前为止，我已经编写了一个组件TranslatedMessage，它基本上是在寻找给定的代码，并在呈现该组件时显示它。

组件代码下方：

import React from 'react';
export class TranslatedMessage extends React.Component {

constructor() {
    super();
    this.render = this.render.bind(this);
    this.componentDidMount = this.componentDidMount.bind(this);
    this.state = {message: ''};
}
render() {
    return (<div>{this.state.message}</div>);
}
componentDidMount() {
    var component = this;
    var code=this.props.code;
    var url="data/translation?code="+code;
    $.get(url, function (result) {
        component.setState({message: result.text});
    });
 }
};

然后我在应用程序whis中使用它，例如翻译"a"链接的标题：

  <a href="index"><TranslatedMessage code="lng.dropdown.home"/><i className="fa fa-chevron-down" /></a>

到目前为止工作正常，但问题是我需要刷新整个页面以显示新的翻译，因为我没有更新组件的状态。

现在我的问题是：

1） 每当我们在页面中找到组件TranslatedMessage时，就会创建该组件的新实例，对吗？所以基本上，如果我有1000个翻译，就会创建该组件的1000个实例？然后React必须小心并观察所有这些实例的状态变化？这会不会对表现很不利？你找到更有效的方法了吗？

2） 我不认为强制整个页面重新加载是最合适的方法，但当用户切换区域设置时，我如何更新所有组件的状态？我一直在读一个名为Flux的框架（或模式），也许它可以满足我的需求，你觉得怎么样，你会推荐它吗？

3） 你认为把翻译存储在数据库上怎么样？我有点担心每次翻译都要向数据库发送一个查询，你推荐还是不推荐这种方法？

欢迎提出任何建议、改进意见！

感谢您花时间阅读或提供任何帮助！

我使用的基本上是Flux存储。在初始化时，应用程序请求使用整个语言文件（即JSON），并将其推入存储中的内存，类似于这样（我现在假设是一个完全扁平的语言文件，我使用的是ES2015/16语法，为了简洁起见，我省略了错误检查等）：

class I18n {
  constructor() {
    this.lang = await fetch( 'lang_endpoint' )
      .then( res => res.json() )
  }
  get( translation ) {
    return this.lang[ translation ] || null
  }
}

在某个地方，我的应用程序在ReactDOM.render( <App /> )或某些变体期间启动，这会自上而下地呈现整个过程（我尽量消除状态）。如果我需要切换语言，那么我会绑定一个change处理程序，以便商店发出一个change事件，该事件由触发ReactDOM.render的一些代码听到。这是Flux更改应用程序状态的标准做法，关键是尝试从组件中消除状态，并将其存储在商店中。

要使用I18n类，只需在某个地方实例化它（我通常将它作为从文件导出的单例，例如module.exports = new I18n()、require，将该文件导出到组件中，并使用get方法（这假设了某种打包程序，如browserfy或webpack，但看起来您已经对复杂性进行了排序）：

import 'i18n' from 'stores/i18n'
class MyComponent extends React.Component {
  constructor() { ... }
  render() {
    return (
      <span>{ i18n.get( 'title' ) }</span>
    )
  }
}

该组件也可以简化为

const MyComponent = props => <span>{ i18n.get( 'title' ) }</span>
相关文章：