React筆記（騰訊課堂-最受歡迎的react框架【愛前端】）（react基礎）

阿新 • • 發佈：2019-01-20

1.Hello World

index.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div id="app_wrap"></div>
	<script type="text/javascript" src="dist/all.js"></script>
</body>
</html>

main.js

import React from "react";
import {render} from "react-dom";
import App from "./App.js";
render(
    <App></App>,
    document.getElementById("app_wrap")
)

App.js

import React from "react";
class App extends React.Component{
    render() {
        return <h1>hello</h1>
    }
}
export default App;

2.函式、陣列、樣式

main.js

import React from "react";
import {render} from "react-dom";
import App from "./App.js";

//ES6形式定義元件的呼叫
render(
    <App date={new Date()}></App>,
    document.getElementById("app_wrap")
);

App.js

import React from "react";
//ES6形式定義元件
class App extends React.Component{
    //類中定義的函式
    haha(lanmu) {
        if(lanmu="籃球") {
            return (
                <ul>
                    <li>喬丹</li>
                    <li>科比</li>
                    <li>沃爾</li>
                </ul>
            );
        } else if(lanmu="足球") {
            return (
                <ul>
                    <li>djfh</li>
                    <li>dsfs</li>
                    <li>fhyg</li>
                </ul>
            );
        }
    };

    render() {
        //render中定義的函式
        let xixi = () => {
            return(
                <div>
                    <h1>我是render中定義的函式:1+1={1+1}</h1>
                </div>
            );
        }
        //設定樣式:方法二
        let mystyle = {
            "width":"600px",
            "height":20+200+"px",
            "backgroundColor":"gray",
            "margin":"10px auto"
        }
        //陣列:要求有key屬性，屬性值不能重複
        let domarr = [
            <h3 key="1">陣列元素1</h3>,
            <h3 key="2">陣列元素2</h3>,
            <h3 key="3">陣列元素3</h3>
        ];

        let arr = ["白板","妖姬","二手"].map((item,index)=>{
            return <li key={index}>{item}</li>
        });

        return (
            <div>
                <h1>hello</h1>
                <h2>北京時間：{this.props.date.toLocaleDateString()}</h2>

                {/*呼叫類中的函式:加this*/}
                {this.haha("籃球")}

                {/*呼叫render中的函式*/}
                {xixi()}

                {/*設定樣式:方法一*/}
                <div style={{"width":"400px","height":20+200+"px","backgroundColor":"yellow","margin":"10px auto"}}></div>

                {/*設定樣式:方法二*/}
                <div style={mystyle}></div>

                {/*react陣列（含有DOM）自動展開*/}
                <div>{domarr}</div>
                <div>{arr}</div>
    
            </div>
        );
    }
} 
export default App;

3.react的資料傳遞：state:自治的不涉及傳值，props:父元件資料傳遞給子元件，context：祖先元件資料傳遞給後代元件

只有這三兄弟才會引發virtual DOM 的改變，從而改變DOM.

A.state：改變內部的值

show.js

import React from "react";
import {render} from "react-dom";
//連線State.js(狀態)
import State from "./State.js";
render(
    <State />,
    document.getElementById("state")
)

state.js

import React from "react";
class State extends React.Component{
    //建構函式:初始化狀態
    constructor() {
        super();//要求呼叫super
        this.state = {//定義state
            a:100
        }
    }

    add() {
        this.setState({//改變state。改變a的值，只能用this.setState
            a: this.state.a + 1 //不能寫成++
        })
    }

    render() {
        return (
            <div>
                <p>{this.state.a}{/* 使用state */}</p>
                <p><input type="button" value="點選" onClick={(this.add).bind(this)} /></p>
            </div>
        )
    }
}

export default State;

B.props:父元件給子元件傳遞資料

安裝prop-types:cnpm install --save-dev prop-types

show.js

import React from "react";
import {render} from "react-dom";

//連線Props.js（父元件資料傳遞給子元件）import Props from "./Props.js";
render( 
    <Props />, 
    document.getElementById("props")
)

props.js

import React from "react";
import Props2 from "./Props2.js";
class Props extends React.Component{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <Props2 name="旺旺" num={88} />
            </div>
        );
    }
}

export default Props;

props2.js

import React from "react";
//引入PropTypes驗證props的有效性
import {PropTypes} from "prop-types";

class Props2 extends React.Component{
    constructor(param) {
        super();
        // alert(param.name);//建構函式中的引數param.name傳入的是this.props.name

        this.state = {
            num:param.num //將param.name的值傳給this.state.name,所以最終是將this.props.name值傳給this.state.name
        }
    }

