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

資訊專(zhuān)欄INFORMATION COLUMN

React 核心思想之聲明式渲染

baiy / 812人閱讀

摘要：模板北京時(shí)間數(shù)據(jù)渲染數(shù)據(jù)渲染將數(shù)據(jù)和模板綁定在渲染聲明式渲染和普通模板不同的是，模板寫(xiě)在文件中，而不是的標(biāo)簽中。創(chuàng)建模板容器類(lèi)北京時(shí)間渲染指令數(shù)據(jù)只用于存放可變的數(shù)據(jù)。北京時(shí)間通過(guò)算法計(jì)算如何更新視圖。

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

React 及 React 生態(tài)

React 的核心概念只有 2 點(diǎn)：

聲明式渲染(Declarative)

基于組件(Component-Based)

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

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

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

舉例：

// 命令式關(guān)注如何做（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]

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

// 聲明式關(guān)注做什么（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 函數(shù)所作的事情是將直接遍歷整個(gè)數(shù)組的過(guò)程歸納抽離出來(lái)，讓我們專(zhuān)注于描述我們想要的是什么(what)。

模板渲染

渲染：模板 => HTML => 頁(yè)面視圖

發(fā)生在服務(wù)器的叫后端模板渲染，公司用的是velocity。

發(fā)生在客戶(hù)端的叫前端模板渲染，常用的有 artTemplate。

以 artTemplate 為例。

模板

數(shù)據(jù)

渲染

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

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

React 通過(guò) diffing 算法計(jì)算如何更新視圖。而 diffing 算法有個(gè) 的假設(shè)前提，開(kāi)發(fā)人員會(huì)提供給長(zhǎng)列表的每個(gè)子項(xiàng)一個(gè) ID，幫助算法進(jìn)行對(duì)比。

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 步。

    第一步，開(kāi)發(fā)者使用 JSX 語(yǔ)法寫(xiě) React，babel 會(huì)將 JSX 編譯為瀏覽器能識(shí)別的 React JS 語(yǔ)法。這一步，一般配合 webpack 在本地進(jìn)行。

    第二步，執(zhí)行 ReactDOM.render 函數(shù)，渲染出虛擬DOM。

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

    頁(yè)面更新的流程同樣也是 3 步。

    第一步，當(dāng)頁(yè)面需要更新時(shí)，通過(guò)聲明式的方法，調(diào)用 setState 告訴 react。

    第二步，react 自動(dòng)調(diào)用組件的 render 方法，渲染出虛擬 DOM。

    第三步，react 會(huì)通過(guò) diffing 算法，對(duì)比當(dāng)前虛擬 DOM 和需要更新的虛擬 DOM 有什么區(qū)別。然后重新渲染區(qū)別部分的真實(shí) DOM。

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/80871.html

    相關(guān)文章

    • [譯]React 元素 vs React 組件 vs 組件支撐實(shí)例

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

      gnehc 評(píng)論0 收藏0

    • Vue + ArcGIS API for JavaScript 構(gòu)建前端GIS應(yīng)用（一）

      摘要：技術(shù)路線(xiàn)的選擇技術(shù)學(xué)習(xí)內(nèi)容匯總技術(shù)路線(xiàn)的選擇項(xiàng)目的技術(shù)路線(xiàn)是使用構(gòu)建一套前端應(yīng)用，更加具體的技術(shù)路線(xiàn)實(shí)際上是，應(yīng)用到了技術(shù)棧加上了最新版的。不管怎么說(shuō)，以這次項(xiàng)目對(duì)的使用體驗(yàn)挺好。本次項(xiàng)目沒(méi)有使用開(kāi)源的要求，自然是最好的選擇。 寫(xiě)這篇總結(jié)的意義：總結(jié)，回顧，反思項(xiàng)目進(jìn)行過(guò)程和這套Vue + ArcGIS API for JavaScriptGIS前端應(yīng)用技術(shù)路線(xiàn)，從項(xiàng)目與技術(shù)兩個(gè)方面積...

      lufficc 評(píng)論0 收藏0

    • React Redux 中間件思想遇見(jiàn) Web Worker 的靈感（附demo）

      摘要：寫(xiě)在最前原文首發(fā)于作者的知乎專(zhuān)欄中間件思想遇見(jiàn)的靈感附，感興趣的同學(xué)可以知乎關(guān)注，進(jìn)行交流。其中，最重要的一個(gè)便是對(duì)多線(xiàn)程的支持。在中提出了工作線(xiàn)程的概念，并且規(guī)范出的三大主要特征能夠長(zhǎng)時(shí)間運(yùn)行響應(yīng)理想的啟動(dòng)性能以及理想的內(nèi)存消耗。 寫(xiě)在最前 原文首發(fā)于作者的知乎專(zhuān)欄：React Redux 中間件思想遇見(jiàn) Web Worker 的靈感（附demo），感興趣的同學(xué)可以知乎關(guān)注，進(jìn)行交流...

      whatsns 評(píng)論0 收藏0

    • Js-函數(shù)式編程

      摘要：組合組合的功能非常強(qiáng)大，也是函數(shù)式編程的一個(gè)核心概念，所謂的對(duì)過(guò)程進(jìn)行封裝很大程度上就是依賴(lài)于組合。在理解之前，先認(rèn)識(shí)一個(gè)東西概念容器容器為函數(shù)式編程里普通的變量對(duì)象函數(shù)提供了一層極其強(qiáng)大的外衣，賦予了它們一些很驚艷的特性。 前言 JavaScript是一門(mén)多范式語(yǔ)言，即可使用OOP（面向?qū)ο螅部梢允褂肍P（函數(shù)式），由于筆者最近在學(xué)習(xí)React相關(guān)的技術(shù)棧，想進(jìn)一步深入了解其思想...

      whinc 評(píng)論0 收藏0

    • 漫談前端性能 突破 React 應(yīng)用瓶頸

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

      whlong 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <