标签: solid-js

使用 ViteJS starter for React / SolidJS，

在代码更改触发 HMR 重新加载之前，如何检测（使用某种 js 回调）？（进行一些清理）

需要明确的是，我不是问如何使用 HMR，只是问如何在此之前进行一些清理。

我尝试过使用window.onbeforeunload没有效果。

谢谢。

我正在尝试用 Solid 重写我在 React 中制作的项目。我正在尝试按照文档的建议使用 Solid Router。

到目前为止，这是我的组件。 index.js

import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'

import './index.css'
import App from './App'

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById('root')
)

App.jsx

import Articles from './components/Articles'
import Header from './components/Header'
import styles from './App.module.css'
import Navbar from './components/Navbar'
import Topics from './components/Topics'

function App() {
  return (
    <div className={styles.container}>
      <Header />
      <Navbar />
      <Routes>
        <Route path="/" element={<Articles />} />
        <Route path="/:topic" component={<Topics />} …

我想我对反应性方面的信号、反应、推导非常了解。

但是，我无法理解如何突然将它们放入函数中，App()并且信号可以在信号更新时重复更新到 DOM 中？

我想也许这个文档解释了它，但它似乎太复杂了，难以理解。能用几段话解释清楚吗？

例如，我想象

<div>{value()}</div>

从哪里来value()​

const [value, setValue] = createSignal(123);

会有一些代码来产生一些 Reaction 来对 Signalvalue的更改做出反应并更新 DOM，但是它是如何发生的呢？这createSignal()和普通版一样createSignal()还是特别版，设置了一个 Reaction 来更新 DOM？另外相关的是，既然App()只运行一次，那么为什么render()需要采取() => <App />但不能只采取<App />作为它的第一个参数呢？如果App()仅运行一次，则意味着() => <App />仅运行一次。那么为什么不直接给出 a<App />呢？

当我尝试使用npx degit solidjs/templates/js my-app. Mac 上当前设置为 zsh

Props 是我们所说的在执行时传递给组件函数的对象，它表示绑定到其 JSX 的所有属性。Props 对象是只读的，并且具有封装在 Object getter 中的反应性属性。这使得它们具有一致的形式，无论调用者是否使用信号、信号表达式或静态值。您可以通过 props.propName 访问它们。

因此，不只是解构 props 对象也非常重要，因为如果不在跟踪范围内完成，就会失去反应性。一般来说，访问 Solid 基元或 JSX 之外的 props 对象上的属性可能会失去反应性。这不仅适用于解构，还适用于展开和 Object.assign 等函数。

我在solid js教程中发现了它https://www.solidjs.com/tutorial/props_defaults 。但我仍然不明白道具的解构如何导致反应性丧失。

 const { name } = props;
 return <div>{name}</div>

 return <div>{props.name}</div>

我不知道这些之间有什么区别。我想我还不明白反应性是如何运作的SolidJS。

他们是否为组件功能和 JSX 做了更多的事情？