关于react.js:浅入深知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'))