    render() {
        return (
            <div>
                <h1>複合元件：我是{this.props.name}</h1>{/* this.props是固定的，呼叫時屬性為name，打印出name的屬性值 */}
                {/* props只能列印不能更改，資料是單向的 */}
                {/* state能改變資料 */}
                
                <h1>this.props.num為：{this.props.num}</h1>
                <h1>this.state.num為：{this.state.num}</h1>{/* 呼叫this.state.num，值與上方相同 */}
                
                <input type="button" value="num+1" onClick={()=>{this.setState({num:this.state.num + 1})}}/>
                {/* 點選後this.state.num改變，this.props.num不變 */}
            </div>
        );
    }
}

//元件傳入的引數驗證:當呼叫時沒傳入或傳錯型別name和num值時報錯
//類名.propTypes
Props2.propTypes = {
    name:PropTypes.string.isRequired,
    num:PropTypes.number.isRequired
}


export default Props2;

C.子元件改變父元件的資料:

用奇淫技巧：父元件設定setState函式傳遞給子元件，子元件呼叫該函式並改變其值，使得父元件改變state從而改變資料

show.js

//連線PropsReverse.js 子元件改變父元件資料（後期用redux代替）
import PropsReverse from "./PropsReverse.js";
render(
    <PropsReverse />,
    document.getElementById("propsReverse")
)

PropsReverse.js

//子元件改變父元件資料（後期用redux代替）
import React from "react";
import PropsReverse2 from "./PropsReverse2.js";

class PropsReverse extends React.Component{
    constructor() {
        super();
        this.state={
            a:1
        }
    }

    setA(number) {
        this.setState({'a':number});
    }
    
    render() {
        return (
            <div>
                <h1>我是PropsReverse父元件，我有一個a狀態：{this.state.a}</h1>
                <PropsReverse2 setA={(this.setA).bind(this)} a={this.state.a} />
            </div>
        );
    }
}
export default PropsReverse;

PropsReverse2.js

import React from "react";

class PropsReverse2 extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <p>子元件收到父元件資料：{this.props.a}</p>
                <input type="button" value="子更改父資料" onClick={()=>{this.props.setA(this.props.a+1)}} />
            </div>
        );
    }
}

export default PropsReverse2;

D.context:可跨級傳遞資料，祖先的資料可傳遞給後代

改變爺爺資料值時，孫子接受爺爺的資料值也跟著改變

show.js

import React from "react";
import {render} from "react-dom";

//連線Yeye.js
import Yeye from "./Yeye.js";
render(
    <Yeye />,
    document.getElementById("yeye")
)

Yeye.js

import React from "react";
import Baba from "./Baba.js";
import {PropTypes} from "prop-types";

class Yeye extends React.Component{
    constructor() {
        super();
        this.state = {
            a:10
        }
    }

    addA() {
        this.setState({
            a: this.state.a+1
        })
    }

    render() {
        return (
            <div>
                <h1>我是爺爺{this.state.a}</h1>
                <input type="button" value="改變爺爺資料值" onClick={(this.addA).bind(this)} />
                {/* 改變爺爺資料值時，孫子接受爺爺的資料值也跟著改變 */}
                <Baba /> 
            </div>
        );
    }

    //獲取家族共享的資料，並設定其值
    getChildContext() {
        return {
            a:this.state.a
        }
    }
}
//家族共享資料的型別和要求
Yeye.childContextTypes = {
    a:PropTypes.number.isRequired
}

export default Yeye;

Baba.js

import React from "react";
import Sunzi from "./Sunzi.js";

//引入PropTypes驗證props的有效性
// import {PropTypes} from "prop-types";

class Baba extends React.Component{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <h1>我是爸爸</h1>
                <Sunzi />
            </div>
        );
    }
}


export default Baba;

Sunzi.js

import React from "react";
import {PropTypes} from "prop-types";


class Sunzi extends React.Component{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <h1>我是孫子</h1>
                <p>通過context取得爺爺是資料：{this.context.a}</p>
            </div>
        );
    }
}
//獲取家族共享資料      
Sunzi.contextTypes = {
    a:PropTypes.number
}
export default Sunzi;

E.context:後代元件改變祖先元件資料：也是用奇淫技巧：共享祖先包含setState函式，後代元件呼叫該函式改值

Yeye.js

import React from "react";
import Baba from "./Baba.js";
import {PropTypes} from "prop-types";

class Yeye extends React.Component{
    constructor() {
        super();
        this.state = {
            a:10
        }
    }

    
    addA() {
        this.setState({
            a: this.state.a+1
        })
    }

    render() {
        return (
            <div>
                <h1>我是爺爺{this.state.a}</h1>
                <input type="button" value="改變爺爺資料值" onClick={(this.addA).bind(this)} />
                {/* addA自己使用，改變爺爺資料值時，孫子接受爺爺的資料值也跟著改變 */}
                <Baba /> 
            </div>
        );
    }

