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

資訊專欄INFORMATION COLUMN

React入門學(xué)習(xí)

laznrbfe / 2654人閱讀

摘要：對象的屬性與組件的屬性一一對應(yīng)，但是有一個(gè)例外，就是屬性，它表示組件的所有子節(jié)點(diǎn)。此外，還提供兩種特殊狀態(tài)的處理函數(shù)。組件中樣式的寫法這種方式錯(cuò)誤使用這種方式，第一重大括號(hào)表示這是語法，第二重大括號(hào)表示樣式對象。

如何渲染到容器

直接上代碼：

    //第一個(gè)參數(shù)是構(gòu)造的組件，第二個(gè)參數(shù)是使用組件的容器
    ReactDom.render( , document.getElementByID(""));

render渲染頁面 將組件放到選定的元素里面

如何定義組件

使用React.createClass({render:function(){return ( 我是dom元素 )}})構(gòu)建

    var ProfilePic = React.createClass({
          render: function() {
            //可以在return前進(jìn)行相關(guān)處理
            return (
                   
            );
        }
    });

1.return()括號(hào)中只能填寫一個(gè)標(biāo)簽，否則報(bào)錯(cuò)
2.this.props是ReactDOM.render中傳遞的屬性，是一個(gè)對象 對于組件套組件的方式可以傳遞屬性值，如下面例子

組件套組件 
    // 渲染到容器
    ReactDOM.render(
        ,
         document.getElementById("example")
    );
    
    var Avatar = React.createClass({
          render: function() {
            return (
                  

                 //this.props包含了name和link的屬性，同時(shí)在ProfilePic組件中可以使用this.props獲取link的值
                    
                  

            );
          }
    });
如何設(shè)置某個(gè)變量的初始值

使用getInitialState:function(){return {}}聲明初始化變量，使用this.setState({鍵值對})修改getInitialState函數(shù)中的變量，通過this.state對象獲取屬性的值，代碼如下：

    var ClickApp = React.createClass({
    getInitialState:function(){
        return {
            clickCount: 0,                
        }
    },
    handleClick: function(e){
        this.setState({
            clickCount: this.state.clickCount + 1,
        });
    },
    render: function(){
        return (
            

                
點(diǎn)擊下面按鈕

                
                
你一共點(diǎn)擊了：{this.state.clickCount}

            

        )
    }
    });

getInitialState在組件的生命周期內(nèi)只會(huì)運(yùn)行一次，用來設(shè)置組件的初始狀態(tài)。

this.props.children

this.props 對象的屬性與組件的屬性一一對應(yīng)，但是有一個(gè)例外，就是 this.props.children 屬性，它表示組件的所有子節(jié)點(diǎn)。
this.props.children的值有三種可能：如果當(dāng)前組件沒有子節(jié)點(diǎn)，它就是 undefined ;如果有一個(gè)子節(jié)點(diǎn)，數(shù)據(jù)類型是 object；如果有多個(gè)子節(jié)點(diǎn)，數(shù)據(jù)類型就是 array。React 提供一個(gè)工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節(jié)點(diǎn)，而不用擔(dān)心 this.props.children 的數(shù)據(jù)類型是 undefined 還是 object

PropTypes

驗(yàn)證組件提供的參數(shù)是否滿足要求。如 propTypes: { title: React.PropTypes.string.isRequired },render:function(){return} 代碼的作用就是說明title是必須填寫的而且為字符串。 使用 getDefaultProps來配置默認(rèn)的字符串 getDefaultProps : function () { return { title : "Hello World"};},

組件的生命周期

生命周期分為三個(gè)狀態(tài)：

Mounting：已插入真實(shí) DOM

Updating：正在被重新渲染

Unmounting：已移出真實(shí) DOM
React 為每個(gè)狀態(tài)都提供了兩種處理函數(shù)，will 函數(shù)在進(jìn)入狀態(tài)之前調(diào)用，did 函數(shù)在進(jìn)入狀態(tài)之后調(diào)用，三種狀態(tài)共計(jì)五種處理函數(shù)。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 還提供兩種特殊狀態(tài)的處理函數(shù)。

componentWillReceiveProps(object nextProps)：已加載組件收到新的參數(shù)時(shí)調(diào)用

shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否重新渲染時(shí)調(diào)用

JSX轉(zhuǎn)化器

