浅入深知React

React.creatElement 创建虚拟dom

关于虚拟DOM：

本质是Object类型的对象 (一般对象）
虚拟DOM比较轻   真实DOM比较重   因为虚拟DOM是React内部使用   无需真实DOM上那么多属性
虚拟DOM最终会被React转化为真实DOM   呈现在页面上

jsx的语法规则

1.定义虚拟Dom时不要写引号
2 标签中混入js表达式时用{}
3 样式的类名指定不要用class  要用className
4 内联样式  要用style={{key:value}}的形式去写
4  只有一个根标签
6   标签必须闭合
7 标签首字母
       1 若小写字母开头  则将标签转为html  中的同名元素  ，若html中无该标签对应的同名元素  则报错。
        2 若大写字母开头  react  就去渲染对应的组件  若组件没有定义 则报错

js语句（代码）与js表达式

1  表达式:一个表达式会产生一个值   可以放在任何一个需要值的地方
    下面这些都是表达式：
       1 a
        2 a+b
        3 demo(1)
        4 arr.map()
        5 function test(){}
2 语句（代码）
   下面这些都是语句（代码）
    1  if(){}
    2  for(){}
   3  switch(){}

React中的ref

字符串的ref

回调形式的ref

 class GetValue extendsReact.Component{
        getValue = () =>{
           let {input1} = this
           console.log(input1.value);
           
        }
        changeHot= ()=>{
            let {isHot} = this.state
            this.setState({
                isHot:!isHot
            })
        }
        state = {
            isHot:false
        }
         refInput1=(c)=>{
            this.input1 = c
         }
          render(){
              console.log(this);
              let {isHot} = this.state
              return(
                  <div>
                  <h1>今天天气{isHot?'晴朗':'阴天'}</h1>
                  <button onClick={this.changeHot}>改变天气</button>
                     <input ref={this.refInput1} type="text"/>&nbsp;
                     <button onClick={this.getValue}>获取Input1的value</button>
                  </div>
              )
          }
      }
      ReactDOM.render(<GetValue/>,document.getElementById('test'))

createRef的ref

class GetValue extendsReact.Component{
          myRef = React.createRef() //React.createRef调用后返回一个容器，该容器返回可以存储被ref标识的节点。该容器是专人专用的
          myRef2 = React.createRef()
        getValue = () =>{
           console.log(this.myRef.current.value);
        }
        showData= ()=>{
          console.log(this.myRef2.current.value);
          
        }
          render(){
              return(
                  <div>
                     <input ref={this.myRef} type="text"/>&nbsp;
                     <input ref={this.myRef2} type="text" onBlur={this.showData}/>&nbsp;
                     <button onClick={this.getValue}>获取Input1的value</button>
                  </div>
              )
          }
      }
      ReactDOM.render(<GetValue/>,document.getElementById('test'))