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

資訊專欄INFORMATION COLUMN

React一——起源、安裝、jsx

reclay / 2574人閱讀

摘要：起源官網(wǎng)公司出品，因?yàn)閷?duì)市場(chǎng)上所有框架，都不滿意，就決定自己寫(xiě)一套，用來(lái)架設(shè)的網(wǎng)站。而來(lái)自的框架正是完全面向此問(wèn)題的一個(gè)解決方案，按官網(wǎng)描述，其出發(fā)點(diǎn)為用于開(kāi)發(fā)數(shù)據(jù)不斷變化的大型應(yīng)用程序。

React 起源

官網(wǎng)：https://doc.react-china.org/d...
Facebook公司出品，因?yàn)閷?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，
就決定自己寫(xiě)一套，用來(lái)架設(shè) Instagram 的網(wǎng)站。
做出來(lái)以后，發(fā)現(xiàn)這套東西很好用，然后13年面世，14年國(guó)內(nèi)引入，
由于 React 的設(shè)計(jì)思想極其獨(dú)特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡(jiǎn)單，
同時(shí)github受到大量的關(guān)注，國(guó)內(nèi)各大公司都會(huì)分出專門的人力物力去研究使用。

出發(fā)點(diǎn)

基于HTML的前端界面開(kāi)發(fā)正變得越來(lái)越復(fù)雜，其本質(zhì)問(wèn)題基本都可以歸結(jié)于：
如何將來(lái)自于服務(wù)器端或者用戶輸入的動(dòng)態(tài)數(shù)據(jù)高效的反映到復(fù)雜的用戶界面上。
而來(lái)自Facebook的React框架正是完全面向此問(wèn)題的一個(gè)解決方案，按官網(wǎng)描述，其出發(fā)點(diǎn)為：
用于開(kāi)發(fā)數(shù)據(jù)不斷變化的大型應(yīng)用程序（Building large applications with data that changes over time）。

相比傳統(tǒng)型的前端開(kāi)發(fā)，React開(kāi)辟了一個(gè)相當(dāng)另類的途徑，實(shí)現(xiàn)了前端界面的高性能高效率開(kāi)發(fā)。

安裝 
a. 腳手架 cnpm i create-react-app -g
b. 創(chuàng)建項(xiàng)目 create-react-app react-app
c. 裝好之后src 里只留index.js入口文件
    react 與 react-dom
        react ： react代碼的構(gòu)建
        react-dom:將react代碼渲染到頁(yè)面上
    //渲染主鍵 掛載點(diǎn)
    ReactDom.render(
test
,document.getElementById("root"))
d. index.js

    import React from "react"
    import ReactDom from "react-dom"
React概念

React不是一個(gè)完整的MVC框架，最多可以認(rèn)為是MVC中的V（View），甚至React并不非常認(rèn)可MVC開(kāi)發(fā)模式；，因?yàn)镸VC耦合度高，性能也不是很好

適用的項(xiàng)目：數(shù)據(jù)不斷變化的大型應(yīng)用程序？Why?
優(yōu)點(diǎn)： 高性能高效率
React是一個(gè)輕量級(jí)視圖層前端JS框架

無(wú)狀態(tài)組件和有狀態(tài)組件(高階組件)

1、無(wú)狀態(tài)組件：例如

const test = function(){

    //情形一
    return 
test

    
    //顯示js邏輯
    let x = "test"
    return 
{x}

    
    //顯示js邏輯2
    let x = "test"
    return (
        

            
{x}

            
test

        

    )
}
 
ReactDom.render(test(),document.getElementById("root"))

可以看到 無(wú)狀態(tài)組件沒(méi)有定義類 React.createClass 或者class Name extends React.Component 來(lái)創(chuàng)建自己的函數(shù)組件
直接簡(jiǎn)寫(xiě)成了一個(gè)render函數(shù)
省掉了將組建類實(shí)例化的過(guò)程
無(wú)法實(shí)現(xiàn)組建的生命周期方法
不支持“ref” ，因?yàn)樵?React 調(diào)用到無(wú)狀態(tài)組件的方法之前，是沒(méi)有一個(gè)實(shí)例化的過(guò)程的，因此也就沒(méi)有所謂的 "ref"

2、有狀態(tài)組件(高階組件)
我們正常寫(xiě)的組件都可稱為有狀態(tài)組件

React 特點(diǎn)和優(yōu)勢(shì)

JSX語(yǔ)法糖

全稱為javascript xml，作用，幫助React構(gòu)建虛擬dom結(jié)構(gòu)，不使用JSX的話，需要使用React.createElement(tagName,options:(id,className),contents..)
例如：

var child1 = React.createElement("li", null, "First Text Content");
var child2 = React.createElement("li", null, "Second Text Content");
var root = React.createElement("ul", { className: "my-list" }, child1, child2);

使用jsx語(yǔ)法會(huì)使react開(kāi)發(fā)更為簡(jiǎn)單，xml指的只是借鑒了一些XML的語(yǔ)法，標(biāo)簽必須閉合，最外層必須有節(jié)點(diǎn)包裹

常用語(yǔ)法：

