React Function vs模板重新渲染

Question

I have simple counter app

import * as ReactDOM from 'react-dom';
import * as React from 'react';

const app = document.querySelector('#root');
let count = 0;

const increment = () => {
    count++;
    render();
}

var as = {};

const render = () => {
    var Component = () => (
        <div>
            <h2>Differ</h2>
            <h1>123{count}</h1>
            <button onClick={increment}>+</button>
            <div>3333</div>
        </div>
    );
    var template = (
        <div>
            <h2>Differ</h2>
            <h1>123{count}</h1>
            <button onClick={increment}>+</button>
            <div>3333</div>
        </div>
    );
    // If click on increment react re-render only the count "text" element 
    ReactDOM.render(
        template, app
    );
    // If click on increment react re-render the whole component
    // ReactDOM.render(
    //     <Component />, app
    // );
}




render();

if i use ReactDOM.render(template, app) . react re-render only the specific element.

if i use ReactDOM.render(<Component/>, app) react re-render whole app.

they are same components so why it act like this ? what the different between Component vs template ?

If I declare Componenet example outside render function react render only the spesific element

i check this with chrome dev-tools( rendering => paint flushing).

Answer 1

Ideally you shouldn't be re-rendering the whole tree every time, anyways. You should be using "internal" state

class Component extends React.Component {
  state = { count: 0 }

  render() {
    const onClick = () => { this.setState(({ count }) => ({ count: count + 1 }))}
    return (
      <button>{this.state.count}</button>
    )
  }
}

The difference between template and Component is that template is a JSX/React Element, and Component is a React (Stateless/Functional)Component.

See here for a little more info

React will also try to resolve and optimise the difference between two trees (old/new).

In the first example, render(template, app) - you're still using the same template element, so React will compare its children against the new children, and update only those whose props have changed. In the second example, you're passing in a new instance of Component ( <Component/> is syntactic sugar for React.createElement("Component") ), so React will completely replace that subtree.

Here's some info on how React reconciles between tree-states.