【Day10】会襄在DOM上面的Ref (•ิ_•ิ)?

Ref 其实就是 Reference(参考)的意思，也就是传值和传址里面的址 (参考位址)

我们的Ref 是会襄在DOM上面的，目的是可以拿取、参照DOM相对应的React元素!

但因为父类别和子类别沟通的方式通常都是用Props和States，比较不建议用Ref，
因为这可能会破坏Component的封装。

小菜鸟通常会在用focus的时候或是要在某个特定元素下动态加入元素的时候才会去透过Ref来取得DOM的位置。
不然都会尽量用Props和States去实现React。

建立React Ref

• 透过React下的createRef function 去建立Ref

      constructor(props){
          super(props);
  
          this.quantityInput=React.createRef();
  
  
      }
  

• 建立玩Ref後，要绑定在html元素上

   						<input type="number" 
                             	   ref={this.quantityInput}
                            />
  

• 我们可以透过Ref里的current来拿使用ref system的元素

  const quantityInput=this.quantityInput.current;
  

• 取得使用ref 元素的值

  const quantityInput=this.quantityInput.current;
  let quantityValue=quantityInput.value;
  

• 取得ref 元素下的其他元素 (获取元素後，可以对其作html dom的操作，例如focus,给予style等等...)

   this.quantityInput.current.querySelector('这里放DOM子元素或父元素(自己想要找的元素阶层)')
  

以上是Ref的建立和应用的基础，但除了小菜鸟说的那两种情况，基本上还是不建议使用Ref啦~

下一篇我们会来粗略谈一下Test方法，
还有我们要写测试用的框架(Jest)及工具(Enzyme)，
希望前十篇的React基础小菜鸟有讲的详细，

好啦真的要来开始我们的测试了~加油啊!!! ٩(ˊᗜˋ )و 我们已经过了三分之一了~