面试题：React中使用Refs操作子组件的复杂场景应用

Question

假设你有一个包含多个子组件的父组件，子组件中有一个自定义的方法用于执行特定动画效果。请描述如何通过父组件使用Refs调用子组件的这个方法，并解释在这种场景下可能遇到的问题及解决方案。

Answer 1

通过父组件使用 Refs 调用子组件方法步骤：

1. 在子组件中定义动画方法，例如：

import React from 'react';

class ChildComponent extends React.Component {
  performAnimation = () => {
    // 执行特定动画效果的代码
    console.log('执行动画');
  };

  render() {
    return <div>子组件</div>;
  }
}

export default ChildComponent;

2. 在父组件中，创建一个 Refs 引用，并将其传递给子组件：

import React, { createRef } from'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends React.Component {
  childRef = createRef();

  handleCallChildMethod = () => {
    if (this.childRef.current) {
      this.childRef.current.performAnimation();
    }
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleCallChildMethod}>调用子组件方法</button>
      </div>
    );
  }
}

export default ParentComponent;

可能遇到的问题及解决方案：

1. 子组件未挂载时调用方法：
   • 问题描述：在子组件尚未挂载到 DOM 时，this.childRef.current 可能为 null，此时调用子组件方法会报错。
   • 解决方案：在调用子组件方法前，先检查 this.childRef.current 是否存在，如上述代码中 if (this.childRef.current) 的判断。
2. 使用函数式组件时的 Refs：
   • 问题描述：函数式组件没有实例，不能直接使用 createRef 传递引用。
   • 解决方案：可以使用 React.forwardRef 来转发 Refs。例如：

import React from'react';

const ChildFunctionalComponent = React.forwardRef((props, ref) => {
  const performAnimation = () => {
    console.log('执行动画');
  };

  return <div ref={ref}>函数式子组件</div>;
});

export default ChildFunctionalComponent;

在父组件中使用方式类似：

import React, { createRef } from'react';
import ChildFunctionalComponent from './ChildFunctionalComponent';

class ParentComponent extends React.Component {
  childRef = createRef();

  handleCallChildMethod = () => {
    if (this.childRef.current) {
      this.childRef.current.performAnimation();
    }
  };

  render() {
    return (
      <div>
        <ChildFunctionalComponent ref={this.childRef} />
        <button onClick={this.handleCallChildMethod}>调用子组件方法</button>
      </div>
    );
  }
}

export default ParentComponent;

3. 更新问题：
   • 问题描述：频繁通过 Refs 调用子组件方法可能导致不必要的重渲染，影响性能。
   • 解决方案：可以使用 useCallback 钩子（在函数式组件中）或 shouldComponentUpdate（在类组件中）来控制组件更新，避免不必要的重渲染。例如在类组件中：

class ChildComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 根据实际情况判断是否需要更新
    return false;
  }
  //...其他代码
}