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如何在树状态之间协调的信息 。