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'))