React 基础与实践【讲师：杨雨涵】
03 具体场景案例
1.如何划分组件？ React中常用的组件划分方式：
- 功能划分
按照组件的功能进行划分，每个组件都承担着特定的功能模块。例如，可以将登录、注册、列表展示等功能划分为不同的组件。
- 页面划分
按照页面的结构和布局进行划分，每个组件都对应着页面的一部分，可以将一个页面划分为多个小组件。例如，可以将导航栏、侧边栏、内容区等页面元素划分为不同的组件。
- 数据划分
按照数据源进行划分，每个组件都负责渲染特定的数据。例如，可以将用户列表、商品列表等数据划分为不同组件。
- ui控件划分
按照ui控件的类型进行划分，每个组件都是一个单独的ui控件。例如，可以将按钮、输入框、下拉框等ui控件划分为不同的组件。
2.父子组件通信
React父组件向子组件传递数据主要通过以下方式实现：
-
通过props属性传递数据。父组件的数据可以通过props属性传递给子组件，在子组件中通过this.props访问。父组件可以通过更改props属性来实现对子组件数据的更新。
-
在父组件中定义一个回调函数，然后将该回调函数通过props传递给子组件。当子组件需要向父组件通信时，可以调用该回调函数并将需要传递的数据作为参数传入。
-
使用React的Context API实现数据共享。Context提供了一种在组件之间共享值的方式，父组件可以在Context中存储数据，然后子组件可以通过Context API访问上下文中的数据。
React子组件向父组件通信主要通过以下方式实现：
-
在子组件中定义一个回调函数，然后将该回调函数通过props传递给父组件。当子组件需要向父组件通信时，可以调用该回调函数并将需要传递的数据作为参数传入。
-
使用事件总线（EventBus）实现通信。在React中，可以使用第三方库如PubSub.js实现事件总线，子组件通过事件名和数据发布事件，而父组件则通过订阅相应的事件名来获取数据。
-
使用React的Context API实现数据共享。子组件可以通过Context API访问上下文中的数据，并可以在上下文中存储自己的数据，从而实现与父组件的通信。
