#青训营笔记 困扰WEB性能的两大问题包括： 等待资源加载时间+大部分情况下浏览器单线程执行。
REACT 介绍
React是一个流行的JavaScript库，用于构建用户界面。它是由Facebook创建的，现在由一个开发者社区维护。React允许网络开发者创建可重复使用的UI组件，可以在多个页面或项目中使用。
该库的理念集中在组件的概念上：可以重复使用、组合和独立管理的小块代码。这也就是说，与其把整个网站建成一个巨大的页面，React鼓励开发者把它分解成更小的部分，每个部分都有自己的功能。
React的另一个关键好处是它的虚拟DOM（文档对象模型），这有助于提高网络应用的性能，因为虚拟DOM可以快速地只更新页面中需要改变的部分。这也可以通过使其反应更灵敏来增强用户体验。
React也有一个庞大的附加组件和工具的生态系统，开发者可以用它来进一步开发你的网络应用。其中一个工具是Redux，它用于管理应用程序中的全局状态。
总的来说，由于React的模块化特性、性能和庞大的开发者社区，它是构建现代和互动网络应用的一个不二选择。
REACT特点
- ->声明式编程
- ->组件化
- ->跨平台编写 react是用JavaScript构建快速响应的大型WEB应用程序的首选之一。 REACT：scheduler调度器；reconciler协调器；renderer渲染器（管理一棵）；
REACT的error boundary类如下
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; }
componentDidCatch(error, errorInfo) { // You can also log the error to an error reporting service logErrorToMyService(error, errorInfo); }
render() {
if (this.state.hasError) { // You can render any custom fallback UI return <h1>Something went wrong.</h1>; }
return this.props.children;
}
}
之后可用这段代码为常规模块
<ErrorBoundary>
<MyWidget />
</ErrorBoundary>
REACT中的一些类实例
-
Component： 这是React的基类，所有其他类的组件都继承于此。它包含很多有用的生命周期方法，如render、componentDidMount和componentWillUnmount。
-
PureComponent： 这与Component类似，但它自动实现了一个shouldComponentUpdate方法，对props和状态进行浅层比较，以确定是否需要重新渲染。这可以帮助提高大型应用的性能。
-
Context.Consumer： 这是一个类组件，允许你从一个上下文提供者那里消费数据。它提供一个函数作为子函数，接收上下文的当前值并返回一个React元素。
4.Context.Provider： 这是一个类组件，通过一个上下文对象向所有的子组件提供数据。它接受一个值道具，可以是任何JavaScript数据类型。
- Fragment： 这是一个类组件，它允许你在不引入额外的DOM元素的情况下将一个子列表分组。它可以用来从一个组件中返回多个元素。
6.memo： 这是一个高阶组件，将组件渲染的结果备忘化。它类似于PureComponent，只是它可以应用于任何功能组件而不仅仅是类组件。
