Question

我使用 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;

Answer 1

每当状态更改组件重新渲染时，您就会拥有父组件和子组件。

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

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

供您参考以了解场景和示例。

<块引用>

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

How to prevent unnecassery re-rendering

即使我不使用道具，React 道具也会更新

1 个答案: