华清远见重庆中心——高级特效开发个人总结

React是什么？

        react是一个用于构建用户界面的JavaScript库。

React的特点

        声明式、组件式、学习一次，随处可用

ref主要作用

        访问React DOM结构（非受控组件）

// ref在 类组件中的使用
  // 1、通过React.createRef 创建Ref对象的变量
  // 2、在指定的React元素中设置ref属性，属性值为上述的变量
  // 3、通过 变量.current 访问React 元素以及其中内容
  class App1 extends React.Component {

    constructor() {
      super()
      this.inputRef = React.createRef()
    }

    handleClick = () => {
      //focus() 元素获取焦点
      this.inputRef.current.focus()
    }

    render() {
      return (
        <>
          <input ref={this.inputRef} type="text" />
          <button onClick={this.handleClick}>让input获得焦点</button>
        </>
      )
    }

  }

  // 函数组件 中的ref使用
  // 1、通过React.useRef() 创建一个变量
  // 2、设置React元素中的ref属性，其属性值是上述变量
  // 3、通过 变量.current 访问React 元素以及其中内容
  function App2() {

    const inputRef = React.useRef()

    function handleClick() {
      inputRef.current.focus()
    }

    return (
      <>
        <input ref={inputRef} type="text" />
        <button onClick={handleClick}>让input获得焦点</button>
      </>
    )
  }