1.內(nèi)嵌的jsx代碼，需要在script標(biāo)簽中要加上type="text/babel"，并引入browser.min.js5.8.24文件，或者使用bower install babel --save-dev下載babel文件中獲取，將ES6轉(zhuǎn)化為ES5
2.[已廢棄]使用react-tools模塊，將代碼轉(zhuǎn)化成線上代碼 使用npm install -g react-tools安裝，使用jsx --watch src/ build/轉(zhuǎn)化
3.可以直接使用babel轉(zhuǎn)化，babel --presets react [es2015] src --watch --out-dir build，其中[es2015]是選填項(xiàng)，src是源文件路徑 build是編譯后的文件路徑
4.在gulp中使用gulp-react轉(zhuǎn)化

Html轉(zhuǎn)義

對于某些富文本內(nèi)容，在頁面上顯示

    var content="content";
    React.render(
        
{content}
,
        document.body
    );
    
    //會(huì)直接顯示 content 相當(dāng)于ejs中<%= %>

Html默認(rèn)會(huì)對Html文章轉(zhuǎn)義，如何不轉(zhuǎn)義

    var content="content";    
    React.render(
        
,
        document.body
    );
CDN文件

1.react
react 包括 React.createElement、 React.createClass、React.Component、 React.PropTypes、 React.Children
react-dom 包括 ReactDOM.render、 .unmountComponentAtNode、 .findDOMNode
react-dom-server 包括.renderToString 和 .renderToStaticMarkup
react-with-addons

HTML 標(biāo)簽 vs. React 組件

React.render方法可以渲染HTML結(jié)構(gòu)，也可以渲染React組件。JSX使用首字母大小寫來區(qū)分是本地組件類還是Html標(biāo)簽。
(1)渲染HTML標(biāo)簽，聲明變量采用首字母小寫

    var myDivElement = 
;
    React.render(myDivElement, document.body);

(2)渲染React組件，聲明變量采用首字母大寫

    var MyComponent = React.createClass({/*...*/});
    var myElement = ;
    React.render(myElement, document.body);
Small Tips

1.數(shù)據(jù)的傳遞都是需要至于{}之中，包括賦值

,{}中的變量都是可以通過ReactDom.render時(shí)傳入
2.使用default為前綴，加上Checked,Value等設(shè)置默認(rèn)值，如defaultChecked,defaultValue等，在組件中使用已有的屬性。
3.this.refs引用對象集合，在Dom元素上添加了ref屬性后，就會(huì)將這個(gè)Dom元素添加到this.refs之中，在頁面中這個(gè)標(biāo)簽的值是唯一的，this.refs.xxxx.value這種方式可以獲取變量的值，ref是一種回調(diào)的原理，當(dāng)子組件的該屬性值改變，相應(yīng)的值會(huì)回調(diào)給父組件
4.在組件實(shí)現(xiàn)時(shí)，return(
{ }
)中的{}可以加入大量的javascript處理函數(shù)，如下：

    return (
      
    
        {
          this.props.list.map(function (child) {
            return 
  • {child}
    •  //注意這種寫法，
  • {child}
    • 
          })
        }
      

    );

5.組件可以直接當(dāng)做Dom標(biāo)簽一樣使用，像button,h1等
6.與Javascript DOM中一樣的寫法，class對于className,html對應(yīng)于htmlFor；另外，對于非html內(nèi)置的屬性，一定要加上data-，如


