1. What is SolidJS?

We all know SolidJS, if not, then why are you reading this article (~ ▽ ~)”

We all know SolidJS, and here’s its documentation: www.solidjs.com/

In short, SolidJS is the react version of React. It updates everything on demand and updates everything when data changes.

For example, a component:

function App() {
  const [value, setValue] = useState(0);
  return <div>{value}</div>;
}
Copy the code

React is a call to the entire App function (re-render), whereas SolidJS updates only the value part.

Of course, SolidJS says:

function App() {
  const [value, setValue] = createSignal(0);
  return <div>{value()}</div>;
}
Copy the code

In SolidJS, App is called only once during initialization and is never executed again.

So JSX in SolidJS is the equivalent of a “static template”, used to describe the UI without being called again, and without diff.

In other words, whenever you execute a function in your App, whenever you execute a function in your JSX, it only fires once.

2. For the record

How to change React to SolidJS?

Of course, we don’t rename solid-js react, nor do we manually update the DOM out of the react logic.

It must be stated here:

The following implementation is entirely based on the React API, instead of using DOM API or jQuery to hack, which would be meaningless.

3. How?

1. How to update onlyvalue()A small piece?

This is the core of the implementation idea, and let’s get straight to it — turning value() into a component.

Yes, it presents data, but it’s really a component. It is a component that only returns data.

2. Whyvalue()Rather thanvalue?

Because you need to know that there’s a piece of data that’s going to have to be updated. How do you know that?

According to JS syntax, there is no alternative to state.value (listening for getters) or value() (calling functions).

This is why SolidJS must be written as value(). If written as value, the god does not know how to update the data, because the function will not run again in the “static template” implementation.

3. Implement a similarcreateSignal 的 useSignal

We want to implement a useSignal, similar to SolidJS’s createSignal, that returns both getter and setter functions.

Also, the getter returns a component.

function useSignal(val) {
  const valRef = useRef(val);
  const update = useRef();

  const Render = () = > {
    const [value, setValue] = useState(valRef.current);
    update.current = setValue;
    return value;
  };

  const getter = () = > {
    try {
      useState(); // Use this hack to know whether the data is in JSX or is normally read elsewhere
      return <Render />;
    } catch (e) {
      returnvalRef.current; }};const setter = (newVal) = > {
    valRef.current = newVal;
    update.current(newVal);
  };

  return [getter, setter];
}
Copy the code

The above is a minimalist implementation, but it is problematic because the data can be used in multiple places, and the above can only update the data in the last place.

4. Updated data synchronizationuseSignal

Compose an array of listeners for each update function. This is how the React state manager works.

function useSignal(val) {
  const valRef = useRef(val);
  const listeners = useRef([]);

  const Render = () = > {
    const [value, setValue] = useState(valRef.current);

    useEffect(() = > {
      listeners.current.push(setValue);
      return () = > {
        listeners.current.splice(listeners.current.indexOf(setValue), 1); }; } []);return value;
  };

  return [
    () = > {
      try {
        useState();
        return <Render />;
      } catch (e) {
        returnvalRef.current; }},(payload) = > {
      listeners.current.forEach((listener) = > {
        listener((prev) = > {
          valRef.current =
            typeof payload === 'function' ? payload(prev) : payload;
          returnvalRef.current; }); }); },]; }Copy the code

The above is already a working implementation.

Here, in fact, the core of the story has been told.

But there is still a lot of unfinished business if it is to really develop requirements.

4. What else?

If it is to be “usable”, it should at least be:

  • CreateEffect (to listen for updates)
  • CreateMemo (for creating computed data)
  • OnMount (for sending requests)
  • OnCleanup (for unsubscribing)
  • What if the data is Object or array? (This is the most complicated, and I only considered the basic data types above.)
  • How do I implement trinary expressions or function calls in JSX? (Triads, or functions, are initialized only once and cannot respond to changes)
  • How do I respond to HMR? What if the data doesn’t appear in JSX for the first time? How to unsubscribe after component unmount…

5. Solid – react

It had a bunch of questions written on it, and of course the answers were ready… This answer is called solid-react.

All the problems mentioned above have been solved, if you can look at the source code.

☞ lot: github.com/nanxiaobei/…

Here is the solid-react API:

  • UseSignal (corresponding to createSignal, used to create data)
  • UseUpdate (corresponding to createEffect, used to listen for updates)
  • UseAuto (corresponding to createMemo for creating computed data)
  • UseMount (corresponding to onMount, for sending requests)
  • UseCleanup (for onCleanup, to unsubscribe)
  • The data is object or array (use proxy for this tricky situation)
  • Run (used for ternary expressions or functions in JSX,Run(() => fn(value()))

Pay attention to the naming of the API, as there is a saying: try not to conflict with existing apis (for example, don’t call it useState useMemo, which would confuse the code), while keeping it concise (easy to write) and intuitive (easy to understand).

Read README: github.com/nanxiaobei/…

This already covers most common development scenarios, that is, for “production.”

6. Try the solid – react

Demo: codesandbox. IO/s/solid – rea…

Here is a demo, you can open the console, click the button to try, and you will find:

Components are no longer re-render, React is completely solidJs-style updates on demand!

UseUpdate useAuto Does not require dePS. Its dependencies are automatically learned. And they only execute again if the dependency changes.

Rerender = rerender = rerender = rerender = rerender = rerender = rerender = rerender = rerender = rerender = rerender = rerender = rerender = rerender = rerender = rerender

Functions are functions, objects are objects, and there is no need to create a new layer, so pass it to the sub-component props.

7. What else?

Solid-react was an experimental project, just to implement an idea, and it worked out pretty well.

Solid-react tries its best to be “fully capable”. It’s small (but tasty) and has everything in it, whether it’s sending requests or listening to data.

Solid-react is a small thing, and it may have its flaws, but it certainly can’t compare to, or be compared to, the maturity of direct react development.

Solid-react is certainly fine for small demo projects, but not for large ones, so it’s good to play with first if you’re interested.

Solid-react is more of a concept, and it’s unlikely that React will go this way, but thanks to open source, you can experiment with it yourself.

Solid-react addresses the general confusion in the industry that has been plagued by Hooks for years (although I feel like Hooks are fine)

Solid-react welcomes anyone interested to give it a try and create more possibilities.

Change React to SolidJS. Say goodbye to Hooks

Github.com/nanxiaobei/…

The solid-react API is Hooks. How to say goodbye to Hooks! React is compatible with solid-react. Yes, I even consider this situation 🙈