react系列-01

時間 2019-11-12

標籤 react 系列欄目 React 简体版

原文原文鏈接

React 1

react 做爲當今前端最熱的框架之一，雖然因BSD+專利許可協議事件再三成爲話題焦點，但其不能否認的設計思想仍是值得學習的。再者，凡封閉者必將自掘墳墓，即使以維護開源爲理由也不能排除在外；facebook做爲開源精神的一個踐行者不會不明白這麼淺顯的道理，因此，copyRight最終仍是會走向coprLeft.
上帝的歸上帝，凱撒的歸凱撒，程序猿能安心的寫代碼就好。
如今有不少構建React項目的腳手架工具，不少開發者也本身開發出各類構建工具，這裏推薦兩個：一個是facebook官方推薦的react-cli工具create-react-app create-react-app；另外一個是淘寶基於AntDesign的dva-cli dva-cli;javascript

1. what is React:

相對於angular來講，react更像是一個庫而非框架，由於從控制反轉的角度來講，使用angular開發的過程，咱們須要遵循angular的各類規範，須要按照angular的解構設計去編寫邏輯，組織代碼；而使用react過程，咱們能夠採用任何其餘方案來替代react的功能，當你的項目中已經引入react的前提下，你仍然能夠根據本身/團隊的喜愛和技術棧來選擇適合的開發組件，你能夠去控制react,控制你所開發的項目。因此我更同意稱react爲一個優秀的前端庫，而非框架。這也再次印證了你們一致認爲的react的學習成本和學習難度要低於angular,學習曲線也更加平滑。

2. why React?

讓咱們先拋棄全部的框架庫概念，簡單的從一個最簡單的hello world例子來看一下,如何在你的項目中使用react:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React </title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id='container'>
    </div>
    <script type="text/babel">
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.getElementById('container')
    )
    </script>
  </body>
</html>

1.僅僅須要兩步便可寫出一個react例子：

1.引入react依賴文件：①react.min.js--React的核心庫文件；②react-dom.min.js--React封裝/操做Dom的文件；③babel.min.js--將ES6代碼轉化爲ES5代碼的下一代javascript編譯器；
2.構建react組件：ReactDOM.render(domElement,container);

2. 而後再深刻看下react的優秀之處：

專一於View層，其餘交給周邊生態系統，給予開發者最大個性化便利；
採用虛擬DOM技術，避免了直接操做Dom元素，其性能天然不用過多優化便可有很好的用戶界面體驗；
其配合使用的優秀插件（react自身並不具備）flux採用單項數據流，頁面狀態更新邏輯更清晰輕量；

3. how to use React?

1. 能夠從零開始一點一點構建整個項目，這種方式能夠促進開發者更加深刻的理解react的整個構建原理及底層實現邏輯；
2. 採用構建工具，更加快捷高效的搭建項目開發環境；

這裏主要介紹一下采用官方推薦的構建工具create-react-appcss

安裝構建工具：npm install create-react-app -g
初始化項目： create-react-app project-name
進入項目目錄： cd project-name
安裝項目依賴包：npm install
運行項目： npm start
打開瀏覽器，輸入localohost:3000便可看到項目

4. react 核心概念

React的核心思想只有一個：封裝組件。html

最近幾年，前端一直流行這各類MV*框架，其知道思想就是向後端開發學習，業務邏輯視圖分離，使系統各部分之間耦合性更小、複用性更高、功能更專一；從代碼邏輯結構上來說，就是html、js(controller)、css、router進行拆分集中處理，典型的框架如Angular,Knockout,Ember；相比較而言React有一下幾個特別之處:前端

模塊化思想，將web頁面不斷拆分紅各個功能集中的組件，每一個組件聚焦於一個或一類功能，代碼層面並未對html、js進行區分，甚至進行糅合，由此就蛋生了JSX這種html+js雜糅的‘a faster,safer,esier Javascript’;
虛擬DOM：頁面初始化以前；react對於組件在服務端完成DOM tree + Style rules 到render tree的解析，直接將解析後的render tree 返回給瀏覽器，極大提升了web網站的性能；
單向數據流：頁面元素/狀態發生變化是，react各層級之間的組件、頁面與服務端的數據交互，採用props、state來進行組件間的通信，雖然代碼書寫時須要建立各類action來維護UI的更新，沒有雙向數據綁定那麼方便，但UI性能上卻很容易得以保證；