react组件的组合使用案例-TodoList

一、案例演示

1.案例演示图

二、总结

通过这个案例我学会了拆分组件、父子之间数据的传递

1.1拆分组件

在react中，拆分组件是一种非常重要的实践技巧，因为它可以带来以下益处：

1. 提高代码可读性和可维护性
   拆分组件能够让代码更加模块化、清晰，并且易于理解。每个组件都有自己的职责和作用，使得代码的逻辑更为清晰明了。这使得代码更容易被维护和扩展，因为修改一个组件不会影响其他组件的操作和状态。

2. 提高组件的复用性
   拆分组件能够使代码更具可重复性和可复用性。这样，如果你需要在项目中添加类似功能的地方时，你就可以使用已有的组件而不需要重新发明轮子。组件也可以被其他开发者使用，提高整个项目的协作效率。

3. 提高性能
   将组件拆分成小而简单的组件可以增强应用性能。当页面渲染时，只有需要更新部分的组件才需要更新，减少不必要的计算和渲染流程。

   总之，拆分组件是一项可以改善react应用程序的实践方法，它提供了更高级别的分离关注点，促进了可读性、可维护性和可复用性。

1.2父子组件之间的数据传递

1.2.1父向子传递

在React中，父组件可以通过属性（props）向子组件传递数据。数据从父组件的状态(state)中传递下来，并以props参数的形式传入子组件中。

1.2.2子向父传递

子组件也可以通过props参数调用由父组件传递过来的函数来实现更复杂的交互行为。这需要父组件将自己的方法传递给子组件后，在子组件中触发这些方法。还有一种情况就是在某个子组件内部处理用户的交互事件时，要将结果反馈给父组件进行进一步处理。这个时候可以通过将函数传递给子组件，然后在子组件中调用该函数并将处理结果作为参数传递回父组件。

通俗易懂的说：子组件要想改变父组件中的状态，就必须用父组件传递给它的改变状态的方法
完整代码：（后续上传）
个人博客：余生的学习笔记