1、定義屬性及元素

 var node = (
  

    {
       person ? Welcome back, {person.firstName} {person.lastName}!
       : Please log in
    }
  

);

2、事件綁定

3、樣式

Hello World.

或：
    var style = {
      color: "#ff0000",
      fontSize: "14px"
    };
    
    var node = 
HelloWorld.
;

4、class類名用className

5、遍歷

    
      
        {  
            arr.map(function(name){  
                return 
  • {name}
    •  //必須要return出來(lái)否則在dom中不會(huì)顯示  
            })  
        }     
    
,

6、用Babel進(jìn)行jsx編譯

npm install —save-dev babel-loader

    只需稍微改變一下webpack.config.js的配置，將原來(lái)的jsx-loader變?yōu)閎abel-loader：

module: {
  loaders: [
    { test: /.jsx?$/, loaders: ["babel-loader"]}
  ]
}

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

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

相關(guān)文章

  • 用eslint + prettier + pre-commit管理項(xiàng)目(React)

    摘要：前言人是很懶惰的，你剛開(kāi)始建立的一個(gè)規(guī)規(guī)整整的項(xiàng)目，可能一段時(shí)間過(guò)后，就回被你無(wú)數(shù)次的提交代碼弄得凌亂不堪。 前言 人是很懶惰的，你剛開(kāi)始建立的一個(gè)規(guī)規(guī)整整的項(xiàng)目，可能一段時(shí)間過(guò)后，就回被你無(wú)數(shù)次的提交代碼弄得凌亂不堪。就算你能保證你的編碼風(fēng)格嚴(yán)謹(jǐn)統(tǒng)一，別人又該如何，每個(gè)人都有不一樣的編碼風(fēng)格，要保持統(tǒng)一，就要對(duì)項(xiàng)目進(jìn)行適當(dāng)?shù)墓芾?正文 接下來(lái)介紹個(gè)React項(xiàng)目簡(jiǎn)單管理的一個(gè)實(shí)踐： ...

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

  • React VR 快速入門完全教程

    摘要：快速入門什么是是一個(gè)開(kāi)放源代碼的庫(kù)，為呈現(xiàn)的數(shù)據(jù)提供了視圖渲染。最后，項(xiàng)目根組件應(yīng)該通過(guò)來(lái)進(jìn)行注冊(cè)，以便能夠進(jìn)行打包和正常運(yùn)行?；舅枷胧卿秩疽粋€(gè)立方體，并將觀眾置于中心，隨后移動(dòng)。表示從指定方向平均照亮所有物體的光源。 React VR 快速入門 什么是React React是一個(gè)開(kāi)放源代碼的JavaScript庫(kù)，為HTML呈現(xiàn)的數(shù)據(jù)提供了視圖渲染。React視圖通常使用指定的像H...

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

  • Webpack 和 React 實(shí)戰(zhàn)

    摘要：首先安裝然后在的里面加入和兩個(gè)命令在建立一個(gè)服務(wù)器為你的代碼創(chuàng)建源地址。更新使用語(yǔ)法編寫(xiě)修改加載器的配置方法將添加文件改為在中配置加載器的配置方法接下來(lái)需要配置，告訴我們使用了和插件。 TL;DR $ git clone https://github.com/nodejh/start-react-with-webpack react-sample $ cd react-sample &...

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

  • 使用webpack和babel搭建react開(kāi)發(fā)環(huán)境

    摘要：譯文原文來(lái)自寫(xiě)在前面使用已經(jīng)蠻長(zhǎng)一段時(shí)間但是在新項(xiàng)目開(kāi)始之際都是東拼西湊其他項(xiàng)目的配置來(lái)使用如果要自己從零開(kāi)始寫(xiě)一個(gè)完整項(xiàng)目的配置估計(jì)得費(fèi)死勁所以在發(fā)布版本之際正是時(shí)候來(lái)認(rèn)真從零開(kāi)始學(xué)習(xí)了是一個(gè)出自的庫(kù)用于構(gòu)建用戶交互界面是一個(gè)非常厲害的有 譯文,原文來(lái)自https://scotch.io/tutorials/s...寫(xiě)在前面,使用webpack已經(jīng)蠻長(zhǎng)一段時(shí)間,但是在新項(xiàng)目開(kāi)始之際,...

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

  • Webpack系列——手把手教你使用Webpack搭建簡(jiǎn)易的React開(kāi)發(fā)環(huán)境

    摘要：在這篇文章中我們開(kāi)始利用我們之前所學(xué)搭建一個(gè)簡(jiǎn)易的開(kāi)發(fā)環(huán)境，用以鞏固我們之前學(xué)習(xí)的知識(shí)。 文章首發(fā)于我的github及個(gè)人博客，github請(qǐng)看https://github.com/huruji/blo...，轉(zhuǎn)載請(qǐng)注明出處。 在這篇文章中我們開(kāi)始利用我們之前所學(xué)搭建一個(gè)簡(jiǎn)易的React開(kāi)發(fā)環(huán)境，用以鞏固我們之前學(xué)習(xí)的Webpack知識(shí)。首先我們需要明確這次開(kāi)發(fā)環(huán)境需要達(dá)到的效果：1、...

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

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

0條評(píng)論

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