我不知道您是否发现，因为版本升级越来越多。
在2019年初，该版本具有正式的能力。
2019年6月，您Yuxi提出了一项建议。我知道这实际上是一个版本。
它已经接一个地推出，所以今天我们将通过一种比较方式和平地学习。
在中国，我们可以使用或重复使用逻辑，可以使用它或重复逻辑。但是它们会有缺点。
例如，当引入大量组件时，请跟随同一名称和合并等多个问题，并且不利于我们的代码理解和问题调查。
例如，或者，渲染属性的传输和高端组件的嵌套包裹的层不利于理解和维护代码。
目前可以很好地解决
挂钩使您可以在不修改组件结构的情况下重复使用状态逻辑。这使得共享在组件或社区之间更方便。
在版本中，我们的简单业务代码将分散。例如，数据定义数据，方法定义方法，再次处理生命周期功能，依此类推。该代码将分散，这不利于维护和读取。一起。
组件有类似的问题。简单的业务代码将分散，可以在其中定义。生命周期函数再次处理。代码将分散，这不利于维护和阅读。相关逻辑代码的介绍是汇总的，并且代码可以更好地读取和维护。
好处是显而易见的：“高度聚集，增强可读性。”伴随着“提高效率，更少的错误”。
集中在这里。
它可能会更好，这是指当前示例，但是在函数等组件中通常需要一些问题。
但是在写作方法中，您根本不必担心它。写作告别问题。
副作用是指在数据转换过程中未发生的逻辑，例如请求，对本机元素的访问，本地持续缓存，绑定/解开事件，添加订阅，设置计时器，记录日志等。
过去，这些副作用写在类成分的生命周期函数中。
在React中，我们可以使用并替换类组件的生命周期函数。它将在所有渲染后执行，并且在浏览器后将执行。
React Hook是一项新功能。它允许您使用和其他特征而无需编译。
使用规则
让我们谈谈一些常用的。
在上一个版本中，我们知道功能组件不可用。拥有后，我们可以使用功能组件的状态。
它接收到一个参数，因为它的初始值返回一个数组，数组的第一个值是值，第二个参数用于设置值。
例如，下面的初始值为1。单击按钮后，将触发修改的值。
我们可以通过获得先前的值来获得先前的值。
成分
在功能组件中，但请注意，无法获得其回调函数。
获得该值后，我们知道它是异步的，有时我们需要获得修改值，但是并非专门处理以稍后获得最新值。
在组件中，我们可以通过回调函数和两种方式获得它，但是不支持功能组件USETATE。
同样，它们用于定义。它收到一种形状的方法以及初始方法，并返回当前和支持方法。可以说这是高级版本。
定制初始值const
上面的示例是，在开始时，当我们单击名称的左侧时，当我们单击右侧时，我们将在名称的右侧添加。
还有另一种传递初始值的方法，您可以选择最初创建初始初始值。到达此端，需要用作函数结果的第三个参数，以便将初始设置设置为。
const [state，display] = userEducer（还原，初始状态，init）;
当我们父亲的组件的初始值用于子组件时，这很有用。您还可以将初始值调用为初始值。
您可以看到，结合这三个功能。它可以弥补功能组件的缺点而没有生命周期的缺点。
接收两个参数，第二个参数是可选的。第一个参数是一个函数，第二个参数是依赖项项目（数组）。当依赖关系发生变化时，函数将重新打开。
初始化和更新时，在初始化组件并更新组件时将其调用。（任何导致组件更新的操作都会导致操作）。
类似于类组件
如果您只想在更改时更改，则可以通过依赖项。
当初始化和特定状态更新时，当组件初始化并且仅更改时，将调用此依赖关系。这与之相似。
有时可能会清除副作用（例如计时器，事件监视）。目前，我们可以在其中返回清晰的功能。
当更改依赖项并卸载组件时，清晰的功能运行。它不会首次运行。
例如，如果我们想实现计时器，则计时器统计信息没有更改。只要更改，时间就会重新计算。
当调用初始化和卸载时，如果我们不依赖，则只想在组件初始化和组件卸载时要调用？我们可以将第二个参数设置为并返回清除函数。
这等同于组件
使用Effect无法接收async作为回调函数接收的函数。要么返回可以消除副作用的函数，要么不会返回任何内容并返回。
因此，我们需要在接口请求背景数据时编写此内容。
与基本上相同，只有一个是异步执行的同步执行。
如何理解这句话？让我们看以下示例
因为它是异步执行的，所以首先呈现页面，然后变成flash。
总结
与效果类似，它可以用作性能优化。这是一个高端组件。函数组件和类组件都可以使用。
当我们使用它时，将继承相似的组件，并将自动执行性能优化。
但是，只有将情况确定是否是渲染的，但是可以针对目标。
我们还可以使用第二个参数来获得类似的自定义渲染效果。
第二个参数可以根据是否在同一更新中确定原始组件确定原始组件是否重新施用原始组件。这是一个返回值，证明了该组件不需要重新启动。它证明了需要重新启动组件。这与类组件完全相反。
备忘录：第二个参数返回未渲染的组件，并将组件返回渲染。
showscomponentupdate：返回组件渲染，并返回组件而无需渲染。
接受两个参数，第一个参数是一个函数，返回值用于生成保存值。第二个参数是数组。作为依赖项，数组中的依赖项会更改，重新执行第一个生成新值的函数。
我们可以使用缓存值来减慢值。使用它的学生应该知道，类似。
缓存组件类似于缓存组件，我们可以使用相似的功能。只需定义依赖项而不是那么智能（是否可以自动比较）。
优化的列表渲染效率是我们有一长串长列表时，组件更新长列表每次都会重新列表，我们可以直接使用它进行优化。
它与接收参数相同，并且在更改其依赖项项目后将执行。区别在于返回函数的功能，并返回函数。
让我们看一个例子
当我们使用回调方法时，每个点击触发方法将获得最新的和谐。
但是，当我们使用回调方法时，每次单击触发方法时，只有在更改时才会重新计算。更改不会触发，因此值可能不是最新的。
类似，您也可以缓存一些东西，并且可以进行一些性能优化和改进。
接收一个对象（返回值）并返回当前值。当前值取决于上部组件中当前组件的提议。
可以替换或获得保存的值。
在子组件中
在功能组件中使用
当然，我们也可以使用它来接收。此方法支持组件和功能组件，并且只有在有多个的情况下才能以这种方式接收。
它非常简单，用于在函数组件中创建作为函数。
成分
功能组件
不要认为它用于创建。它实际上具有可以缓存数据的重要功能。
我们知道，在组件中，可以在其中定义数据，并且组件刷新不重新打开，因此数据等同于缓存（我们的修改是有效的）。但是，在功能组件中，每个组件都会刷新，并且刷新了，并且重新打开了整个函数，因此我们定义的变量将再次初始化，以便无法缓存数据（我们的修改无效）。
您可以解决此问题，让我们以下面的示例来看一下。
在上面的示例中，每个单击按钮，修改后的值都会触发组件渲染。属性将始终在不使用缓存的情况下累积，但是如果使用缓存。
我们知道，对于子组件，如果是一种组件，我们可以获得类组件的实例，但是对于子组件中的函数组件，如果我们不能直接传递。
功能组件只能通过获得组件内的DOM元素来获得。如果要直接在组件上获取属性或方法，则仍然更糟。
我们可以将情况与自定义接触父部件使用。这可以实现相似组件的功能，以公开要暴露的属性或方法的返回值。
通过这种方式，我们可以访问我们在父组件中返回的对象，并且可以直接调用子组件中的方法。
有些人认为没有，但是我认为可以将其理解为一个版本。
该代码写在函数中，以便收集相关代码。不再使用选项写作，需要什么函数才能引入。
使用规则：只能在功能中使用。
让我们谈谈一些常用的。
接受内部值并返回响应和变量对象。只有一个对象，指向内部值。
通常用来定义基本类型的响应数据。注意到这里是平均的，并不是说REF不能定义参考类型的响应数据。
使用定义的响应数据将其在函数中使用，但可以直接在模板中使用。
这与它类似。
它用于定义参考类型的响应数据。注意它不能用于定义基本数据类型的响应数据，否则将报告错误。
定义的对象不能直接解构，否则将失去其响应。如果坚持使用，则需要使用它。
这与它类似。
较深的人将同时包装和维护。
如何理解此句子是使用响应对象的定义。内部的属性是可以无需直接分配的定义，并且数据的修改是响应速度的。
它是计算属性，这意味着它可以减慢值，并且仅在依赖关系属性更改时才会重新计算。
与内部类似。区别在于不需要显示依赖项。我认为这很棒。
立即执行引入的函数，同时，响应跟踪其依赖性，并在依赖更改时重新运行该函数。
如何理解该句子？也就是说，它将自动收集依赖项并且不需要手动传输。在更改中使用的数据时，它将自动触发。它将首先执行它以自动收集依赖项。在无法获得更改之前，只能获得更改后的值。
类似的区别在于不需要显示依赖项。我认为这很棒。
在上面的示例中，将首先执行输出27。当我们触发方法更改时，因为它取决于它，它将再次执行并输出28。
当调用组件或生命周期钩的功能时调用聆听时，侦听器将链接到组件的生命周期，并在卸载组件时自动停止。
在某些情况下，还可以明确调用返回值以停止听力：
清晰的副作用有时副作用的副作用会执行一些异步副作用，在失败时需要去除。发生以下情况，将触发此故障回调：
许多学生可能不了解的清晰副作用。以下作者使用一个示例来解释。
假设我们需要在框中输入关键字进行真实的时间搜索，并且我们不想太频繁地要求使用此功能。
上面的示例是依赖的，因此，只要我们输入输入值，我们就会立即输入。如果无法处理后端服务压力，则只要我们输入框值，请求就会发送请求。
我们可以使用删除副作用来回电，并在用户输入一秒钟后将请求发送到后端。由于首次未执行回调方法，仅在副作用为时才执行回调函数重新执行或卸载。
因此，当我们进入时，我们将始终输出。当我们停止输入一秒钟时，我们将输出，然后将请求发送到后端。这实现了我们的初始目标。
类似的人也可以应用于事件监控。这个小朋友可以自己尝试。
副作用的响应系统刷新侧面的时间将缓存副作用并异步刷新它们，以避免由相同“ tick”中多个状态变化引起的不必要的重复调用。在核心的特定实现中，组件的功能也是聆听的副作用。当用户定义的副作用函数进入队列时，默认情况下将在所有组件前执行。。
上面的示例，当我们触发方法修改时，将执行然后执行。
如果在更新组件后需要重新打开聆听设备的副作用，我们可以通过选项传递附加对象（默认对象）。
上面的示例，当我们触发方法修改时，将执行然后执行。
这些选项也被接受，这将始终同时触发。但是，这是低效的，不需要的。此参数意味着什么？许多学生可能不理解，在这里，我们重点关注解释。
当只有一个依赖项时，此参数也不是什么。。
让我们看一个例子
在上面的示例中，有两个依赖关系。当我们触发该方法时，如果该副作用被执行两次，则依次输出，...
如果您想更改每个依赖项，但不想设置，也可以使用等待的侦听器在下一步之前运行。
上面的示例将依次输出...
从一开始，我们还可以使用别名和方法，可以用来使代码意图更加明显。
watchposteffect是具有选项的别名。
watchsynceffect是一个具有选项的别名。
侦听器调试和选项可用于调试听众的行为。
这与生命周期功能有点相似，并且在第一次渲染时提到的函数，并且在数据更新时调用呼叫。
两个回调都将收到一个调试器事件，其中包含有关相关项目的信息。
并且只能在开发模式下工作。
您需要收听特定的数据源并在单独的回调函数中执行副作用。默认情况下，它也惰性 - 也就是说，当声音源更改时，调用了回调。
与以下特征相比
类似于内部。
听单来源
监视多个来源收听多个来源。我们使用数组。
在这里，我们需要注意，只要一个源在多个源中更改，将执行回调函数。
监视数据类型有时我们可能需要监视对象的更改，而不是特定属性。
上述写作是否有问题？当我们触发方法修改时，我们可以发现我们输出两个值相同。这是引用数据类型的坑。当我们不需要知道这一点时，这是可以的，但是当我们需要比较新的和旧价值时，这种写作方式。
我们需要监视此数据类型的此副本。当参考数据类型很简单时，我们可以直接求解新对象，但是当参考数据类型复杂时，我们需要使用深层副本。作者介绍了一篇文章，您可以自己编写深层复制方法或参考库。
输出值正确。
似乎没有办法解决这个问题。
除了对支持的内部监测外，还支持了停止，删除副作用，副作用刷新时机以及听众对支持的支持的调试。
通过自定义，可以将组件逻辑提取到可重复使用的功能中，并且两个支持风俗。
在下面，我们使用并实施自定义的鼠标点自定义。
自定义是建立的还是定制的。
没有强制性规则，随机。
使用
这是，如果您想实现此类函数，是否需要创建组件然后引用它？因为无法在普通JS中使用生命周期，因此无法在普通的JS函数中使用响应类型。
但是所有这些都可以实现，我们可以直接创建一个自定义逻辑来重复使用逻辑，类似于组件，难道不容易使用吗？（响应数据，生命周期功能，监视和其他方法的定义可以是用于普通JS，可大大提高重用效率。）
Vue和React学习生命周期函数的比较（VUE2，VUE3，旧版本React，新版本的React）
Vue和React比较组件分量（12种VUE2，9种VUE3和7种反应类型）
Vue和React风格
VUE和React Ref和插槽
感谢朋友们观看了病人，本文是作者的个人研究笔记。如果本文对您有所帮助，请同样喜欢??，您的支持是作者不断更新的动机！
原始：https：//juejin.cn/post/710301057736779789