1.将网页所有内容映射到一颗树形结构的层级对象模型上，浏览器提供对dom的支持，用户可以是用脚本调用dom，api来动态修改dom节点，从而达到修改网页目的，这种修改是浏览器完成的，浏览器会根据dom的改变重新绘制改变的dom节点部分

2.修改dom重新绘制渲染的代价太高，前端框架为了提高效率，尽量减少dom的重绘，提出了Virtual DOm，所有的修改都是在Virutal DOM上进行的，通过比较算法，找出浏览器dom之间的差别，使用这个差异操作dom，浏览器只需要渲染部分变化就可以

react实现了dom diff算法可以高效对比virtual DOM和dom差异

jsx是一种javascri和xml混写的语法，是javascript的扩展

jsx规范

标签中首字母小写的就是html标记，首字母大写就是组建

要求严格的html标记，所有标记必须闭合，br应该携程<br />

单行省略小括号，多行请使用小括号

元素有多行，建以多行，注意缩进

jsx表达式：使用{}括起来，如果大括号使用了引号，会当作字符串处理

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是公有属性，组件外可以访问，只读

使用小驼峰名明

使用jsx表达式，表达式中指定的事件处理函数

不能return false，如果要阻止默认行为，event.prevent.Default(); 鼠标放在标签上显示url，不想让其跳转

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