    //獲取家族共享的資料，並設定其值
    getChildContext() {
        return {
            a:this.state.a,
            addA:(this.addA).bind(this) //將addA共享給後代
        }
    }
}
//家族共享資料的型別和要求
Yeye.childContextTypes = {
    a:PropTypes.number.isRequired,
    addA:PropTypes.func.isRequired
}

export default Yeye;

Sunzi.js

import React from "react";
import {PropTypes} from "prop-types";


class Sunzi extends React.Component{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <h1>我是孫子</h1>
                <p>通過context取得爺爺是資料：{this.context.a}</p>
                <input type="button" value="改變家族資料的值" onClick={this.context.addA} />
            </div>
        );
    }
}
//獲取家族共享資料                                                                                                                                                                                 
Sunzi.contextTypes = {
    a:PropTypes.number,
    addA:PropTypes.func
}
export default Sunzi;

4.實時表單輸出

Realoutput.js

import React from "react";
class Realoutput extends React.Component{
    constructor(props) {
        super();
        this.state = {
            txt:"hello"
        }
    }

    change(event) {
        this.setState({
            txt:event.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" onInput={(this.change).bind(this)} />
                <p>{this.state.txt}</p>
            </div>
        );
    }
}
export default Realoutput;

5.ref:DOM鉤子

Ref.js

//ref:DOM鉤子
import React from "react";
class Ref extends React.Component{
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <input type="button" value="盒子變色" onClick={()=>this.refs.mybox.style.backgroundColor="yellow"} />
                <div className="box" ref="mybox" style={{"width":200,"height":200,"backgroundColor":"red"}}></div>
            </div> 
        );
    }
}
export default Ref;

React筆記（騰訊課堂-最受歡迎的react框架【愛前端】）（react基礎）

1.Hello Worldindex.html<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id

騰訊課堂的物理實驗（2017計蒜客初賽第三場）

text ram amp tex 方向 top names rip des A題在騰訊課堂的物理課上，進行了一個有趣的物理實驗。在一個長度為 LL 米的光滑軌道上，小車 A 在 00 時刻以 1\mathrm{m/s}1m/s 的速度從左端出發向右運動，小車 B 在

JavaSE環境下的shiro（源自騰訊課堂）

height 授權 http 輸出日誌 14. mage src 下載 ssi Shiro作用：認證（登錄）、授權（鑒權）、加密（用戶名/密碼加密）、會話管理（session）、Web集成、緩存 apache官網可以下載　　圖一　　圖二

課外書讀書筆記——自控力（斯坦福大學最受歡迎的心理學課程）

遭遇自己的任務決定環境理學 col 解壓滿足感 01我要做，我不要，我想要：什麽是意誌力？為什麽意誌力？為什麽意誌力至關重要？核心思想：　　意誌力實際上是“我要做”、“我不要”和“我想要&rdq

什麼是大資料，盤點國內最大使用者（騰訊、阿里巴巴、百度、京東）資料公司分析

先講兩個大家都熟悉的場景，到大型購物網站購買一個商品A，網站會自動給你推送A1，A2，A3，A4，A5這些價格不同、顏色差異，風格差異，品格迥異的同類型的商品出來，這就是人工智慧推送技術應用；網路上叫快遞取件，有的網站已經是機器人客服來回答你常見的問題，如果你不滿意的情況下，才會讓你輸入”人工“，轉

騰訊課堂1：使用Jmeter內置的錄制功能進行錄制

bsp family logs -1 figure mil 宋體報錯 conf 1、設置http代理服務器打開火狐——點擊選項——高級——網絡——設置設置完成點擊確定 2、查看端口是否被占用的命令 netstat -ano 3、排除模式 .*\.gif .*

騰訊課堂老師qq號碼轉換成 teacherid

col style eache log pre code spa 轉換轉換成 result = 215696775^858006833 if(result<0){ result=4294967296+result; } alert(result); 騰訊課堂老師

禪修筆記——矽谷最受歡迎的情商課

說過 cap 我會穩定兩種有時 jpg 引導超越禪修筆記——矽谷最受歡迎的情商課作者寧秋風關註 2016.01.25 21:48* 字數 4921 閱讀 1008評論 7喜歡 23 Search Inside Yourself 如何發展情商？

1、百度知道和知乎的區別（騰訊-2014）

用戶更多優先差異階層產品分析似的美團百度搜索 1、題目分析考查點：競品分析、產品分析 2、背景知識用戶體驗五要素：1）戰略層：產品開發者、用戶分別想從產品中獲得什麽 2）範圍層：產品需要具備怎樣的功能，優先級如何 3）結構層：用戶操作產品的路徑是怎樣的，

15個最受歡迎的Python開源框架（轉）

