Блог

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

  

QA:
привет ~ всем ~
У меня небольшая проблема с тем, как избежать повторного рендеринга.
Я обнаружил, что функция рендеринга будет выполняться дважды после изменения состояния.
Как я могу улучшить ситуацию и почему это событие произойдет?

Ваше приложение, вероятно, рендерится дважды из-за строгого режима. Вы можете отключить этот параметр:

Проверьте, app обернуто <React.StrictMode> ли ваше index.js:

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

Если это так, вы можете отключить StrictMode, удалив <React.StrictMode> тег:

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