成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React系列---React（一）初識(shí)React

lanffy / 1411人閱讀

摘要：系列一初識(shí)系列二組件的和系列三組件的生命周期是推出的一個(gè)庫，它的口號(hào)就是用來創(chuàng)建用戶界面的庫，所以它只是和用戶界面打交道，可以把它看成中的視圖層。系列一初識(shí)系列二組件的和系列三組件的生命周期

React系列---React（一）初識(shí)React
React系列---React（二）組件的prop和state
React系列---React（三）組件的生命周期

React是Facebook推出的一個(gè)JavaScript庫，它的口號(hào)就是“用來創(chuàng)建用戶界面的JavaScript庫”，所以它只是和用戶界面打交道，可以把它看成MVC中的V（視圖）層。

React三大特性 組件

React的一切基于組件。使用React，唯一要關(guān)心的就是構(gòu)建組件。各個(gè)組件有各自的狀態(tài)，狀態(tài)變更時(shí)，會(huì)自動(dòng)重新渲染組件。組件特性也是Web前端發(fā)展的趨勢。

一個(gè)Profile組件的例子：

// Profile.jsx
import React from "react";
export default Class Profile extends React.Component {
    render() {
        return (
          

            
Hi, I am {this.props.name}

          

        )
    }
}

其他組件中，可以像HTML標(biāo)簽一樣引用它：

import Profile from "./profile";

export default function(props) {
    return (
      
    )
}
JSX

上面的render方法中，有一種直接把HTML嵌套在JS中的寫法，被稱作JSX。這種語法結(jié)合了JavaScript和HTML的優(yōu)點(diǎn)，即可以像平常一樣使用HTML，也可以在里面嵌套JavaScript語法，運(yùn)行時(shí)，Babel等工具會(huì)將JSX編譯成JavaScript語法。

用HTML這種語義化的方式代替寫JavaScript，總讓人愜意許多。

Virtual DOM

React的設(shè)計(jì)中，開發(fā)者基本上無需操縱實(shí)際的DOM節(jié)點(diǎn)，每個(gè)React組件都是用Virtual DOM渲染的，可以看成是一種用JavaScript實(shí)現(xiàn)的內(nèi)存DOM抽象。React在Virtual DOM上實(shí)現(xiàn)了一個(gè)Diff算法，渲染組件時(shí)，會(huì)高效的找出變更的節(jié)點(diǎn)，刷新到實(shí)際DOM上。

理解React特性 理解Virtual DOM

Web頁面是由一個(gè)個(gè)HTML元素嵌套組合而成的。當(dāng)使用JavaScript來描述這些元素時(shí)，這些元素可以簡單地被表示成純粹的JSON對(duì)象的。
比如現(xiàn)在需要描述一個(gè)按鈕（button），我們都知道，HTML語法如下：

其中包括了元素的類型和屬性。我們可以用這樣一個(gè)JSON對(duì)象去表達(dá)這個(gè)按鈕：

{
  type: "button",
  props: {
    className: "btn btn-blue",
    children: {
      type: "em",
      props: {
        children: "Confirm"
      }
    }
  }
}

這即是Virtual DOM的思想：將實(shí)際DOM節(jié)點(diǎn)抽象為內(nèi)存中的JavaScript對(duì)象。

理解組件

當(dāng)然，我們可以很方便地封裝上述button元素，得到一種構(gòu)建按鈕的公共方法：

const Button => ({ color, text }) {
    return {
      type: "button",
      props: {
        className: `btn btn-${color}`,
        children: {
          type: "em",
          props: {
            children: text,
          },
        },
      },
    };
}

當(dāng)我們要生成DOM元素中具體按鈕時(shí)，就可以調(diào)用Button({color:"blue", text:"Confirm"})來創(chuàng)建。
仔細(xì)思考這個(gè)過程可以發(fā)現(xiàn)，Button方法其實(shí)也可以作為元素存在（上面的Profile組件，就是這一回事），方法名對(duì)應(yīng)了DOM元素類型，參數(shù)對(duì)應(yīng)了DOM元素屬性，這樣構(gòu)建的元素就是React的組件元素。JSON結(jié)構(gòu)描述這個(gè)組件的話，大概是這樣：

{
    type: Button,
    props: {
      color: "blue",
      children: "Confirm"
    }
}

這也是React的核心思想之一。因?yàn)橛泄驳谋磉_(dá)方法，我們就可以讓元素們彼此嵌套混合。這些層層封裝的React組件元素，最終遞歸渲染出完整的DOM樹。

React系列---React（一）初識(shí)React
React系列---React（二）組件的prop和state
React系列---React（三）組件的生命周期

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83601.html

相關(guān)文章

  • React系列---React（三）組件的生命周期

    摘要：組件裝載過程裝載過程依次調(diào)用的生命周期函數(shù)中每個(gè)類的構(gòu)造函數(shù)，創(chuàng)造一個(gè)組件實(shí)例，當(dāng)然會(huì)調(diào)用對(duì)應(yīng)的構(gòu)造函數(shù)。組件需要構(gòu)造函數(shù)，是為了以下目的初始化，因?yàn)樯芷谥腥魏魏瘮?shù)都有可能訪問，構(gòu)造函數(shù)是初始化的理想場所綁定成員函數(shù)的環(huán)境。 React系列---React（一）初識(shí)ReactReact系列---React（二）組件的prop和stateReact系列---之React（三）組件的生...

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

  • React系列---React（二）組件的prop和state

    摘要：給賦值也是構(gòu)造函數(shù)的工作之一。在的構(gòu)造函數(shù)中，還給兩個(gè)成員函數(shù)綁定了當(dāng)前的執(zhí)行環(huán)境，因?yàn)榉绞絼?chuàng)建的組件并不自動(dòng)給我們綁定到當(dāng)前實(shí)例對(duì)象。我們可以利用的功能，避免判斷邏輯這種充斥在構(gòu)造函數(shù)之中，讓代碼更優(yōu)。 React系列---React（一）初識(shí)ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 組件是React...

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

  • 初識(shí)React

    摘要：初識(shí)依稀記得那年參加線下活動(dòng)，第一次聽說這個(gè)詞語，當(dāng)時(shí)的主講人是郭達(dá)峰，他播放了一個(gè)關(guān)于及的性能對(duì)比視頻。合成事件會(huì)以事件委托的方式綁定到組件最上層，并且在組件卸載的時(shí)候自動(dòng)銷毀綁定的事件。 初識(shí)React 依稀記得2015那年參加線下活動(dòng)，第一次聽說React這個(gè)詞語，當(dāng)時(shí)的主講人是郭達(dá)峰，他播放了一個(gè)關(guān)于ember、angular及react的性能對(duì)比視頻： React.js Co...

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

  • react開發(fā)教程（－）初識(shí)

    摘要：定義一個(gè)組件可以在其他組件中調(diào)用這個(gè)組件調(diào)用組件劉宇組件插入內(nèi)容在上面的案例中可以看到吧寫到當(dāng)中，這種寫法稱為。 React初識(shí) React是Facebook推出的一個(gè)javascript庫(用來創(chuàng)建用戶界面的Javascript庫)，所以他只是和用戶的界面打交道，你可以把它看成MVC中的V(視圖)這一層。 組件 React的一切都是基于組件的。web世界的構(gòu)成是基于各種HTML標(biāo)簽的...

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

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

0條評(píng)論

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