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