reactprops是不可变的，是静态的。 2.自定义的函数拿不到this指针，所以需要在构造函数内用bind改变指针。

使用react要引入三个文件，且要按顺序引入

<script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
  <script src="./browser.min.js"></script>

  <script type="text/babel">

1.render方法有两个参数第一个参数是要插入的内容，第二个参数是挂载的根元素（app），两个参数用，分隔开

2.必须有结束标签

<body>
    <div id="app">


    </div>
    <script src="./react.development.js"></script>
    <script src="./react-dom.development.js"></script>
    <script src="./browser.min.js"></script>
    <script type="text/babel">
    
        ReactDOM.render(
            <h1>hello</h1>,
            document.getElementById("app")
        )        
    </script>
</body>

组件的定义有两种方法：

1.class定义父组件的传值，通过props参数接收，使用的时候this.props.xxx

       class Com1 extends React.Component{
            render(){
                return(
                    <div>
                        <h1>{this.props.title}</h1>
                        <p>{this.props.name}</p>
                        {this.props.children}
                    </div>
                )
            }
        }
        ReactDOM.render(
            <Com1 name="xiaoming" title="ye">
                <input type="text"/>
            </Com1>,
            document.getElementById("app")
        )

2.函数定义组件名称的首字母大写，props参数是一个obj，取到父组件的传值

     const Welcome = ()=>{
         return <h1>qwertyh</h1>
     }
     const Com= (props) =>{
         return(
             <div>
                <h1>{props.name}</h1>
                <p>{props.age}</p>
             </div>
         )
     }
        ReactDOM.render(
            <Com name="aaa" age="1112222333">asdfghjk</Com>,
            document.getElementById("app")
        )

State：State是组件对象一个属性，用于改变组件的值

通常初始化： this.state.xxx=

修改时：this.setstate({

xxx=this.state.要修改的东西

})

state和props主要区别：

props是不可变的，是静态的。

state用于改变组件内容状态的值（动态的）

refs:组件内的标签都可以定义ref属性来标识自己

有两种方式：

1.这是官方推荐的方式

    <input type="text" ref={input=>this.myInput=input}/>

    <input type="text" onChange={this.change} ref="mpInput"/>

给组件绑定事件：

1.命名驼峰式

2.自定义的函数拿不到this指针，所以需要在构造函数内用bind改变指针。

  this.change=this.change.bind(this)

3.修改值应该用this.setstate({

xxx=this.state.要修改的东西

})

     class Com extends React.Component{
         constructor(params){
             super(params)
             this.state={
                 num:1,
                 name:"xiaoming"
             }
             this.add=this.add.bind(this)
         }
         add(){
             this.setState({
                 num:20
             })
             console.log(12345)
         }
         render(){
             return(
             <div>
                <h1>{this.state.num}</h1>
                <p>{this.state.name}</p>
                <button onClick={this.add.bind(this)}>click</button>
            </div>
             )
         }
     }

双向数据绑定：

        class Main extends React.Component{
        constructor(params){
            super(params)
            this.change=this.change.bind(this)
        }
        this.setState={
                    msg:""
        }
            change(event){
                this.setState(
                    {
                 msg:event.target.value
                    }
                )
                }
            }
            render(){
                return(
                    <div>
                        <input type="text" onChange={this.change} ref="mpInput"/>
                        <p>{this.state.msg}</p>
                    </div>
                )
            }
        }