小红书商业技术一面
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