React.creatElement 创立虚构dom

对于虚构DOM：

实质是Object类型的对象 (个别对象）虚构DOM比拟轻   实在DOM比拟重   因为虚构DOM是React外部应用   无需实在DOM上那么多属性虚构DOM最终会被React转化为实在DOM   出现在页面上

jsx的语法规定

1.定义虚构Dom时不要写引号2 标签中混入js表达式时用{}3 款式的类名指定不要用class  要用className4 内联款式  要用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'))