`
7.JSX 的基本語法規(guī)則

遇到 HTML 標(biāo)簽（以 < 開頭），就用 HTML 規(guī)則解析；

遇到代碼塊（以 { 開頭），就用 JavaScript 規(guī)則解析

8.this.props 和 this.state不同點(diǎn)
由于 this.props 和 this.state 都用于描述組件的特性，可能會(huì)產(chǎn)生混淆。一個(gè)簡單的區(qū)分方法是,this.props表示那些一旦定義，就不再改變的特性，而 this.state 是會(huì)隨著用戶互動(dòng)而產(chǎn)生變化的特性。
9.組件中樣式的寫法：style="opacity:{this.state.opacity};"這種方式錯(cuò)誤；使用 style={{opacity: this.state.opacity}}這種方式，第一重大括號(hào)表示這是 JavaScript 語法，第二重大括號(hào)表示樣式對象。
10.在componentDidMount中的設(shè)置請求返回的數(shù)據(jù)需要特別注意只有當(dāng)數(shù)據(jù)返回回來才有效，通過 this.isMounted() 判讀，或者直接使用promise的then方法.查看示例12

參考文檔

1.阮一峰老師的[react-demos](https://github.com/ruanyf/react-demos)

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

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

相關(guān)文章

  • React 入門學(xué)習(xí)筆記整理目錄

    摘要：入門學(xué)習(xí)筆記整理一搭建環(huán)境入門學(xué)習(xí)筆記整理二簡介與語法入門學(xué)習(xí)筆記整理三組件入門學(xué)習(xí)筆記整理四事件入門學(xué)習(xí)筆記整理五入門學(xué)習(xí)筆記整理六組件通信入門學(xué)習(xí)筆記整理七生命周期入門學(xué)習(xí)筆記整理八入門學(xué)習(xí)筆記整理九路由React 入門學(xué)習(xí)筆記整理（一）——搭建環(huán)境 React 入門學(xué)習(xí)筆記整理（二）—— JSX簡介與語法 React 入門學(xué)習(xí)筆記整理（三）—— 組件 React 入門學(xué)習(xí)筆記整理（...

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

  • React 可視化開發(fā)工具 Shadow Widget 非正經(jīng)入門（之一：React 三宗罪）

    摘要：前言非正經(jīng)入門是相對正經(jīng)入門而言的。不過不要緊，正式學(xué)習(xí)仍需回到正經(jīng)入門的方式?？焖偃腴T建議先學(xué)會(huì)用拼文寫文檔注冊一個(gè)賬號(hào)，把庫到自己名下，然后用這個(gè)庫寫自己的博客，參見這份介紹。會(huì)用拼文寫文章，相當(dāng)于開發(fā)已入門三分之一了。 本系列博文從 Shadow Widget 作者的視角，解釋該框架的設(shè)計(jì)要點(diǎn)，既作為用戶手冊的補(bǔ)充，也從更本質(zhì)角度幫助大家理解 Shadow Widget 為什么這...

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

  • 前端學(xué)習(xí)資源整理

    稍微整理了一下自己平時(shí)看到的前端學(xué)習(xí)資源，分享給大家。 html MDN：Mozilla開發(fā)者網(wǎng)絡(luò) SEO：前端開發(fā)中的SEO css 張鑫旭：張鑫旭的博客 css精靈圖：css精靈圖實(shí)踐 柵格系統(tǒng)：詳解CSS中的柵格系統(tǒng) 媒體查詢：css媒體查詢用法 rem布局：手機(jī)端頁面自適應(yīng)布局 移動(dòng)前端開發(fā)之viewport的深入理解:深入理解viewport 淘寶前端布局：手機(jī)淘寶移動(dòng)端布局 fl...

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

  • react入門學(xué)習(xí)筆記（一）

    摘要：選擇的主要原因大概是因?yàn)樵摽蚣艹霈F(xiàn)較早，感覺上會(huì)相對成熟，日后學(xué)習(xí)中遇到問題想要查找答案相對簡單一些，對，就是這么簡單。多說無益，接下來開始的學(xué)習(xí)，我按照我學(xué)習(xí)中帶著的問題來一一解答，完成我的入門筆記。主要是針對前端的組件化開發(fā)。 這兩天得空，特意來折騰了以下時(shí)下火熱的前端框架react，至于為什么選react,作為一個(gè)初學(xué)者react和vue在技術(shù)上的優(yōu)劣我無權(quán)評(píng)論，也就不妄加評(píng)論了...

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

  • 前端學(xué)習(xí)資源

    摘要：提供了完整的環(huán)境，并且支持自定義域名指向，動(dòng)態(tài)計(jì)算資源調(diào)整，可以完成各種應(yīng)用的開發(fā)編譯與部署。 react 新特性 react16 Context 算法相關(guān) 圖解排序算法(二)之希爾排序 微信小程序 微信小程序組件化的解決方案移動(dòng)端尺寸基本知識(shí) 瀏覽器 前端必讀：瀏覽器內(nèi)部工作原理瀏覽器緩存原理解讀瀏覽器加載css和js及dom解析之間的關(guān)系瀏覽器緩存 CSS學(xué)習(xí) 移動(dòng)web開發(fā)布局入...

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

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

0條評(píng)論

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