React学习笔记：状态提升、受控/非受控组件与组件通信

本篇JS-React个人学习笔记旨在分享作者对React框架的理解和实践经验，主要包括以下几个关键知识点： 1. **状态提升（State Management）** 子组件与父组件之间的状态传递有两种方式： - 子传父：在子组件中定义一个自定义函数，并在`componentDidMount`生命周期方法中通过props将子组件的状态`num`传递给父组件。当子组件状态改变时，通过`setState`更新父组件的`num`。 - 父传子：在父组件中，预先设定`num`（可能存储在仓库中），然后通过props将这个值传递给子组件。 2. **受控与非受控组件** - 受控组件：当组件有`value`和`onChange`属性时，组件状态由React管理。`handleChange`通常接收`e`事件并用`setState`更新状态，如`setSate({ value: e.target.value })`。 - 非受控组件：通过`ref`进行操作，如使用`createRef`创建引用，然后在`input`元素上设置`ref={this.ipt}`，非受控组件的默认值通常用`defaultValue`属性设置。 3. **组件通信（Context API）** React的Context API用于组件间通信，当需要多个组件共享数据时非常有用。首先创建一个`context`对象，然后在父组件外侧使用`Provider`包裹数据源，传递`value`属性。子组件通过`Consunmer`从上下文中获取数据，并在需要的地方处理接收到的值。 4. **高阶组件（Higher-Order Components, HOC）** HOC是一个接收组件作为参数并返回新组件的函数。在这个例子中，`withHoc`函数用于封装可复用的功能，例如通用的认证逻辑、数据请求等。HOC将这些功能内联到目标组件中，提高代码的复用性和模块化。 总结来说，这份笔记涵盖了React中的状态管理、组件类型（受控/非受控）、跨组件的数据传递以及如何利用高阶组件来增强组件功能。深入理解并实践这些概念有助于提高开发React应用的效率和组件间的交互性。