Question

我想检查协调的反应方式，因此我用相同的文本更新了id的内部HTML。理想情况下，它不应该更新dom，而是在chrome中重新刷漆。

我尝试用铬重新刷漆，在同一文本上显示绿色矩形

import React from 'react';

function App() {
    return (
        <div >
            <p id="abc" key="help">abc is here</p>
            <button onClick={function () {
                // document.getElementById("may").innerHTML = "";
                document.getElementById("abc").innerHTML = "abc is here";

            }} > Btn</button>
        </div>
    );
}

export default App;

预期结果应该是应该不会发生油漆重新闪动，但是这种情况正在发生。

Answer 1

您不是在这里使用React来更新p标签的文本，而是使用JavaScript直接更新DOM。

因此，React对帐算法甚至不在此处运行。

Answer 2

在React中，输出的HTML是组件的state和props的结果。

当检测到state或props中的更改时，React运行render方法来检查是否需要更新DOM。因此，为了进行此检查，您需要在state或props中存储确定视图的参数。

以您的示例为例，我们可以将要显示的文本保存在p标记中，该状态为组件状态（使用钩子）：

import React, { useState } from 'react';

function App () {
    const [text, setText] = useState('abc is here');

    render() {
        return (
            <div >
                <p id="abc" key="help">{this.state.text}</p>
                <button onClick={() => setText('abc is here') }>Btn</button>
            </div>
        );
    }
}

export default App;

如果您使用的React版本不支持钩子，则需要将功能组件转换为使用state的类：

import React, { Component } from 'react';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { text: 'abc is here' };
    }

    render() {
        return (
            <div >
                <p id="abc" key="help">{this.state.text}</p>
                <button onClick={() => this.setState({ text: 'abc is here' }) }>Btn</button>
            </div>
        );
    }
}

export default App;

如何检查React是否更新dom？

2 个答案: