React的学习之旅-基础概念篇

        随机更新分享react学习路程，如果有不一样的见解亦或者不赞同之处可以留言与我，可以共同探讨一下。

 

React是什么？

        想必第一次接触这个框架亦或者是说第一次接触前端框架的同学们应该都会有这样的一个一个疑问。

        React是一个用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。（React16时由BSD 专利条款改为更受欢迎的 MIT 许可证）

        React框架通俗的来讲就是把javascript这门语言进行了二次的封装开发，这样就可以使开发人员能够拥有更好的开发体验以及开发效率，同时也在一定程度上帮助开发者们优化了性能。

        React采用的是Fiber架构，使用协作式多任务处理任务。将原来的整个 Virtual DOM 的更新任务拆分成一个个小的任务。每次做完一个小任务之后，放弃一下自己的执行(可以暂停)，将主线程空闲出来，看看有没有其他的任务。如果有的话，就暂停本次任务，执行其他的任务，如果没有的话，就继续下一个任务。

接下来看一下整体的react涉及优点（取自react官方文档）

声明式

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

这样一是方便与每个模块的复用以及调试以及后期优化，二也是每个组件间的状态管理更加方便了，如果不进行组件化开发的话，状态管理方面可能就会对开发期间以及后期维护造成很大阻碍。<=（个人见解）

一次学习，随处编写

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

React 哲学

React 最棒的部分之一是引导我们思考如何构建一个应用。

当我们第一次上手react项目时往往很多人都会有一个迷茫之处是，我应该怎么样来进行编写呢（或者是说上手点应该在哪）？相关组件我应该怎么进行封装呢？传入的props应该都是什么样的类型以及内容应该是什么呢？

        首先，当一个design拿到我们手上的时候，不要急于上手去写，首先应该进行一个拼装式的拆分。

        

拿淘宝网来讲，假设我们拿到的是这样一张design，我们首先要考虑哪些模块需要封装成独立的模板以便于后期复用。这里就局部分析一下：首先，上面的nav需要封装成一个公共组件，因为在其它页面也是肯定会用的，它的props的参数就不需要传入了；其次如banner图，封装成一个公共组件方便其它页面进行复用，它的props应该是以图片为内容的一个数组；

        当我们解析了它的组成之后就可以着手进行编写了··· ···

        其次，开发组件页面的时候，往往也还会有一个误区就是在于先编撰页面再考虑数据，这样也就导致了当你拿到数据后要根据页面结构在进行更改数据结构，往往还会将数据结构改得十分繁琐，正确的点应该是在于根据数据结构来进行构建页面，将数据结构进行一个简单化，这样一是会让你的开发体验提升一个层次，二是会使你的code在后期维护或者升级优化的时候会更加便利。

        总而言之，言而总之，即是在使用react这个框架之前，需要先有一个正确的编程思想。当然不单单是指react，使用其它的框架也是一样的需要先建立一个好的思想，这样才会使你的编程能力迅速提升~

以上内容部分来源于网络，如果侵权请联系我进行删除！