亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React入門學習

laznrbfe / 2713人閱讀

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

如何渲染到容器

直接上代碼：

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

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

如何定義組件

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

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

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

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

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

            );
          }
    });
如何設置某個變量的初始值

使用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 (
            

                
點擊下面按鈕

                
                
你一共點擊了：{this.state.clickCount}

            

        )
    }
    });

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

this.props.children

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

PropTypes

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

組件的生命周期

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

Mounting：已插入真實 DOM

Updating：正在被重新渲染

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

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

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

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

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

JSX轉(zhuǎn)化器

1.內(nèi)嵌的jsx代碼，需要在script標簽中要加上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]是選填項，src是源文件路徑 build是編譯后的文件路徑
4.在gulp中使用gulp-react轉(zhuǎn)化

Html轉(zhuǎn)義

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

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

Html默認會對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 標簽 vs. React 組件

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

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

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

    );

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


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

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

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

8.this.props 和 this.state不同點
由于 this.props 和 this.state 都用于描述組件的特性，可能會產(chǎn)生混淆。一個簡單的區(qū)分方法是,this.props表示那些一旦定義，就不再改變的特性，而 this.state 是會隨著用戶互動而產(chǎn)生變化的特性。
9.組件中樣式的寫法：style="opacity:{this.state.opacity};"這種方式錯誤；使用 style={{opacity: this.state.opacity}}這種方式，第一重大括號表示這是 JavaScript 語法，第二重大括號表示樣式對象。
10.在componentDidMount中的設置請求返回的數(shù)據(jù)需要特別注意只有當數(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://www.ezyhdfw.cn/yun/78639.html

相關(guān)文章

  • React 入門學習筆記整理目錄

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

    daryl 評論0 收藏0

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

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

    dongxiawu 評論0 收藏0

  • 前端學習資源整理

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

    siberiawolf 評論0 收藏0

  • react入門學習筆記（一）

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

    leon 評論0 收藏0

  • 前端學習資源

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

    zhisheng 評論0 收藏0

發(fā)表評論

0條評論

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