[ Day 02 ] 什麽是 React.js ?

我自己在学习新技术的时候比较习惯先了解一下这个技术的基本概念还有它解决了什麽问题。
所以今天我要跟大家一起来看 React.js 到底是什麽？它又能够帮我们做什麽呢？

什麽是 React.js ?

A JavaScript library for building user interfaces.

没错！从官网进去後，印入眼帘的就是这段话。
所以 React.js 其实就是一个用来打造 UI 的 JavaScript 函式库，而且它是由 Facebook 团队所开发出来的。在 Facebook Open Source 中不只有 React.js 而已，现今撰写 APP 常用到的框架 React Native 也是由他们所开发的（在 Facebook Open Source 的网站中可以浏览其他由该团队开发的框架和函式库）。

框架 Framework？ 函式库 Library？

随着网页开发的功能越来越多元、内容也越来越复杂後，工程师们为了解决开发上衍生出的种种问题而写出解决这些状况的框架和函式库。不过看了那麽多资料跟介绍不断地提及框架和函式库，我真的每次都被搞得头昏眼花。结果就在搜集资料和浏览文章的时候看到了这篇文章仔细地分析了究竟这两者的差别在哪？

差异在於，使用「框架」的话，框架具有控制权，而身为这份软件的开发者，你需要依照框架的设计把功能填上，填完的之後，程序便会照你的意思运作了；「函式库」则是不同的，它像是一个弹药库，里面藏有各种武器供你使用，你有控制权去决定怎麽使用它们，甚至不使用。

看完这段叙述之後我们大概可以了解这两者之间的差异了吧？
想想看以前在练习 Side Project 的时候如果遇到不会的功能，可能会去 CodePen 上面找看看别人的范例。而这些范例当中会有些人在特定的地方使用到 jQuery 这个函式库 (library) 但是并不一定所有的内容都会使用到（可能一部分是写原生的 JavaScript ）。不过当你是使用 Vue.js 这个 框架 (Framework) 的时候，就是必须按照它设定好的环境来撰写特定的语法来开发整个功能。

所以你有发现一件事情吗？
在你见过的大多数资料内所提及目前的前端三大框架 Angular 、 Vue.js 以及 React.js 中，其实有一个根本就不是框架而是函式库，它就是 React.js ！

所以 React.js 可以解决什麽问题？

透过上面的内容我们现在对 React.js 可以说是有初步的认识了，但是所有的工具（不管是框架或函式库）被开发出来都是为了要解决问题，让我们能够更便利更快速地进行前端开发。讲了这麽多，所以 React.js 到底提供了哪些功能来帮助我们呢？

要了解它能帮你解决什麽问题前，你其实应该先问问自己一个问题：
在最一开始学习 JavaScript 做前端开发时遇到了哪些状况？

这边先列几个我曾经写原生 JavaScript 写到怀疑人生的时候遇到的状况给大家作为参考：

1. 设定很多 DOM ，光想命名就崩溃。之後除了要监听事件，还要注意绑定的 DOM 是否正确？否则也监听不到。
2. 不断地在渲染(Render)画面。如果要渲染的区块比较多资料的话，程序码就会看起来又臭又长。
3. 有些功能类似的开发，因为资料还是有些微的不一样就一直重复撰写相似的内容。

以上就是我目前想到当初在使用原生 JavaScript 开发的时候遇到的难处和困扰。当然我相信这不会是只有我一个人遇到的状况，所以这些开发困境也是让後来许许多多的 JavaScript 框架和函式库不断出现的原因。

所以知道自己的问题在哪之後，我们就来看看 React.js 这个函式库究竟提供了什麽样的方法来帮助我们脱离上面的种种困境呢？

React.js 的两大特色

1. 宣告式 Declarative

• 在 React.js 中的 View 是采用宣告的方式并使用 Virtual DOM 的概念来进行绑定和渲染。它会在资料有变更时更有效率的自动更新并渲染 （Render） 所有有产生变动的元件。
  简单来说，这代表当我的资料或内容有更新的时候，我不再需要去重新渲染出整个区块的资料，而是透过宣告式的 View 来直接帮我更新画面上那些有变更的资料而且需要重新渲染的部分即可。

  所以这部分就解决了我们前面提到不断的再重新渲染页面的问题（ Virtual DOM 是什麽？附上传送门给大家）。

2. 元件式开发 Component-Based

• React.js 是以元件为基础来做开发的，因此你可以自行定义不同的元件并设定每个元件不同的状态（state），以及透过传送给子元件（props）的方式来进行资料的传递。
  而基於这样的元件基础开发模式之下，我们就可以将网站中会重复利用的东西（像是按钮等）定义成一个元件，并针对不同用途或功能去做设定资料（像是按钮上面的文字）。

  所以这部分则是解决了原生 JavaScript 在开发上会重复撰写相同功能但是不同资料的东西，大大的简化程序码之外也提升了可阅读性和之後要修改的便利性。

以上都是 React.js 为我们提供的强大功能，不过还有很多等着我们探索的地方，所以就继续读下去吧！
另外有任何问题都非常非常欢迎提出和指教唷～
那我们下篇见ʘ‿ʘ