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)。反应只重新渲染特定元素。

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

它们是相同的组件，为什么它会这样？组件与模板之间的区别是什么？

如果我在render函数外面声明Componenet示例，则只渲染特定元素

我用chrome dev-tools（rendering =＆gt; paint flushing）检查这个。

Answer 1

理想情况下，你不应该每次都重新渲染整棵树。您应该使用"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>
    )
  }
}

template和Component之间的区别在于template是JSX / React元素，Component是React（无状态/功能）组件。

有关详情，请参阅here

React也会尝试解决和优化两棵树之间的区别（旧/新）。

在第一个示例中，render(template, app) - 您仍然使用相同的template元素，因此React会将其子项与新子项进行比较，并仅更新道具已更改的子项。在第二个示例中，您传递Component的新实例（<Component/>是React.createElement("Component")的语法糖），因此React将完全替换该子树。

Here's some info关于React如何在树状态之间进行协调。

React Function vs Template重新渲染

1 个答案: