sweetpalma / gooact Goto Github PK

The setState() method of Component doesn't allow incremental patches to state - this is a pretty substantial inconsistency from React, and it's a one-line fix.

The other example I posted also illustrates this problem:

https://codesandbox.io/s/rwjr4xo47p

    this.onInput = event => {
      this.setState({
        count: this.state.count, // try commenting out this line
        input: event.target.value
      });
    };

If you don't explicitly copy over all existing state, it fails, whereas React would internally patch state with new properties.

Possible fix: either Object.assign() to existing state property, or spread existing properties to an entirely new value, e.g. {...this.state, new_state} if you're concerned about possible side-effects.

Hi, I appreciated your work on explaining React internal.
But I think there is something wrong about life-cycle.
https://gist.github.com/vanhtuan0409/b3bdfb7bfdb50edd45269a95e846c69f
The above snippet shows that componentDidMount was called before real DOM is attached to the document.
In the real version of React, I think componentDidMount is ensured to be called after the DOM was attached

So I don't know if you've abandoned this already, but I'm still interested ;-)

To try to make more sense of the types involved, I've started porting it to Typescript.

I've been puzzled by the Component.render method, which is declared as static, gets called as an instance method here, here and here.

I tried this in a console:

class Foo {
  static blah() {
  	console.log('hey');
  }
}

Foo.blah();

(new Foo()).blah(); // blah is not a function

And it fails, as I expected.

It doesn't look like these were introduced by accident? The initial commit declared this as static and then proceeded to call it as an instance-method.

I can't make sense of it. Why would that work?

In this example, I'm replacing a <div> with a null node on every other iteration:

https://codesandbox.io/s/rwjr4xo47p

I don't understand what causes this error - you do handle null vdom nodes by inserting empty Text nodes as placeholders, so it should be supported?

this is my example,this is built in parcel,
and i add "babel-preset-env", and "babel-preset-react",
but when i run this web, i got this error "React is not defined",
I wonder why i need react? Or i need extra config?
(I thounght gooact is a simple react, when i use gooact, i don't need React, is that true?)

would upgrade for ref support?

You invited me to open issues (on Medium) so here's the first one :-)

This is regarding the loss-of-focus work-around in the patch function:

        const active = document.activeElement;
        // ...
        [].concat(...vdom.children).map((child, index) => {
            const key = child.props && child.props.key || `__index_${index}`;
            dom.appendChild(pool[key] ? patch(pool[key], child) : render(child, dom));
            delete pool[key];
        });
        // ...
        active.focus();

Here, every child-node is getting repositioned with a call to appendChild - whether the node in question has actually moved or not.

Changing the position of a node in the document causes loss of state, which you can partially work around with activeElement and focus() to restore input focus after losing it - however, there is also loss of selection state and cursor position etc. to consider.

Here's an example to illustrate the problem:

https://codesandbox.io/s/rwjr4xo47p

After typing into the input, try selecting the text you typed in, which is displayed below - you will end up selecting the entire contents of the document, because all the nodes are changing places every second.

Possible approach to fixing this: avoid appendChild and conditionally use insertBefore instead - for example, you could track the previous node by assigning it to a variable, e.g. last_dom = dom, then call dom.insertBefore(new_dom, last_dom.nextSibling) only after checking if (new_dom.previousSibling !== last_dom) ... in plain english, check if the patched/rendered DOM node's previous sibling is already the DOM node from the last iteration, and only position it after the last DOM node if it isn't.

What do you think?

import Gooact, { render, Component } from "../gooact";

class Title extends Component {
  componentDidMount() {
    console.log("title")
    console.log(document.getElementById("title"))
  }

  render() {
    return (
      <h1 id="title">{this.props.children}</h1>
    )
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { arr: [{id: 1,v:1},{id:2, v:2}] };

    this.onReverse = this.onReverse.bind(this);
  }

  componentDidMount() {
    console.log("app");
  }

  onReverse() {
    this.setState({arr: [{id: 2,v:2},{id:1, v:1}]})
  }

  render() {
    const { counter } = this.state;
    return (
      <div>
        {
          this.state.arr.map(o=><div key={o.id}>{o.v}</div>)
        }
        <button onClick={this.onReverse}>reverse</button>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

when click, it render

sorry for bothering you on weekends!
when i use class component to build an app,
it get an error "Class constructor Component cannot be invoked without 'new'",
how to fix that?
this is my demo