qq_21087199的博客

（适用于所有编程的性能优化----空间换时间）减少CPU计算量，减少网络加载耗时。多使用内存、缓存或其他方法。

html代码媒体文件，如图片，视频等。

回顾Vue2,我们知道每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把用到的数据property记录为依赖，当依赖发生改变，触发setter,则会通知watcher ,从而使关联的组件重新渲染可以看到，组件内部只有一个动态节点，剩余一堆都是静态节点，所以这里很多diff和遍历其实都是不需要的，造成性能浪费因此，Vue3在编译阶段，做了进一步优化。

Composition API可以说是Vue3的最大特点，那么为什么要推出Composition Api,解决了什么问题?以上通过使用Composition Api都能迎刃而解。

高阶函数(Higher-order function),至少满足下列一个条件的函数上述代码中，该函数接受一个组件WrappedComponent作为参数，返回加工过的新组件EnhancedComponent。

代码层面工程层面框架机制层面通过这三个层面的优化结合，能够使基于react项目的性能更上一层楼。

中间件(Middleware)是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的那么如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件Redux中，中间件就是放在就是在dispatch过程，在分发action进行拦截处理，其本质上一个函数，对store.dispatch方法进行了改造，在发出Action和执行Reducer这两步之间，添加了其他功能。

通过redux将整个应用状态存储到store中，组件可以派发dispatch行为action给store其他组件通过订阅store中的状态state来更新自身的视图

在实际开发过程中，前端性能问题是一个必须考虑的问题，随着业务的复杂，遇到性能问题的概率也在增高除此之外，建议将页面进行更小的颗粒化，如果一个过大，当状态发生修改的时候，就会导致整个大组件的渲染，而对组件进行拆分后，粒度变小了，也能够减少子组件不必要的渲染。

使用React.createElement或JSX编写React组件，实际上所有的JSX代码最后都会转换成React.createElement(…),Babel帮助我们完成了这个转换的过程。createElement函数对key和ref等特殊的props进行处理，并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象。

在React中，JSX是其一大特性，可以让你在JS中通过使用XML的方式去直接声明界面的DOM结构上述中，ReactDOM.render()用于将你创建好的虚拟DOM节点插入到某个真实节点上，并渲染到页面上通过console.log(VDOM),则能够得到虚拟VDOM消息。

在render过程中，React将新调用的render函数返回的树与旧版本的树进行比较，这一步是决定如何更新DOM的必要步骤，然后进行diff比较，更新DOM树*

个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是state当需要修改里面的值的状态需要通过调用setState来改变，从而达到更新组件内部数据的作用如下例子通过点击按钮触发onclick事件，执行this.setState方法更新state状态，然后重新执行render函数，从而导致页面的视图更新我们会发现页面并不会有任何反应，但是state的状态是已经发生了改变。

Refs在计算机中称为弹性文件系统(英语：Resilient File System,简称ReFS)React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点。

在react项目中去编写组件内JavaScript代码错误会导致React的内部状态被破坏，导致整个应用崩溃，这是不应该出现的现象作为一个框架，react也有自身对于错误的处理的解决方案。

类(Class)是面向对象程序设计(OOP,Object-Oriented Programming)实现信息封装的基础类是一种用户定义的引用数据类型，也称类类型传统的面向对象语言基本都是基于类的，JavaScript基于原型的方式让开发者多了很多理解成本在ES6之后，JavaScript拥有了class关键字，虽然本质依然是构造函数，但是使用起来已经方便了许多。

由于React是单向数据流，主要思想是组件不会改变接收的数据，只会监听数据的变化，当数据发生变化时它们会使用接收到的新值，而不是去修改已有的值因此，可以看到通信过程中，数据的存储位置都是存放在上级位置中

将css文件作为一个模块引入，这个模块中的所有css,只作用于当前组件。不会影响当前组件的后代组件。将 css单独与在一个 css文件中,然后在组件中直接引入。

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式在React中，一个类、一个函数都可以视为一个组件

泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型，在实例化时作为参数指明这些类型

在TS里，虽然已经支持类、命名空间和模块，但函数仍然是主要定义行为的方式，TypeScript为JavaScript函数添加了额外功能，丰富了更多的应用场景 函数类型在TS 类型系统中扮演着非常重要的角色，它们是可组合系统的核心构建模块

除了string、number、boolean 这种基础的类型之外，在ts类型声明中还存在一些高级的类型应用 这些高级类型，是ts 为了保证语言的灵活性，所使用的一些语言特性。这些特性有助于 我们应该复杂多变的开发场景

在开发阶段，可以为明确的变量定义某种类型，这样ts就能在编译阶段进行类型检查，当类型不符合预期结果的时候就会出现错误提示

TypeScript是JS的类型超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等。

为了解决上面正确输出this问题，常见的绑定方式有：render方法中使用bindrender方法中使用尖头函数constructor中bind定义阶段使用箭头函数绑定

如果想要接触被控制，可以为input标签设置onChange事件,输入的时候触发事件函数，在函数内部实现state更新，从而懂啊组织input框的内容改变。受控组件特征：一次性取值（如提交时），提交时验证，即时现场验证，有条件的禁用提交按钮，强制输入格式，一个数据的多个输入，动态输入。如果选择非受控组件的话，控制能力较弱，表单数据就由DOM本身处理，但更加方便快捷，代码量少。受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。非受控组件，就是不受我们控制的组件。

函数组件语法更短、更简单，这使得它更容易开发、测试和理解。类组件会因为大量使用this让人困惑。

**react 中的 super super(props)**1 constructor() ---- super（）的基本含义constructor () — 构造方法这是es6对类的默认方法，通过new 命令 生成对象实例时自动调用该方法，并且，该方法是类中必须有的，如果没有显示定义，则默认添加空的 constructor() 方法super() ----- 继承 在class方法中，继承是使用 extends 关键字来实现的。子类 必须 在 constructor( )调用 supe

在React 中，类组件基于ES6，所以在constructor中必须使用super在调用super过程，无论是否传入props，React内部都会将props赋值给组件实例props属性中，如果调用了super(),那么this.props在super和构造函数结束之间仍然是undefined。

React 的核心思想就是组件化思想，而且页面会被切分成一些独立的、可复用的组件

Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件BrowserRouter是history模式，HashRouter模式吏用两者作为最顶层组件包裹其他组件。例如将path在Route匹配时写成/detail/:id,那么 /detail/abc、/detail/123都可以匹配到该Route。上述组件当接收到的路由参数name不等于tom的时候，将会自动重定向到首页。动态路由的概念指的是路由中的路径并不会固定。在跳转的路径中添加了一些query参数；● search传递参数。