JavaScript之jsx&react

1.Virtual DOM

1.將網頁全部內容映射到一顆樹形結構的層級對象模型上，瀏覽器提供對dom的支持，用戶能夠是用腳本調用dom，api來動態修改dom節點，從而達到修改網頁目的，這種修改是瀏覽器完成的，瀏覽器會根據dom的改變從新繪製改變的dom節點部分
2.修改dom從新繪製渲染的代價過高，前端框架爲了提升效率，儘可能減小dom的重繪，提出了Virtual DOm，全部的修改都是在Virutal DOM上進行的，經過比較算法，找出瀏覽器dom之間的差異，使用這個差別操做dom，瀏覽器只須要渲染部分變化就能夠
react實現了dom diff算法能夠高效對比virtual DOM和dom差別

2.jsx語法

jsx是一種javascri和xml混寫的語法，是javascript的擴展
jsx規範
標籤中首字母小寫的就是html標記，首字母大寫就是組建
要求嚴格的html標記，全部標記必須閉合，br應該攜程<br />
單行省略小括號，多行請使用小括號
元素有多行，建以多行，注意縮進
jsx表達式：使用{}括起來，若是大括號使用了引號，會看成字符串處理

3.jsx state

import React from 'react';
import ReactDom  from 'react-dom'; //缺省必須放在{}外

class Toggle extends React.Component{
    state = {flag:true}
    handlerClick(event){
        console.log(event.target.id)
        console.log(event.target === this)
        console.log(this)
        console.log(this.state)
        this.setState({flag:!this.state.flag})//改變了state，並引發重繪；；點擊觸發了setstate，修改state變化了，致使render重繪
    }
    render(){
        return (<div id="t1" onClick={this.handlerClick.bind(this)}> 
        click this sentense </div>) //onclick返回的仍是函數，bind綁定返回函數，jsx中onClick要用小駝峯，使用括號表示
    }//jsx中return 多行要用括號
}

class Root extends React.Component {
    state = {
        p1:"python",
        p2:".com"
    }
    render(){
        this.state.p1 = "rocky"
        return (<div>welcome this.state.p1{this.state.p2}
        <br />
        <Toggle /> 
        </div>
        )//Toggle是組件由於首字母大寫，定義在別處
    }
}
ReactDom.render(<Root />,document.getElementById("root")) //root是dom樹，Root是react，jsx的組件，修飾tree

#註釋
state是私有屬性，組件外沒法直接訪問，props是公有屬性，組件外能夠訪問，只讀

 react中的事件

使用小駝峯名明
使用jsx表達式，表達式中指定的事件處理函數
不能return false，若是要阻止默認行爲，event.prevent.Default(); 鼠標放在標籤上顯示url，不想讓其跳轉

react props

import React from 'react';
import ReactDom  from 'react-dom'; //缺省必須放在{}外

class Toggle extends React.Component{
    state = {flag:true}
    handlerClick(event){
        this.setState({flag:!this.state.flag})//改變了state，並引發重繪；；點擊觸發了setstate，修改state變化了，致使render重繪
        //setState 同步調用
    }
    render(){
        return (<div id="t1" onClick={this.handlerClick.bind(this)}> 
        點擊這句話會觸發一個事件{this.state.flag.toString()}<br />
        {this.props.name}:{this.props.parent.state.p1+this.props.parent.state.p2}<hr />
        <br />
        {this.props.children}
    </div>) //onclick返回的仍是函數，bind綁定返回函數，jsx中onClick要用小駝峯，使用括號表示
    }//jsx中return 多行要用括號
}

class Root extends React.Component {
    state = {
        p1:"python",
        p2:".com"
    }
    render(){
        this.state.p1 = "rocky"
        return(
        <div>
        welcome {this.state.p1}{this.state.p2}<br />
        <Toggle name="school" parent={this} >
        <span>lslslslslslslsl</span><br />
        </Toggle>
        </div>)
        //Toggle是組件由於首字母大寫，定義在別處
    }
}
ReactDom.render(<Root />,document.getElementById("root")) //root是dom樹，Root是react，jsx的組件，修飾tree

 無狀態主鍵

無狀態組件，也叫函數式組件
開發時候不少狀況下，組件很簡單，不須要state狀態，也不須要使用函數生命週期，無狀態組件很好了知足了需求
無狀態組件函數提供了一個參數props，返回一個react元素
無狀態函數自己就是render函數

import React from 'react'
import ReactDom from 'react-dom'
import { rename } from 'fs';

function Root(props) {
    return <div>{prop.schoolname}</div>
}
//等同於上面的寫法
let Root = props=><div>{props.schoolname}</div>
ReactDom.render(<Root schoolname='mage>'/>,document.getElementById('root'))