React入門學習

laznrbfe 發布于2019-08-19 17:34 / 2649人閱讀

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

如何渲染到容器

直接上代碼：

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

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

如何定義組件

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

    var ProfilePic = React.createClass({
          render: function() {
            //可以在return前進行相關處理
            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函數中的變量，通過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在組件的生命周期內只會運行一次，用來設置組件的初始狀態。

this.props.children

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

PropTypes

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

組件的生命周期

生命周期分為三個狀態：

Mounting：已插入真實 DOM

Updating：正在被重新渲染

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

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 還提供兩種特殊狀態的處理函數。

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

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

JSX轉化器

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

Html轉義

對于某些富文本內容，在頁面上顯示

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

Html默認會對Html文章轉義，如何不轉義

    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結構，也可以渲染React組件。JSX使用首字母大小寫來區分是本地組件類還是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.數據的傳遞都是需要至于{}之中，包括賦值

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

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

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

`
7.JSX 的基本語法規則

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

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

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

參考文檔

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

GPU云服務器云服務器編程學習入門學習學習機器學習入門學習入門入門機器學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78639.html

React 入門學習筆記整理目錄

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

daryl 2019-04-23 11:57 評論0 收藏0
React 可視化開發工具 Shadow Widget 非正經入門（之一：React 三宗罪）

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

dongxiawu 2019-08-21 11:43 評論0 收藏0
前端學習資源整理

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

siberiawolf 2019-08-21 11:27 評論0 收藏0
react入門學習筆記（一）

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

leon 2019-08-20 18:01 評論0 收藏0
前端學習資源

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

zhisheng 2019-08-20 13:33 評論0 收藏0