react ref

• • react ref
  • • 1. 前言
    • 2. 什么时候需要使用ref
    • 3. ref 的使用方式（三种）
    • • 字符串形式ref
      • 回调函数的形式
      • React.createRef()
      • • 创建一个`ref`
        • 将一个`ref`赋值给某个组件或者`dom`节点
        • 使用这个`ref`
      • useRef()
      • ref转发（React.forwardRef）

      react ref

      1. 前言

      如果有这么一种情况，我们需要在一个组件获取另一个组件或者某个DOM元素，这个时候我们应该怎么做呢。react中的Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

      2. 什么时候需要使用ref

      • 管理焦点，文本选择或媒体播放。(点击之后某个input框聚焦)
      • 触发强制动画。（触发某个DOM的动画）
      • 集成第三方 DOM 库。

      3. ref 的使用方式（三种）

      1. 字符串形式ref

         class MyComponent extends React.Component {
           handleClick() {
             // 使用原生的 DOM API 获取焦点
             this.refs.myInput.focus();
           render() {
             //  当组件插入到 DOM 后，ref 属性添加一个组件的引用于到 this.refs
             return (
                 <input type="text" ref="myInput" />
                 <input
                   type="button"
                   value="点我输入框获取焦点"
                   onClick={this.handleClick.bind(this)}
               </div>
         ReactDOM.render(
           <MyComponent />,
           document.getElementById('example')
         

         这种方式效率太低了，而且存在一些问题，后续可能被废弃，所以不建议使用

      2. 回调函数的形式

         <script type="text/babel" >
             class Son extends React.Component {
               render() {
                 return (
                     <p ref={this.props.ref4}>我是第一个节点</p>
                     <p ref={this.props.ref3}>我是第二个节点</p>
                   </div>
         	class Father extends React.Component {
               handleClick() {
                 console.log(this.ref1.value);
                 console.log(this.ref2.value);
                 console.log(this.ref3);
                 console.log(this.ref4);
               saveRef2 = (d) => {
                 this.ref2 = d;
               render() {
                 return (
                     <input value = "ref1" ref = {d => {this.ref1 = d}} />
         /* 写法一:直接通过内联回调函数的方法进行ref绑定，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。
                     <input value = "ref2" ref = {this.saveRef2} />
         写法二:通过在外部定义函数的方式引入进来，这样就不会每次都创建一个函数实例了，这样就可以只执行一次绑定
                     <Son ref3 = {d => this.ref3 = d} />
         我们可以通过这种方式在父组件来获取子组件某一个节点的值
                     <Son ref4 = {d => this.ref4 = d} />
                     <button onClick={this.handleClick.bind(this)}>获取所有的refs</button>
                   </div>
         	ReactDOM.render(<Father />,document.getElementById('test'))
         </script>
         

         回调函数的方式有两种写法，详细看注释，这种写法对于普通的dom节点和组件都是适合的

         结果：

         

      3. React.createRef()

         这种方式也是官方比较推荐的方式。Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

         class AutoFocusTextInput extends React.Component {
           constructor(props) {
             super(props);
             this.textInput = React.createRef();  
           componentDidMount() {
             this.textInput.current.focusTextInput(); 
           render() {
             return (
               <CustomTextInput ref={this.textInput} />    
         

         也就是一般来说会有三个步骤：

         1. 创建一个 ref

         2. 将一个 ref 赋值给某个组件或者 dom 节点

            class MyComponent extends React.Component {
              constructor(props) {
                super(props);
                this.myRef = React.createRef();  // 创建ref
              render() {
                return <div ref={this.myRef} />;  // 赋值ref
            

         3. 使用这个 ref

         当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。

         const node = this.myRef.current; //current属性是react给我们带上的
         // React 会在组件挂载时给 current 属性传入 DOM 元素，并在组件卸载时传入 null 值。ref 会在 componentDidMount 或 componentDidUpdate 生命周期钩子触发前更新。
         

         ref 的值根据节点的类型而有所不同：

         • 当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
         • 当 ref 属性用于自定义 class 组件时， ref 对象接收组件的挂载实例作为其 current 属性。
         • 你不能在函数组件上使用 ref 属性 ，因为他们没有实例。

         请注意： 我们的 ref 一定会是某个实例，因为函数没有实例，所以不能再函数组件上使用 ref

         function MyFunctionComponent() {
           return <input />;
         class Parent extends React.Component {
           constructor(props) {
             super(props);
             this.textInput = React.createRef();
           render() {
             // 这个不会生效，因为函数组件没有实例
             return (
               <MyFunctionComponent ref={this.textInput} />
         

      4. useRef()

         虽然我们不能直接在函数组件上使用 ref ，但是我们可以在函数内部使用 useRef ，因为函数内部可以有DOM节点或者其它的 class 组件供我们访问，但是这个时候我们不能使用 React.createRef() ，而是需要使用 useRef 这个钩子函数。

         function CustomTextInput(props) {
           // 这里必须声明 textInput，这样 ref 才可以引用它
           const textInput = useRef(null); // 初始值设置为null，后面挂载后再赋值
           function handleClick() {
             textInput.current.focus();
           return (
               <input
                 type="text"
                 ref={textInput} />
               <input
                 type="button"
                 value="Focus the text input"
                 onClick={handleClick}
             </div>
         

      5. ref转发（React.forwardRef）

         Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧。对于大多数应用中的组件来说，这通常不是必需的。但其对某些组件，尤其是可重用的组件库是很有用的。

         考虑这个渲染原生 DOM 元素 button 的 FancyButton 组件：

         function FancyButton(props) {
           return (
             <button className="FancyButton">
               {props.children}
             </button>
         

         React 组件隐藏其实现细节，包括其渲染结果。其他使用 FancyButton 的组件 通常不需要 获取内部的 DOM 元素 button 的 ref 。这很好，因为这防止组件过度依赖其他组件的 DOM 结构。

         虽然这种封装对类似 FeedStory 或 Comment 这样的应用级组件是理想的，但其对 FancyButton 或 MyTextInput 这样的高可复用“叶”组件来说可能是不方便的。这些组件倾向于在整个应用中以一种类似常规 DOM button 和 input 的方式被使用，并且访问其 DOM 节点对管理焦点，选中或动画来说是不可避免的。

         Ref 转发是一个可选特性，其允许某些组件接收 ref ，并将其向下传递（换句话说，“转发”它）给子组件。

         在下面的示例中， FancyButton 使用 React.forwardRef 来获取传递给它的 ref ，然后转发到它渲染的 DOM button ：

         const FancyButton = React.forwardRef((props, ref) => (  
             <button ref={ref} className="FancyButton">    
                 {props.children}
             </button>
         ));
         // 你可以直接获取 DOM button 的 ref：
         const ref = React.createRef();
         <FancyButton ref={ref}>Click me!</FancyButton>;
         

         这样，使用 FancyButton 的组件可以获取底层 DOM 节点 button 的 ref ，并在必要时访问，就像其直接使用 DOM button 一样。

         以下是对上述示例发生情况的逐步解释：

         1. 我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。
         2. 我们通过指定 ref 为 JSX 属性，将其向下传递给 <FancyButton ref={ref}> 。
         3. React 传递 ref 给 forwardRef 内函数 (props, ref) => ... ，作为其第二个参数。
         4. 我们向下转发该 ref 参数到 <button ref={ref}> ，将其指定为 JSX 属性。
         5. 当 ref 挂载完成， ref.current 将指向 <button> DOM 节点。

         第二个参数 ref 只在使用 React.forwardRef 定义组件时存在。常规函数和 class 组件不接收 ref 参数，且 props 中也不存在 ref 。

         Ref 转发不仅限于 DOM 组件，你也可以转发 refs 到 class 组件实例中。

         给元素标签设置 ref ，目的：获取对应的DOM元素给类组件设置 ref ，目的：获取当前调用组件创建的实例（后续可以根据实例获取子组件中的相关信息）// 基于 ref 获取子组件的实例，这样基于实例，可以调用子组件内部，挂载到实例上的东西 class Child extends React . Component {state = {x : 1000 }; 在 React 中， ref 主要用于获取组件实例或访问 DOM 节点，也可以用于组件间通信。它是一个普通的 JavaScript 对象，拥有一个名为 current 的属性。它的创建方式有两种，create Ref 和 use Ref 。函数组件中使用 use Ref 来创建 ref 。接收一个任意初始值，如字符串、对象，甚至是函数等。使用 use Ref 创建的 ref 只会在组件首次渲染时创建，每次都会返回相同的引用，所以通过 ref 可以拿到最新的值。 有时你可能需要访问由 React 管理的 DOM 元素 —— 例如，让一个节点获得焦点、滚动到它或测量它的尺寸和位置。在 React 中没有内置的方法来做这些事情，所以你需要一个指向 DOM 节点的 ref 来实现。 提供了 ref ref ref 属性，让我们可以引用组件的实例或者原生 DOM 元素。使用 ref ref ref ，可以在父组件中调用子组件暴露出来的方法，或者调用原生 element 的 API。通常， ref ref ref 被用作如下几种情况：在类组件当中使用 ref 主要有两种方式： React .create Ref React .create Ref React .create Ref 、回调函数回调函数回调函数。当然还有一种过时的方式，使用 String 类型的 Ref s，现在已被弃用。通过 可以创建一个 ref ，然后在需要 不管在Vue中还是 React ，如果我们想使用一个元素的DOM，不需要通过JS中操纵DOM的方法，它们提供了一个专属的API就是 ref 。而Vue中的 ref 可能比较简单，这一篇主要讲一下如何在 React 中使用 ref ，以及使用 ref 的场景。 <input ref ="userName" name="userName" type="text"/> <input ref ="passWord" name="passWord" type="password"/> <button onClick={()=>{ // console.log(document.query. 对于 Ref 理解与使用，一些读者可能还停留在用 ref 获取真实 DOM 元素和获取类组件实例层面上其实 ref 除了这两项常用功能之外，还有很多别的小技巧通过本篇文章的学习，你将收获 React ref 的基本和进阶用法，并且能够明白 React 内部是如何处理 ref 的，并通过一个小 Demo + 提问的方式带你更加深刻地理解 ref 的底层原理forward Ref 不仅可以转发 ref 获取 DOM 元素和组件实例，还可以转发合并后的自定义 ref 什么是“合并后的自定义 ref ”呢？ 在 React 16.3版本后，使用此方法来创建 ref 。将其 赋值 给一个变量，通过 ref 挂载在dom节点或组件上，该 ref 的current属性 将能拿到dom节点或组件的实例。 React .create Ref 调用后可以返回一个容器，该容器可以存储被 ref 所标识的节点。（由于效率问题，现在官方不推荐使用这种写法。但是该容器是转人专用，一次只能存一个。1.dom节点上使用，通过。来引用真实的dom节点。 const { list } = this.state; for (let item of list) { if (item.value && item.value.length > 100) { Toast.show(`${i. Ref 的作用： Ref s 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 什么时候使用： react 的状态态的开发形式，能通过状态控制的，应该避免尽可能少的使用 ref 。 一．创建并访问 ref s（方法一） ① 创建 ref s： Ref s 是使用 React .create Ref ()创建的，并通过 ref 属性附加到 React 元素。在构造组...