ref 回调是否总是按照它们在 render() 中声明的顺序被调用？

Question

So far, I haven't been able to track down documentation or React source that answers this question. For the following React component ...

class MyComponent extends React.Component {
    divRefs = [];

    addRef = (node) => {
        if (node) {
            this.divRefs.push(node.id);
        }
    };

    render() {
        return (
            <>
                <div id="node1" ref={ this.addRef }>one</div>
                <div id="node2" ref={ this.addRef }>two</div>
                <div id="node3" ref={ this.addRef }>three</div>
            </>
        );
    }
}

... will the order of ids in the divRefs array consistently follow the order that the divs are included in the render declaration? (ie the ref callbacks are invoked in an identical order as render) The resulting array looks like this, but can I reliably expect this result, in this order? Why or why not?

...
console.log(this.divRefs); // ['node1', 'node2', 'node3']
...

Answer 1

You get following guarantee for callback refs:

React will call the ref callback with the DOM element when the component mounts , and call it with null when it unmounts. Refs are guaranteed to be up-to-date before componentDidMount or componentDidUpdate fires.

Now the question is, in which order are the children mounted:

it is up to React to decide in which order to actually call their render functions

So, there seems to be no 100% guarantee, that children are consistently rendered, mounted and ref callbacks invoked corresponding to their order in render code. To be safe, you can instead update divRefs directly via indices, which are passed to addRef :

 class MyComponent extends React.Component { divRefs = []; addRef = (node, index) => { if (node) { this.divRefs[index] = node.id console.log(`Set node ${node.id}`, JSON.stringify(this.divRefs)) } }; render() { return ( <React.Fragment> <div id="node1" ref={ n => this.addRef(n, 0) }>one</div> <div id="node2" ref={ n => this.addRef(n, 1) }>two</div> <div id="node3" ref={ n => this.addRef(n, 2) }>three</div> </React.Fragment> ); } } ReactDOM.render(<MyComponent />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.1/umd/react.production.min.js" integrity="sha256-vMEjoeSlzpWvres5mDlxmSKxx6jAmDNY4zCt712YCI0=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.1/umd/react-dom.production.min.js" integrity="sha256-QQt6MpTdAD0DiPLhqhzVyPs1flIdstR4/R7x4GqCvZ4=" crossorigin="anonymous"></script> <div id="root"></div>

This also avoids stale entries caused by push , when a ref is dropped and then re-added to a DOM node. Alternatively, create an array of nodes and map over them to get rid of manual indices:

// render()
const nodes = [{ id: "node1", label: "one" }, { id: "node2", label: "two" }];
return nodes.map((n, idx) => (
    <div id={n.id} key={n.id} ref={n => this.addRef(n, idx)}> {n.label} </div>
));

Hope, it helps!