反应渲染两次！！！我怎样才能停止重新渲染？

Question

import React from 'react';
import {Component} from 'react';
/*
import {Component} from 'react';等同於
import React from 'react';
const Component=React.Component;
*/
import {Fragment} from 'react';
/*
Fragment為佔位符,使用他的原因是因為JSX語法僅能接受一個tag包裹所有其他tag,若是使用div包裹,則在
瀏覽器渲染時會多出多餘的div標籤,而使用Fragment於瀏覽器渲染時不會有該標籤的顯示
*/
import TodoItem from './TodoItem';
//將子組件引入

class TodoList extends Component{
    constructor(){
        super();
        this.state={//當組件中的state或props發生改變時,render函式就會重新執行
            inputValue:'hello there',
            list:[]
        };
        this.inputValueChange=this.inputValueChange.bind(this);  /* bind(this)綁定函數的作用域 */
        this.addList=this.addList.bind(this);
        this.delList=this.delList.bind(this);
    }
    render(){
        console.log('todoList test');
        return(
        <Fragment>
            <input 
                value={this.state.inputValue}//在JSX語法中使用JS的表達式(變數或方法)時需要用{}包裹,像input/ul等皆為JSX一般語法
                onChange={this.inputValueChange}            
            />
            <button onClick={this.addList}>按鈕</button>
            <ul>
                {this.getTodoItem()}               
            </ul>
        </Fragment>
        );
    }

质量检查：哈喽~大家~ 我在如何避免重新渲染方面遇到了一些麻烦。我发现渲染函数会在状态改变后执行两次。我怎样才能改善这种情况以及为什么会发生这种情况？

Answer 1

由于 Strict Mode，您的应用可能会呈现两次。您可以禁用此设置：

检查你的 app 是否被 <React.StrictMode> 包裹在你的 index.js:

ReactDOM.render(
  <React.StrictMode>
    {app}
  </React.StrictMode>,
  document.getElementById('root')
);

如果是这样，您可以通过删除 <React.StrictMode> 标签来禁用 StrictMode：

ReactDOM.render(
  {app},
  document.getElementById('root')
);

反应渲染两次！！！我怎样才能停止重新渲染？

react render twice!!! how can i stop re-render?

reactjs

rerender