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