'假的'必须必会之React学习笔记之四

前面记录了很多的基础的学习内容，当然这一篇也不例外。主要我只是为我自己的学习做下记录，到时候好好找好复习。转入正题，今天这一篇主要记录ref属性。

• REF属性

  • ref是reference的前三个字母，顾名思义就是引用的意思。有人可能会问ref引用的是什么？ref引用的是一个虚拟元素的真实DOM。

  • 四种用法：

  1、ref=字符串（已经将被废弃）

  class Calculater extends React.Component {
      add = () => {
          let O = this.refs.calcO.value;
          let T = this.refs.calcT.value;
          let R = O + T;
          this.refs.calcR.value = R;
      }
      render() {
          return (
              <div>
                  <input ref='calcO'/>
                  +
                  </input ref='calcT'>
                  <button onClick={this.add()}></button>
                  =
                  <input ref='calcR'/>
              </div>
          )
      }
  }
  

  2、ref=函数（不推荐）

  <!-- ref值是一个函数话，那么此函数会在虚拟DOM转成真实DOM插入页面中之后执行，参数就是此真实DOM-->
  class Calculator extends React.Component {
      add = () => {
          let calcO = this.calcO.value;
          let calcT = this.calcT.value;
          let r = calcO + calcT;
          this.calcR.value = r
      }
      render() {
          return (
              <div>
                  <input ref={instance => this.calcO = instance} />
                  +
                  </input ref={instance => this.calcT = iinstance}>
                  <button onClick={this.add()}></button>
                  =
                  <input ref={instance => this.calcR = instance}/>
              </div>
          )
      }
  }
  
  

  3、ref=React.createRef()

  class Caculator extends React.Component {
      constructor() {
          super()
  <!--一开始都会返回一个对象{current：null}，等到虚拟元素转为真实DOM插入页面之后就会对应的current的值改为对应的ref属性对应的真实DOM-->
          this.calcO = React.createRef();
          this.calcT = Reat.createRef();
          this.calcR = React.createRef();
      }
      add = () => {
          let calcO = this.calcO.current.value;
          let calcT = this.calcT.current.value;
          let r = calcO + calcT;
          this.calcR.current.value =r;
      }
      render() {
          return (
              <div>
                  <input ref={this.calcO}/>+
                  <input ref={this.calcT}/>
                  <button onClick={this.add()}></button> 
                  =
                  <input ref={this.calcR}/>
              </div>
          )
      }
  }
  

  实例应用：
  class Username extends React.Component {
      constructor() {
          super();
          this.inputRef = React.createRef();
      }
      render() {
          return (
              <input ref={this.inputRef}/>
          )
      }
  }
  class Form extends React.Component {
      constructor() {
          super()
          this.username = React.createRef();
      }
      getFocus = () => {
          thiis.username.current.inpuRef.current.focus();
      }
      render() {
          return (
              <>
                  <Usernamr ref={this.usename}/>
                  <button onClick={this.getFocus()}>获得焦点</button>
                  
              </>
          )
      }
  }
  

  // 实际中我们如果函数组件和类组件混用我们又该怎么给函数组件加ref属性。
  function Username(){
      return <input ref={inputRef}/>
  }
  
  function insertRef(fnComponent) {
      return class extends React.Component {
          render(
              return fnComponent(this.props, this.props.insertedRef);
          )
      }
  }
  
  <!--function insertedRef(fnComponent) {
      return props => fnComponent(props, props.ref)
  }-->
  
  const AfterUsername = insertedRef(Username);
  
  class Form extends React.Component {
      constructor() {
          super()
          this.username = React.createRef();
      }
      getFocus = () => {
          this.username.current.fcous();
      }
      render() {
          return (
              <>
                  <AfterUsername ref={this.username}/>
                  <button onClick={this.getFocus()}>获得焦点</button>
              </>
          )
      }
  }
  ReactDOM.render(<Form>, 'root');
  

  4、ref=useRef()hooks(墙裂推荐)。不再此处展开......