beta greenlet rest架構進行 blank pack jin rom lsa 原文地址：http://blog.jobbole.com/72306/ Django: Python Web應用開發框架 Django 應該是最出名的Python框架，GAE甚

MYSQL高可用解決方案：PHXSQL（騰訊微信）編譯實錄

mysql phxsql [root@king01 ~]# rpm -ivh epel-release-6-8.noarch.rpm[root@king01 ~]# yum install -y automake zlib autoconf cmake gcc libtool ncurses ncur

微信小程序 - 輸入起點、終點獲取距離並且進行路線規劃（騰訊地圖）

img -c con XML family maps option space com index.wxml  <map id="myMap" style="width: 100%; height: 300px;"

centos7搭建postfix郵件伺服器（騰訊雲）

用騰訊雲的先去開啟25埠，在控制檯頁面使用者名稱下面，，，我被坑了好久，，，，在使用qq等郵件伺服器廠商提供的郵件服務後，發現他們的郵件傳送數量是有限制的，隨著公司的業務的需求下，我們需要搭建一個郵件伺服器，郵件伺服器可以幫助我們在一些提醒方面和訊息推送方面起到幫助。

2018·JS“年鑑”：ES6鋒芒依舊，React和Express成為前、後端最受歡迎框架

2018年JavaScript現狀調查報告出來啦！ JavaScript可以說是世界上最流行的指令碼語言之一了，它是一種執行在瀏覽器中的解釋型的程式語言。在我們的電腦、手機、平板上瀏覽的所有的網頁，以及無數基於HTML5的手機App中，互動邏輯都是由JavaScript驅動的。在這樣的趨勢

人工智慧 - 人臉合成（騰訊AI開放平臺）

如果是從事微信開發的同事我想以前應該見過火爆朋友圈的軍裝照這個小程式吧，感覺將自己的人臉P無縫P上去感覺高大上。那麼這個是怎麼實現的呢？我也不曉得具體怎麼實現的，我只需要知道我能通過第三方平臺實現這個功能就行了。在此，感謝各位前輩先驅們將相應的技術介面公開免費給我們使用，正因

爬取騰訊課堂的課程評論

最近想了解一下線上教育的課程的如何去選擇，課程的質量如何？所以試著去爬了一下騰訊課堂，只爬了IT網際網路這一項。通過分析發現要想爬取到評論需要是個步驟：解析學習方向，如下圖所示：通過開發者工具審查元素，發現標籤在<dl class="sort-me

即時通訊（騰訊）流程

1.controller層 // 拼接使用者id String imId = String.format("u_%s",finalUser.getId()); // 獲取騰訊雲使用者資訊 Map imUser

再獲殊榮！起點學院榮膺騰訊課堂《創造101》“火箭機構”獎！

9月12日，起點學院受邀參加騰訊課堂舉辦的“IT網際網路線上教育機構交流大會”，此次閉門會議僅有騰訊課堂101家機構受邀參加。起點學院創始人曹成明先生參與“極致課程服務-線上教育怎樣提供優質的服務體驗”的圓桌研討，就多年對於教育的思考和實踐與現場教育同仁共同探討，以尋

騰訊課堂視訊下載工具批量下載

騰訊課堂視訊下載工具最新版本：3.6 版本號：3.6.180905 檔案大小：16.56M 系統支援：Win7/Win8/win10 簡介：自動分析騰訊課堂視訊（一套視訊），提供下載功能，分片視訊合成功能。可以線上下載騰訊課堂高清視訊 1、程式下載支援性：

iOS逆向之動態分析（騰訊視訊廣告移除）非會員

前言： iOS逆向分析之動態分析，我開始思考怎樣把原理講的深入淺出，怎樣把故事講的有趣生動，於是本來寫好的動態分析又操了重來，那麼今天我準備帶著問題來講動態分析，先丟擲我們這次逆向的目標，騰訊視訊廣告移除，以此為例講解動態分析。首先我們進入視訊播放頁，點選最近的熱片《戰

React筆記（騰訊課堂-最受歡迎的react框架【愛前端】）（react基礎）

1.Hello World

2.函式、陣列、樣式

3.react的資料傳遞：state:自治的不涉及傳值，props:父元件資料傳遞給子元件，context：祖先元件資料傳遞給後代元件

A.state：改變內部的值

B.props:父元件給子元件傳遞資料

C.子元件改變父元件的資料:

用奇淫技巧：父元件設定setState函式傳遞給子元件，子元件呼叫該函式並改變其值，使得父元件改變state從而改變資料

D.context:可跨級傳遞資料，祖先的資料可傳遞給後代

E.context:後代元件改變祖先元件資料：也是用奇淫技巧：共享祖先包含setState函式，後代元件呼叫該函式改值

4.實時表單輸出

5.ref:DOM鉤子

相關推薦