对任意级别的提升状态做出反应的最佳(功能)方式?

我看到了 post 从2017年开始,有人问它如何在react中将州提升两个级别。答案是 this 在OOP设计的背景下。五年后,组件可以用函数式编程编写,基本上省去了 这 关键词。

提升状态的最简单方法是什么?这是用redux之类的工具最好完成的事情,还是香草反应就足够了?

例如,我不确定如何最好地传球 deleteItemHandler (在内联注释中注明)从一个应用程序到另一个项目,通过显示。

function App() {
  const [todoList, todoListSetter] = useState([]);

  const addTodoHandler = (item) => {
    todoListSetter((prevItems) => {
      return [item, ...prevItems]
    });
  };

  const deleteItemHandler = (item) => { //Level 1
    todoListSetter((prevItems) => {
      return prevItems.filter(elem => elem !== item)
    });
  };
  
  return (
    <div >
      <Display removeItem={deleteItemHandler} items={todoList} /> //Level 1->2      
      <Form onSaveItem={addTodoHandler}/>
    </div>
  );
};

const Display = (props) => {
  props.items.map((item) => {
    return(
    <div>
      <Item deleteItemHandler={props.removeItem} value={item}/> //Level 2->3
    </div>)
  });
};

const Form = (props) => {
    
    const [newItem, setNewItem] = useState("");
    const newItemHandler = (event) => {
      setNewItem(event.target.value);
    };   
    
    const submitHandler = (event) => {
        event.preventDefault();
        props.onSaveItem;

    };
    
    return(
        <div>
            <h2>Add item to todo list</h2>
            <form onSubmit={submitHandler}>
                <label>New Item</label>
                <input type='text' onChange={newItemHandler} />
            </form>
        </div>
    ) 
};

const Item = (props) => {
    
    return(
        <div>
            <h1>{props.value}</h1>
            <button onClick={props.deleteItemHandler}>Delete Item</button> //Level 3
        </div>
    )
};

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