React17+Hook+TS4 仿Jira 笔记汇总

看看我是怎么学习React17+Hook+TS4的   https://pan.baidu.com/s/16GwFh17fihySHvEVt02OkQ 提取码：86ir

前端框架（react）
三大框架的区别：
Angular带有比较强的排它性的
React主张是函数式编程的理念，侵入性没有Angular那么强，主要因为它是软性侵入。
Vue 渐进式的

看看我是怎么学习react的   https://pan.baidu.com/s/16GwFh17fihySHvEVt02OkQ 提取码：86ir

react与vue的对比 可以从redux和vuex中对比

你如何看待react /什么是react  react就是一个框架 他相对于mvc来说只是其中的v 他适用于开发数据不断变化的大型应用程序

react相对其他框架优势： 高性能高效率 实现了前端界面的高性能高效率开发，所以说react很擅长处理组件化的页面  

React与Vue对比
相似点：
使用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。
区别：
在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要手动实现；在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染，开发者不需要考虑组件是否需要重新渲染之类的优化。
在React中，一切都是JavaScript，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面；在Vue中有自带的渲染函数，Vue也支持JSX，Vue官方推荐使用模板渲染视图。组件分为逻辑类组件和表现类组件。
组件作用域内的CSS。CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的；在Vue中是通过给style标签加scoped标记实现的。
Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。
react特点和优势：
1.虚拟dom

虚拟DOM是在DOM的基础上建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。

是一个JavaScript对象，重新渲染的时候，会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM，对比发现差异之后，只需修改真正的DOM树时就只需要触及差别中的部分就行，使用这个虚拟dom，避免对原生dom的创建和对比，这样就大大提升了性能，因为原生dom的创建是非常 消耗性能的，而对js对象的对比和创建对性能开销很小，从这种方式来提供应用的性能 

2.组件

组件化 组件指的就是同时包含了html、css、js、image元素的聚合体

每个组件和组件都相互独立 便于维护 

组件是通过React.createClass创建的（ES5），在es6中直接通过class关键字来创建

组件的划分要满足高内聚，低耦合的原则。

高内聚是指把逻辑紧密相关的内容放在一个组件中。
低耦合指的是不同组件的依赖关系要尽量弱化，每个组件要尽量独立。
组件其实就是一个构造器,每次使用组件都相当于在实例化组件

react的组件必须使用render函数来创建组件的虚拟dom结构

组件需要使用ReactDOM.render方法将其挂载在某一个节点上

组件的首字母必须大写

3.单向数据流 数据绑定 父到子

4.jsx树

react 的渲染过程中，兄弟节点之间是怎么处理的？也就是key值不一样的时候。
通常我们输出节点的时候都是map一个数组然后返回一个ReactNode，为了方便react内部进行优化，我们必须给每一个reactNode添加key，这个key prop在设计值处不是给开发者用的，而是给react用的，大概的作用就是给每一个reactNode添加一个身份标识，方便react进行识别，在重渲染过程中，如果key一样，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新，如果key不一样，则react先销毁该组件，然后重新创建该组件。

看看我是怎么学习React17+Hook+TS4的   https://pan.baidu.com/s/16GwFh17fihySHvEVt02OkQ 提取码：86ir

遍历子节点的时候，不要用 index 作为组件的 key 进行传入。
主要是因为react是基于虚拟dom跟diff算法提高性能的，而提高性能意味着会做一些dom节点的复用，key就是负辅助diff算法的，在某些情况下用index是没问题的，例如只是循环渲染展示，但是如果有涉及中间节点的增删的操作，这样就会造成react无法正确识别哪些节点是删的，哪些节点是增加的，会发生很多看似奇怪的现象

react纯函数、函数组件点击这里
优化react性能的时候，对于太多深层嵌套的组件，由于父组件的state改变会导致包括子组件也重新render可以根据情况使用纯函数组件，由于纯函数组件是没有状态的组件这个时候可以用高阶组件给函数组件封装一个类似PureComponet的功能

对于性能优化 还可以使用React.memo

React.memo 是 React 16.6 新的一个 API，用来缓存组件的渲染，避免不必要的更新，其实也是一个高阶组件，与 PureComponent 十分类似，但不同的是， React.memo 只能用于函数组件 。

import { memo } from 'react';
 
function Button(props) {
  // Component code
}
 
export default memo(Button);
高级用法

默认情况下其只会对 props 做浅层对比，遇到层级比较深的复杂对象时，表示力不从心了。对于特定的业务场景，可能需要类似 shouldComponentUpdate 这样的 API，这时通过 memo 的第二个参数来实现：

function arePropsEqual(prevProps, nextProps) {
  // your code
  return prevProps === nextProps;
}
 
export default memo(Button, arePropsEqual);
注意：与 shouldComponentUpdate 不同的是，arePropsEqual 返回 true 时，不会触发 render，如果返回 false，则会。而 shouldComponentUpdate 刚好与其相反。

 
react-routers
 

Router组件身上有history，

   Route组件为里面的路由组件传递了location和match，

   Router组件为路由组件传递了history

   可以在view层里面的生命周期里面监听路由 进行相应的操作

1. 渲染根组件的时候，最外层包裹上Router组件，在其上可以设置history属性，值可以是hashHistory||browserHistory

    当值为hashHistory的时候，url的变化为hash值的变化，router会去检测hash变化来实现组件的切换

   当值为browserHistory的时候，url的变化为path的变化，需要后端进行配置

2. 在需要切换路由组件的地方，通过this.props.children来表示对应路由组件

3. 在Route中可以多次嵌套Route来实现多级路由

4. 使用Redirect组件可以做到从一个路由马上重定向到其他路由,利用这样的属性，当我们form设置为'*'的时候，就可以将匹配不到的路由重定向到某路由下

4. 可以在配置Route的时候给path里加入/:param 才表示此路由需要参数

传入的时候，querystring参数可以在Link里的query中传入和设置，在目标组件中，通过this.props中的，params、routePrams、location等来接收参数

5. 编程式导航

* 在路由组件中通过this.props.history获取到history对象，利用里面push、replace、go、goBack方法来进行隐式跳转

* 可以从react-router中引入browserHistory或者hashHistory调用里面的push、replace、go、goBack方法来进行隐式跳转

6. 可以通过在路由配置上设置 onLeave和onEnter路由钩子来监听路由的变化

router3 4 区别

1）在V3中，一般使用，只是在其history属性中指定是哪种实现: hashHistory或者browserHistory之类的。而在v4中，你需要直接用具体的实现，比如HashRouter或者BrowserRouter：

（2）在V3中，嵌套Route和Index Route的使用是很常见的。在 v4 中 IndexRoute没了，然后不允许Route嵌套。

（3）在 v3 中，Router 的定义一般是全局的，所有的路由都在一个文件中定义；而在 v4 中Router可以出现在任何组件中。

（4）在 v3 中，你可以从params这个属性中取到URL 中传递过来的参数。比如我在 BlogLayout中获取bloggerID，这个属性在v4中不再被自动注入了，需要从match属性中获取。

（5）在v3中，我可以使用使用 Route的 onEnter, onUpdate和 onLeave事件来做一些事情。在v4中，Route的事件没了。解决的办法是使用withRouter 这个HOC (高阶组件)

看看我是怎么学习React17+Hook+TS4的   https://pan.baidu.com/s/16GwFh17fihySHvEVt02OkQ 提取码：86ir

————————————————
原文链接：https://blog.csdn.net/halations/article/details/84389261