wxya（个人网站）组件
函数组件
- 函数组件（Function Components）:
函数组件是React中创建组件的最简单方式，它们是纯函数，接受
props作为输入并返回React元素。React18对函数组件的性能进行了优化，如自动批处理更新以及与Hooks的紧密集成。使用const Component = (props) => {}或简化的参数解构const Component = ({ prop1, prop2 }) => {}来定义。
- 类组件（Class Components）:
类组件继承自
React.Component或React.PureComponent，它们允许你使用更传统的面向对象的方式来定义组件，包括内部状态（state）和生命周期方法。尽管函数组件在很多场景下已经成为首选，类组件在需要更多控制时仍然有用。
- Hooks组件: Hooks是React16.8引入的，它允许你在不编写类的情况下使用state和其他React特性。useState, useContext, useEffect等都是常用的Hooks，它们极大地丰富了函数组件的功能。
- memo化组件（React.memo）:
这是一种优化技术，通常用于函数组件，通过
React.memo包装组件来避免不必要的渲染。当组件的props没有变化时，memoized的组件将不会重新渲染。
- Context Providers and Consumers: Context API允许你在组件树中传递数据，无需手动传递props。Provider组件用于提供context值，而Consumer组件用于消费这些值。React16引入了新的Context API，使得这一过程更加高效和易用。
- Forwarding Refs: Refs允许你访问DOM元素或在函数组件中创建可复用的子组件实例引用。React.forwardRef函数用于将ref转发到特定的子组件上。
- Portals: Portals使组件能够在DOM树中的不同位置渲染其内容，常用于模态框、提示信息等需要脱离当前组件层级结构的场景。
- Error Boundaries: 错误边界是React组件，可以捕获并打印发生在其子组件树任何位置的JavaScript错误，并且，它会渲染出备用UI，而不是渲染那些崩溃了的子组件树。类组件可以被定义为错误边界。
Loading...