基于React的思维导图工具的设计与实现开题报告

1. 研究目的与意义（文献综述）

思维导图是使用一个中央关键词或想法引起形象化的构造和分类的想法;它用一个中央关键词或想法以辐射线形连接所有的代表字词、想法、任务或其它关联项目的图解方式。它可以利用不同的方式去表现人们的想法，如引题式，可见形象化式，建构系统式和分类式。它普遍地用作在研究、组织、解决问题和政策制定中。思维导图用于在视觉上组织信息。思维导图是分层的，显示了整体之间的关系。它通常是围绕一个概念创建的，以空白页中心的图像形式绘制，并向其中添加了诸如图像，单词和单词部分之类的相关概念表示。主要思想与中心概念直接相关，而其他思想则从这些主要思想中衍生出来。思维导图与概念图的不同之处在于思维导图仅关注一个单词或想法，而概念图则将多个单词或想法连接在一起。同样，概念图通常在其连接线/臂上具有文本标签。思维导图基于径向层次结构和树状结构，表示与中央控制概念的关系，而思维导图则基于概念之间的连接，且模式多种多样。

React（也称为React.js或ReactJS）是用于构建用户界面的JavaScript库。它由Facebook以及由个人开发人员和公司组成的社区维护。React使用Virtual DOM。React创建一个内存中的数据结构缓存，计算结果差异，然后有效地更新浏览器显示的DOM。尽管每一次都需要构造完整的 Virtual DOM 树，但由于 Virtual DOM 是 JavaScript 对象，性能极高，而对原生 DOM 进行操作的仅仅是 diff 部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到具体的 DOM 元素，而只需要关心在任意数据状态下，整个界面是如何渲染的。允许程序员编写代码，就像在每次更改时呈现整个页面一样，而React库仅呈现实际更改的子组件。React采用单向数据流的设计思想。单向数据流是指数据的流向只能由父组件通过props将数据传递给子组件，不能由子组件向父组件传递数据，要想实现数据的双向绑定，只能由子组件接收父组件props传过来的方法去改变父组件的数据，而不是直接将子组件的数据传递给父组件。

思维导图的主要应用：（1）可用于生成，可视化，组织和分类思想。（2）帮助研究并组织信息，解决问题，制定决策和写作。（3）从思维导图检索到的数据还可用于增强其他应用程序。其中包括搜索系统，搜索引擎以及推荐系统。

2. 研究的基本内容与方案

目标是如何用html5、css、javascript和react 绘制出思维导图,其中react 提供了一种更高效的操纵dom的途径。思维导图节点之间的关系有两种：（1）父子节点；（2）兄弟节点。一个节点只能有一个唯一的父节点，但可以同时拥有多个子节点和兄弟节点。

如图2.1(见附件)所示，节点1和节点2、3为父子节点，节点2、3则互为兄弟节点。可以将节点1、2、3看作一个思维导图，同时节点2和节点3也可以认为是两个独立的思维导图，即每一个节点及其子节点都可以认为是一个思维导图。

3. 研究计划与安排

第1周：进行开题报告的撰写；

第2周：学习html和开发环境的使用；

第3周：学习css；

4. 参考文献（12篇以上）

1. 弗兰纳根，JavaScript权威指南（第6版）[M]，机械工业出版社，2012
2. 未来科技，HTML5 CSS3 JavaScript从入门到精通（标准版）[M]，水利水电出版社，2017
3. 徐超，React进阶之路[M]，清华大学出版社，2018
4. 赵荣娇、刘江虹，React.js实战[M],清华大学出版社，2019
5. Maisuradze G, Rossow C. ret2spec: Speculative Execution Using Return Stack Buffers[J]. computer and communications security, 2018: 2109-2122
6. Yan J, Wang C, Cheng W, et al. A retrospective of knowledge graphs[J]. Frontiers of Computer Science in China, 2018, 12(1): 55-74.
7. Yang, Chen, et al. "Leveraging the Power of Component-based Development for Front-End Components: Insights from a Study of React Applications (S)." SEKE. 2018.
8. 张丰麟，王飞．ReactJS的新特性在Web开发中的应用［J］．移动信息，2015(10) :71－72.
9. 阮一峰． ECMAScript 6 入门［M］． 北京: 电子工业出版社， 2015．
10. 阮一峰． 也许DOM 不是答案． ［EB/OL］． http://www.ruanyifeng.com/blog/2015 /02/future－of－dom.html．
11. Facebook． Why React? ［EB/OL］． http://facebbok.github.io/react/docs/why－react.html．
12. 寸志，范洪春，杨森，等． League of Extraordinary Developers．Ｒeact: 引领未来的用户界面开发框架［M］． 北京:电子工业出版社,2015．
13. 阮一峰． React实例教程．［EB/OL］http://www.Ruanyifeng.com/blog/2015 /03 /react.html．
14. Bertoli, Michele. React Design Patterns and Best Practices. Packt Publishing Ltd, 2017.
15. Caspers, Matthias Kevin. "React and Redux." Rich Internet Applications w/HTML and Javascript (2017): 11.