React

時間 2020-08-09

標籤 react 欄目 React 简体版

原文原文鏈接

【1】前端技術規劃應該考慮什麼事情？html

1、組件庫、模塊化前端

2、開發效率react

3、運行效率webpack

4、可維護性web

5、體驗優化算法

【2】目前解決這些問題的方案？服務器

1、組件化：webComponent、React、babel

2、模塊化：webback、require.js 數據結構

3、開發效率：MVC（backbone）<Flux（React）<MVVM（Angular.js）dom

4、運行效率：backbone、React

5、可維護性：flux,

【3】React技術棧對上述問題的解決

1、組件化：React天生組建化，能夠在衆多開源組建找到

2、模塊化：基於webpack能夠使用ES6或CommonJs的寫法

3、開發效率：相比MVC去除了控制器角色，只用關心render函數，

react網頁源碼結構：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// ** Our code goes here! **

</script>

</body>

</html>

ReactDOM.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('example')

);

上面代碼將一個 h1 標題，插入 example 節點（查看 demo01）

【4】組件

React 容許將代碼封裝成組件（component），而後像插入普通 HTML 標籤同樣，在網頁中插入這個組件。React.createClass 方法就用於生成一個組件類

var HelloMessage = React.createClass({

render: function() {

return <h1>Hello {this.props.name}</h1>;

}

});

ReactDOM.render(

<HelloMessage name="John" />,

document.getElementById('example')

);

上面代碼中，變量 HelloMessage 就是一個組件類。模板插入 <HelloMessage /> 時，會自動生成 HelloMessage 的一個實例（下文的"組件"都指組件類的實例）。全部組件類都必須有本身的 render 方法，用於輸出組件。

【5】virtual DOM

組件並非真實的 DOM 節點，而是存在於內存之中的一種數據結構，叫作虛擬 DOM （virtual DOM）。只有當它插入文檔之後，纔會變成真實的 DOM 。根據 React 的設計，全部的 DOM 變更，都先在虛擬 DOM 上發生，而後再將實際發生變更的部分，反映在真實 DOM上，這種算法叫作 DOM diff ，它能夠極大提升網頁的性能表現

【6】AJAX

組件的數據來源，一般是經過 Ajax 請求從服務器獲取，能夠使用 componentDidMount 方法設置 Ajax 請求，等到請求成功，再用 this.setState 方法從新更新 UI

參考連接：http://www.ruanyifeng.com/blog/2015/03/react.html

相關標籤/搜索

react+react

react&react

react

react+webpack+redux+react

webpack+react+redux+react

antd+react+react

react+redux+react

drf+xadmin+react+dva+react

react+redux

laravel+react

React

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。