React Function vs模板重新渲染

Question

我有簡單的櫃台應用

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();

如果我使用ReactDOM.render(template, app) 。 react僅重新渲染特定元素。

如果我使用ReactDOM.render(<Component/>, app) react重新渲染整個應用程序。

它們是相同的組件，為什么要這樣運行？ Component vs template有什么區別？

如果我在渲染函數外部聲明Componenet示例，則僅渲染spesific元素

我用chrome dev-tools（渲染=>油漆沖洗）檢查了一下。

Answer 1

理想情況下，無論如何， 您不應該每次都重新渲染整個樹。 您應該使用“內部”狀態

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

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

template和Component之間的區別在於， template是JSX / React元素，而Component是React（無狀態/功能）組件。

看到這里更多信息

React也將嘗試解決和優化兩棵樹（舊/新）之間的差異。

在第一個示例中， render(template, app) -您仍在使用相同的template元素，因此React會將其子代與新的子代進行比較，並僅更新其道具已更改的子代。 在第二個示例中，您傳入了Component的新實例（ <Component/>是React.createElement("Component")語法糖），因此React將完全替換該子樹。

這是一些關於React如何在樹狀態之間協調的信息 。