国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React 核心思想之聲明式渲染

baiy / 839人閱讀

摘要：模板北京時間數據渲染數據渲染將數據和模板綁定在渲染聲明式渲染和普通模板不同的是，模板寫在文件中，而不是的標簽中。創建模板容器類北京時間渲染指令數據只用于存放可變的數據。北京時間通過算法計算如何更新視圖。

React 發展很快，概念也多，本文目的在于幫助初學者理清 React 核心概念。

React 及 React 生態

React 的核心概念只有 2 點：

聲明式渲染(Declarative)

基于組件(Component-Based)

聲明式渲染 聲明式與命令式

命令式編程：命令“機器”如何去做事情(how)，這樣不管你想要的是什么(what)，它都會按照你的命令實現。

聲明式編程：告訴“機器”你想要的是什么(what)，讓機器想出如何去做(how)。

舉例：

// 命令式關注如何做（how）

var numbers = [1,2,3,4,5]

var doubled = []

for(var i = 0; i < numbers.length; i++) {

  var newNumber = numbers[i] * 2
  doubled.push(newNumber)

}
console.log(doubled) //=> [2,4,6,8,10]

遍歷整個數組，取出每個元素，乘以二，然后把翻倍后的值放入新數組，每次都要操作這個雙倍數組，直到計算完所有元素。

// 聲明式關注做什么（what）

var numbers = [1,2,3,4,5]

var doubled = numbers.map(function(n) {

  return n * 2
})
console.log(doubled) //=> [2,4,6,8,10]

map 函數所作的事情是將直接遍歷整個數組的過程歸納抽離出來，讓我們專注于描述我們想要的是什么(what)。

模板渲染

渲染：模板 => HTML => 頁面視圖

發生在服務器的叫后端模板渲染，公司用的是velocity。

發生在客戶端的叫前端模板渲染，常用的有 artTemplate。

以 artTemplate 為例。

模板

數據

渲染

setInterval(function() {
    // 數據
    var data = {
        date: new Date()
    };
    // 渲染（將數據和模板綁定在）
    var html = template("test", data);
    // 渲染
    document.getElementById("container").innerHTML = html;
},100)
React 聲明式渲染

和普通模板不同的是，React 模板寫在 JS 文件中，而不是 html 的

React 通過 diffing 算法計算如何更新視圖。而 diffing 算法有個 的假設前提，開發人員會提供給長列表的每個子項一個 ID，幫助算法進行對比。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    
  • 
      {number}
    
    • 
  );
  return (
    
      {listItems}
    
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  ,
  document.getElementById("root")
);
    完成的渲染流程

    初始化的渲染流程分為 3 步。

    第一步，開發者使用 JSX 語法寫 React，babel 會將 JSX 編譯為瀏覽器能識別的 React JS 語法。這一步，一般配合 webpack 在本地進行。

    第二步，執行 ReactDOM.render 函數，渲染出虛擬DOM。

    第三步，react 將虛擬DOM，渲染成真實的DOM。

    頁面更新的流程同樣也是 3 步。

    第一步，當頁面需要更新時，通過聲明式的方法，調用 setState 告訴 react。

    第二步，react 自動調用組件的 render 方法，渲染出虛擬 DOM。

    第三步，react 會通過 diffing 算法，對比當前虛擬 DOM 和需要更新的虛擬 DOM 有什么區別。然后重新渲染區別部分的真實 DOM。

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80871.html

    相關文章

    • [譯]React 元素 vs React 組件 vs 組件支撐實例

      摘要：元素和組件實例都不表示真實元素。我希望這篇文章能夠幫助你理清這些術語參考資料翻譯成支撐實例來自于理解中方法創建組件的聲明式編程和命令式編程的比較對循環提示增加的研究精髓之一算法 本篇為譯文，原文出處：React Elements vs React Components vs Component Backing Instances 許多人可能聽說過 Facebook 的 React 庫，...

      gnehc 評論0 收藏0

    • Vue + ArcGIS API for JavaScript 構建前端GIS應用（一）

      摘要：技術路線的選擇技術學習內容匯總技術路線的選擇項目的技術路線是使用構建一套前端應用，更加具體的技術路線實際上是，應用到了技術棧加上了最新版的。不管怎么說，以這次項目對的使用體驗挺好。本次項目沒有使用開源的要求，自然是最好的選擇。 寫這篇總結的意義：總結，回顧，反思項目進行過程和這套Vue + ArcGIS API for JavaScriptGIS前端應用技術路線，從項目與技術兩個方面積...

      lufficc 評論0 收藏0

    • React Redux 中間件思想遇見 Web Worker 的靈感（附demo）

      摘要：寫在最前原文首發于作者的知乎專欄中間件思想遇見的靈感附，感興趣的同學可以知乎關注，進行交流。其中，最重要的一個便是對多線程的支持。在中提出了工作線程的概念，并且規范出的三大主要特征能夠長時間運行響應理想的啟動性能以及理想的內存消耗。 寫在最前 原文首發于作者的知乎專欄：React Redux 中間件思想遇見 Web Worker 的靈感（附demo），感興趣的同學可以知乎關注，進行交流...

      whatsns 評論0 收藏0

    • Js-函數式編程

      摘要：組合組合的功能非常強大，也是函數式編程的一個核心概念，所謂的對過程進行封裝很大程度上就是依賴于組合。在理解之前，先認識一個東西概念容器容器為函數式編程里普通的變量對象函數提供了一層極其強大的外衣，賦予了它們一些很驚艷的特性。 前言 JavaScript是一門多范式語言，即可使用OOP（面向對象），也可以使用FP（函數式），由于筆者最近在學習React相關的技術棧，想進一步深入了解其思想...

      whinc 評論0 收藏0

    • 漫談前端性能 突破 React 應用瓶頸

      摘要：表示調用棧在下一將要執行的任務。兩方性能解藥我們一般有兩種方案突破上文提到的瓶頸將耗時高成本高易阻塞的長任務切片，分成子任務，并異步執行這樣一來，這些子任務會在不同的周期執行，進而主線程就可以在子任務間隙當中執行更新操作。 showImg(https://segmentfault.com/img/remote/1460000016008111); 性能一直以來是前端開發中非常重要的話題...

      whlong 評論0 收藏0

    發表評論

    0條評論

    baiy

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <