面试题：Solid.js中JSX语法的条件渲染

Question

在Solid.js的JSX语法里，如何实现条件渲染？请给出具体的代码示例，并解释两种常见实现方式的原理，比如使用三元运算符和`show`指令。

Answer 1

使用三元运算符实现条件渲染

1. 代码示例：

import { createSignal } from 'solid-js';
import { render } from 'solid-js/web';

const App = () => {
  const [isVisible, setIsVisible] = createSignal(false);
  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible())}>Toggle</button>
      {isVisible() ? <p>This is a visible paragraph.</p> : null}
    </div>
  );
};

render(() => <App />, document.getElementById('app'));

2. 原理：在Solid.js的JSX中，三元运算符的工作原理与JavaScript中一致。它通过一个条件表达式来决定渲染哪一部分内容。如果条件为真，则返回三元运算符冒号前的内容，否则返回冒号后的内容。在上述示例中，isVisible()为条件，当它为true时，渲染<p>This is a visible paragraph.</p>，否则渲染null，即不渲染任何内容。

使用show指令实现条件渲染

1. 代码示例：

import { createSignal } from 'solid-js';
import { render } from 'solid-js/web';

const App = () => {
  const [isVisible, setIsVisible] = createSignal(false);
  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible())}>Toggle</button>
      <p show={isVisible()}>This is a visible paragraph using show directive.</p>
    </div>
  );
};

render(() => <App />, document.getElementById('app'));

2. 原理：show指令是Solid.js提供的一种便捷方式来实现条件渲染。它根据绑定的值的真假来决定是否渲染元素。当show的值为true时，对应的元素会被渲染到DOM中；当值为false时，元素会从DOM中移除。与三元运算符不同的是，使用show指令时元素在DOM中的添加和移除由Solid.js框架来管理，在某些场景下这种方式更方便且性能上有优化，因为它不需要开发者手动处理条件为假时返回null等情况。