1.项目相关,有没有考虑性能相关

2.Vue3和React的差异,在技术选型的时候,是如何选择的

3.React中父组件中想调用子组件的方法,应该怎么做?

forwardRef + useImperativeHandle

需要命令式地调用子组件的方法时(例如:管理焦点、触发动画、集成第三方库)

  • useRef: 在父组件中创建一个引用,用于“持有”子组件的实例或暴露的方法。
  • forwardRef: 一个高阶组件,可以将父组件创建的 ref “转发”给子组件。函数式组件默认是不能接收 ref 的,必须用 forwardRef 包裹。
  • useImperativeHandle: 在子组件中使用,它可以让你自定义暴露给父组件的 ref 值。你可以精确地控制父组件能调用哪些方法,而不是暴露整个组件实例。
// 子组件
import React, { forwardRef, useImperativeHandle, useRef } from 'react';

// 1. 使用 forwardRef 包裹组件,这样它就能接收 ref prop
const MyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  // 2. 使用 useImperativeHandle 来自定义暴露给父组件的 ref
  useImperativeHandle(ref, () => ({
    // 这里返回的对象,就是父组件 ref.current 的值
    // 只暴露我们想让父组件调用的方法
    focus: () => {
      console.log('Focusing input from child method');
      inputRef.current.focus();
    },
    clear: () => {
      console.log('Clearing input from child method');
      inputRef.current.value = '';
    },
    // 你可以暴露任何你需要的值或方法
    someValue: 'Hello from child'
  }));

  return (
    <input ref={inputRef} {...props} style={{ border: '1px solid black' }} />
  );
});

export default MyInput;
// 父组件
import React, { useRef } from 'react';
import MyInput from './MyInput';

function App() {
  // 3. 在父组件中创建 ref
  const myInputRef = useRef(null);

  const handleFocus = () => {
    // 4. 通过 ref.current 调用子组件暴露的方法
    if (myInputRef.current) {
      myInputRef.current.focus();
    }
  };

  const handleClear = () => {
    if (myInputRef.current) {
      myInputRef.current.clear();
      console.log(myInputRef.current.someValue); // "Hello from child"
    }
  };

  return (
    <div>
      {/* 5. 将 ref 传递给子组件 */}
      <MyInput ref={myInputRef} placeholder="Type here..." />
      <button onClick={handleFocus}>Focus Input</button>
      <button onClick={handleClear}>Clear Input</button>
    </div>
  );
}

export default App;

4.实习过程中需求开发流程

5.git相关操作

6.闭包了解吗?手写一个防抖

7.url输入到渲染的流程

8.三次握手,四次挥手过程,为什么不能两次握手

9.解析html文件时遇到js会怎么样

10.说一下常见的http状态码

11.对于304,具体说一下强缓存和协商缓存

12.如何让请求每次都是强缓存

设置 HTTP 请求头:

Cache-Control: public, max-age=31536000, immutable

13.手撕:树中的路径之和等于target

小红书商业技术一面

作者

MeorinLime 梦灵

发布日期

2025 - 08 - 29