即使我不使用道具，React 道具也在更新答案

【问题标题】：React props are updating even when i'm not using the props即使我不使用道具，React 道具也在更新
【发布时间】：2021-08-31 02:19:42
【问题描述】：

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

这是 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;

【问题讨论】：

addTask() { tasks.push({ title: this.state.task, done: false}); this.setState({ task: "" }); } 在这里您正在更新任务并设置状态，因此它正在重新渲染子组件
一旦你更新了父组件的状态，它也会重新渲染子组件。
如果你想处理这个使用Pure component或shouldComponentUpdate in class component and memo in functional component

标签： javascript reactjs react-props

【解决方案1】：

每当状态改变组件重新渲染时，这里就有父组件和子组件。

在您的父组件中，您正在更新您的列表，这就是为什么无论您是否传递更改，孩子也会重新渲染。我会发生的。

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

供您参考以了解场景并举例说明。

每当你调用方法setState()，组件会自动重新渲染

How to prevent unnecassery re-rendering

【讨论】：