无人机多任务寻径仿真软件与实验平台（3）

本篇主要记载了开发过程中需求的进一步明确以及技术选型、模块划分以及react框架

需求简要：

页面结构包含两个部分，列表和画布

页面菜单有两个选项，坐标点和路径

菜单切换时不改变页面结构，只改变显示的内容

在坐标点页面，可以手动添加坐标点

坐标点列表和路径列表均可删除任意数据

技术选型：

react框架 – 显示页面

redux – 状态管理

react-router – 内容切换

antd – UI库

echart – 图表绘制

代码目录结构：

App.jsx – 主模块

Components – 组件

Containers –容器（react-redux）

Redux – 状态管理

Api – AJAX请求

模块划分：

主模块（父模块）：负责主体结构，结构为左侧列表右侧画布，左上角有菜单切换按钮

坐标点列表、路径列表：列出所有坐标点或所有路径，根据页面菜单状态确定显示哪种内容

路径画布、坐标点画布：画出所有坐标点或所有路径，根据页面菜单状态确定显示哪种内容

注：除主模块，均放在components文件夹中，react框架的每个模块对应一个class，其中state代表状态，setState方法可以修改状态，render方法显示页面标签。

React框架

选择React框架的原因

1.声明式开发

命令式编程需要我们一点一点的告诉dom它要怎么去做，怎么去挂载

react是一种声明式开发，强调的是“做什么”而不是“怎么做”。react是面向数据编程的，只要把数据构建好就行了，react会根据这个数据自动构建网站。

2.组件化

我们可以很直观的将一个复杂的页面分割成若干个独立的组件，每个组件包含自己的逻辑和样式，再将这些独立组件组合成完成一个复杂的页面，这样既减少了逻辑复杂度，又实现了代码的重用

3.单向数据流

父组件可以给子组件传值，但是子组件只可以使用这个值，绝不能改变这个值。想要改变这个值的话，只能通过调用父组件的方法去改变父组件的值。

4.函数式编程

我们在使用react编程时，其实写的都是一个个的函数，如 constructor，render等，都是一个个的函数，容易维护，也更容易实现前端自动化测试。

元素渲染

react元素都是不可变的。当元素被创建之后，是无法改变其内容或属性的

目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法。例如：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

以上实例通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()。

React JSX

React 使用 JSX 来替代常规的 JS

JSX 是一个看起来很像 XML 的 JS语法扩展。

我们不需要一定使用 JSX，但它有以下优点：

1.JSX执行更快，因为它在编译为JS代码后进行了优化

2.它是类型安全的，在编译过程中就能发现错误

3.使用JSX编写模板更加简单快速

元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素

React 组件

上文中在选择react框架的原因中已经提到：“我们可以很直观的将一个复杂的页面分割成若干个独立的组件，每个组件包含自己的逻辑和样式，再将这些独立组件组合成完成一个复杂的页面，这样既减少了逻辑复杂度，又实现了代码的重用。”

react实例：

function Name(props) {
    return <h1>网站名称：{props.name}</h1>;
}
function Url(props) {
    return <h1>网站地址：{props.url}</h1>;
}
function Nickname(props) {
    return <h1>网站小名：{props.nickname}</h1>;
}
function App() {
    return (
    <div>
        <Name name="XXX" />
        <Url url="XXXX" />
        <Nickname nickname="XX" />
    </div>
    );
}
 
ReactDOM.render(
     <App />,
    document.getElementById('example')
);

实例中 App 组件使用了 Name、Url 和 Nickname 组件来输出对应的信息

React AJAX

React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI

react实例：使用 jQuery 完成 Ajax 请求

class UserGist extends React.Component {
  constructor(props) {
      super(props);
      this.state = {username: '', lastGistUrl: ''};
  }
 
 
  componentDidMount() {
    this.serverRequest = $.get(this.props.source, function (result) {
      var lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      });
    }.bind(this));
  }
 
  componentWillUnmount() {
    this.serverRequest.abort();
  }
 
  render() {
    return (
      <div>
        {this.state.username} 用户最新的 Gist 共享地址：
        <a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a>
      </div>
    );
  }
}
 
ReactDOM.render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.getElementById('example')
);