weixin_50367873的博客

近期，知名 React 拖拽库宣布了项目弃用的决定，未来将不再维护。这一决定源于其存在的缺陷与局限性，促使作者转向开发一个更加现代化的拖拽解决方案——（下面会介绍），其旨在提供更佳的性能、灵活性和可访问性。作为 React 生态中不可或缺的工具库，react-beautiful-dnd 曾以其卓越的拖放体验赢得了广泛赞誉，其 npm 周下载量高达 163 万次。

react在16版本之后，加入了fiber架构，官方推荐使用纯函数组件，为此react-hook应运而生。

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

组件从概念上看就是一个函数，可以接受一个参数作为输入值，这个参数就是。具有单向数据流的特性，所以他的主要作用是从父组件向子组件中传递数据。一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是。的核心思想就是组件化思想，页面会被切分成一些独立的、可复用的组件。在内部不可变的，如果想要改变它看，只能通过外部组件传入新的。来改变，从而达到更新组件内部数据的作用，并且重新调用组件。还可以接受第二个参数，它是一个函数，会在。当需要修改里面的值的状态需要通过调用。来重新渲染子组件，否则子组件的。

真实DOM 和 虚拟DOM 的区别

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

collected：一个对象，包含从collect函数收集的属性，如果collect未定义函数，则返回一个空对象；collected：一个对象，包含从collect函数收集的属性，如果collect未定义函数，则返回一个空对象；end方法的调用时机晚于drop的调用时机，所以只有在end中做释放后的数据处理才能保证系统的正确性，如果在drop中就更新state或React redux中数据，会引发错误；必须，一个字符串，此放置目标将仅对于指定类型的拖动源产生的项目作出反应；

虚拟 DOM （）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（和Weex实际上它只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别创建虚拟。

如果你熟悉 React class 的生命周期函数，你可以把useEffectHook 看做(挂载完成)，(更新完成) 和（即将销毁前） 这三个函数的组合。Did : 做了… Will: 将要…。不管你知不知道这些操作，或是“副作用”这个名字，应该都在组件中使用过它们。在 React 组件中有两种常见副作用操作：**需要清除的 **和。我们来更仔细地看一下他们之间的区别。

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

React是用于构建用户界面的，帮助我们解决渲染DOM的过程而在整个应用中会存在很多个组件，每个组件的state是由自身进行管理，包括组件定义自身的state、组件之间的通信通过props传递、使用Context实现数据共享如果让每个组件都存储自身相关的状态，理论上来讲不会影响应用的运行，但在开发及后续维护阶段，我们将花费大量精力去查询状态的变化过程这种情况下，如果将所有的状态进行集中管理，当需要更新状态的时候，仅需要对这个管理集中处理，而不用去关心状态是如何分发到每一个组件内部的redux。

在单页应用中，一个web项目只有一个html页面，一旦页面加载完成之后，就不用因为用户的操作而进行页面的重新加载或者跳转，其特性如下：改变 url 且不让浏览器像服务器发送请求在不刷新页面的前提下动态改变浏览器地址栏中的URL地址。

react-router-native：基于 react-router，加入了 react-native 运行环境下的一些功能。react-router-dom： 基于 react-router，加入了在浏览器运行环境下的一些功能。作为顶层组件包裹其他组件后,页面组件就可以接收到一些路由相关的东西，比如。组件的作用适用于当匹配到第一个组件的时候，后面的组件就不应该继续匹配。等前端路由的原理大致相同，可以实现无刷新的条件下切换显示不同的页面。用于路由的重定向，当这个组件出现时，就会执行跳转到对应的。

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

组件式开发选择合适的css解决方案尤为重要在这一方面，vue使用css而在react中，引入CSS就不如Vue方便简洁，其引入css的方式有很多种，各有利弊。

新版生命周期整体流程如下图所示：旧的生命周期流程图如下：其实这三个方法仍然存在，只是在前者加上了UNSAFE_前缀，如，并不像字面意思那样表示不安全，而是表示这些生命周期的代码可能在未来的react版本可能废除。

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

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

组件式开发选择合适的css解决方案尤为重要在这一方面，vue使用css而在react中，引入CSS就不如Vue方便简洁，其引入css的方式有很多种，各有利弊。

在前面文章了解中，我们了解到redux是用于数据状态管理，而react是一个视图层面的库如果将两者连接在一起，可以使用官方推荐库，其具有高效且灵活的特性通过redux将整个应用状态存储到store中，组件可以派发dispatch行为action给store其他组件通过订阅store中的状态state来更新自身的视图。

高阶函数（Higher-order function），至少满足下列一个条件的函数在React中，高阶组件即接受一个或多个组件作为参数并且返回一个组件，本质也就是一个函数，并不是一个组件上述代码中，该函数接受一个组件作为参数，返回加工过的新组件高阶组件的这种实现方式，本质上是一个装饰者设计模式。

受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据这时候当我们在输入框输入内容的时候，会发现输入的内容并无法显示出来，也就是input标签是一个可读的状态这是因为value被所控制住。当用户输入新的内容时，并不会自动更新，这样的话input内的内容也就不会变了如果想要解除被控制，可以为input标签设置onChange事件，输入的时候触发事件函数，在函数内部实现state的更新，从而导致input框的内容页发现改变因此，受控组件我们一般需要初始状态和一个状态更新事件函数。

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

类组件，顾名思义，也就是通过使用ES6类的编写形式去编写组件，该类必须继承如果想要访问父组件传递过来的参数，可通过this.props的方式去访问在组件中必须实现render方法，在return中返回React。

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

跟上述方式三一样，能够避免在renderrender() {return (