反应道具即使在我不使用道具的情况下也在更新

我使用创建-反应-应用程序模板创建了一个项目。我正在尝试从JSON文件导入数据并将其作为道具发送到TODOS组件文件，但我没有将其用作TODOS文件中的道具，但当我使用应用程序组件中的添加按钮更新文件时，它会更新TODO列表。我不明白它为什么要这么做。如果有人能解释一下发生了什么事，那将是一个很大的帮助。

这是app.js文件

import { Component } from 'react';
import Todos from "./todos";
import tasks from './data.json';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { task: '' };
    this.addTask = this.addTask.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  addTask() {
    tasks.push({
      title: this.state.task,
      done: false
    });
    this.setState({ task: "" });
  }
  handleChange(event) {
    this.setState({ task: event.target.value });
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <input className="App-task-input" type="text" placeholder="Title"
            value={this.state.task} onChange={this.handleChange} />
          <button className="App-add-btn" onClick={this.addTask}>Add Task</button>
        </header>
        <Todos tasks={tasks} />
      </div>
    );
  }
}
export default App;

这是todos.js文件

import { Component } from "react";
import tasks from "./data.json";

class Todos extends Component {
  changeCheckbox(index) {
    console.log(index, tasks);
  }
  render() {
    return (
      <main className="todo">
        // It should update if i use this.props.tasks instead of tasks
        {tasks.map((t, i) =>
          <div className="todo-item" key={i}>
            <input
              id={t.id}
              className="todo-checkbox"
              type="checkbox"
              checked={t.done}
              onChange={this.changeCheckbox.bind(this, i)} />
            <label className="todo-label" htmlFor={t.id}>{t.title}</label>
          </div>
        )}
      </main>
    );
  }
}

export default Todos;

---

解决方案

只要状态更改组件重新呈现，此时您就有了父组件和子组件。

在您的父组件中，您正在更新您的列表，这就是为什么无论您是否传递更改，子组件都会重新呈现。我会的。

若要防止出现这种情况，您需要使用shouldComponentUpdate、React.memo或PureComponent。

为您理解场景和举例的参考。

只要调用方法setState()，组件就会自动重新呈现

How to prevent unnecassery re-rendering