面试题答案
一键面试定义响应式数据
在Solid.js中,通过createSignal
函数来定义响应式数据。createSignal
接受一个初始值,并返回一个包含两个元素的数组:第一个元素是获取当前值的函数,第二个元素是更新值的函数。
在组件中使用响应式数据实现视图自动更新
Solid.js会自动追踪响应式数据的依赖关系。当响应式数据发生变化时,依赖该数据的视图部分会自动重新渲染。
代码示例
import { createSignal } from 'solid-js';
import { render } from 'solid-js/web';
function App() {
const [count, setCount] = createSignal(0);
return (
<div>
<p>Count: {count()}</p>
<button onClick={() => setCount(count() + 1)}>Increment</button>
</div>
);
}
render(() => <App />, document.getElementById('app'));
在上述代码中,createSignal(0)
定义了一个初始值为0的响应式数据count
,以及更新它的setCount
函数。在视图中,{count()}
展示当前count
的值,点击按钮时调用setCount(count() + 1)
更新count
的值,从而触发视图自动更新。