我正在开发一种开发工具,它可以让您创建Reaction组件.

用户一开始将使用如下所示的组件:

function MyComponent() {
  var rand = useRef(Math.random());

  return <div>{rand.current}</div>;
}

但随后可能需要对其进行如下修改:

function MyComponent() {
  var rand = useRef(Math.random());

  return <span>{rand.current}</span>;
}

这里唯一有意义的更改是<span>,所以对我来说最理想的情况是(为了防止较大应用程序的完整树重新挂载/保留应用程序状态),随机数不会更改,因为引用将被保留-但Reaction在考虑其身份时似乎检测到引用组件定义的更改:MyComponent !== MyComponent (new)并输出一个不同的随机值.

这类似于我自己实现HMR(热模块重新加载)-但被限制为仅响应组件定义.

下面是一个可以使用的工作示例:https://jsfiddle.net/83xruyL5/1/

有没有办法在定义中使用类似于name/id/key的属性来修改此react 行为?或者可能是一种更通用的JS方法,即在修改函数/组件引用的定义时保留/重用该引用?

我假设这可能是不可能的,我只是在这里受到React的限制,但我只是问以防万一.

推荐答案

你可以使用

function Wrapper(props) {
    const [Component, setComponent] = useState(MyComponent);
    return Component(props);
}

调用setComponent(MyComponent2)将使用新的Component但相同的ref重新呈现包装.诀窍是将callComponent作为函数,而不是创建<Component {...props}>元素.当然,如果新旧组件使用不同的钩子,这将严重失败.


而不是这次黑客攻击, 我建议您研究一下Reaction的内部 struct ,看看他们是如何实现热模块重载的.由Reaction团队提供的react-refresh个允许"Fast Refresh"个.

Javascript相关问答推荐

如何在NightWatch.js测试中允许浏览器权限?

将json数组项转换为js中的扁平

从mat—country—select获取整个Country数组

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

如何在Angular中插入动态组件

如何在mongoose中链接两个模型?

如何禁用附加图标点击的v—自动完成事件

Promise Chain中的第二个useState不更新

如何从网站www.example.com获取表与Cheerio谷歌应用程序脚本

使用ThreeJ渲染的形状具有抖动/模糊的边缘

如何从HTML对话框中检索单选项组的值?

为什么123[';toString';].long返回1?

为什么我的getAsFile()方法返回空?

变量在导入到Vite中的另一个js文件时成为常量.

为什么我的按钮没有从&q;1更改为&q;X&q;?

使每个<;li>;元素的 colored颜色 与随机生成的 colored颜色 列表不同(不重复

react -原生向量-图标笔划宽度

Cherrio JS返回父div的所有图像SRC

通过解构/功能组件接收props-prop验证中缺少错误"

react :图表负片区域不同 colored颜色