jjzjj

javascript - react Hook : What/Why `useEffect` ?

coder 2024-05-15 原文

关于新提出的React Effect Hook ;

  1. Effect Hook (useEffect()) 有哪些优点和用例？

  2. 为什么它会更可取？它与 componentDidMount/componentDidUpdate/componentWillUnmount(性能/可读性)有何不同？

文档指出:

Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase).

但我认为将这些行为放在生命周期方法(如 componentDidUpdate 等)而不是渲染方法中已经是常识。

还有提到:

The function passed to useEffect will run after the render is committed to the screen.

但这不正是 componentDidMount 和 componentDidUpdate 所做的吗？

最佳答案

  1. What are the advantages and use cases of the Effect hook (useEffect())?

    优势

    主要是，钩子(Hook)通常可以提取和重用跨多个组件通用的有状态逻辑，而无需高阶组件或渲染 Prop 的负担。

    第二个好处(尤其是 Effect hooks)是避免了如果在 componentDidUpdate 中没有正确处理依赖于状态的副作用可能会出现的错误(因为 Effect hooks 确保这些副作用在每个渲染器上设置和拆除)。

    另请参阅下文详述的性能和可读性优势。

    用例

    任何使用生命周期方法实现有状态逻辑的组件——Effect Hook 是一种“更好的方式”。

  2. Why would it be preferable & how does it differ over componentDidMount/componentDidUpdate/componentWillUnmount (performance/readability)?

    为什么它更可取

    由于上文和下文详述的优点。

    它与生命周期方法有何不同

    性能

    效果 Hook —

    • 感觉比生命周期方法响应更快，因为它们不会阻止浏览器更新屏幕；
    • 但是会在每个渲染上设置和拆除副作用，这可能很昂贵......
    • …因此可以优化为完全跳过，除非已更新特定状态。

    可读性

    效果 Hook 导致:

    • 更简单且更易于维护的组件，因为能够将以前必须在同一组生命周期方法中表达的不相关行为拆分为每个此类行为的单个 Hook - 例如:

      componentDidMount() {
  prepareBehaviourOne();
  prepareBehaviourTwo();
}

componentDidUnmount() {
  releaseBehaviourOne();
  releaseBehaviourTwo();
}

      变成:

      useEffect(() => {
  prepareBehaviourOne();
  return releaseBehaviourOne;
});

useEffect(() => {
  prepareBehaviourTwo();
  return releaseBehaviourTwo;
});

      请注意，与 BehaviourOne 相关的代码现在与与 BehaviourTwo 相关的代码明显分开，而之前它混合在每个生命周期方法中。

    • 样板文件更少，因为消除了在多个生命周期方法中重复相同代码的需要(例如在 componentDidMount 和 componentDidUpdate 之间很常见)—例如:

      componentDidMount() {
  doStuff();
}

componentDidUpdate() {
  doStuff();
}

      变成:

      useEffect(doStuff); // you'll probably use an arrow function in reality

关于javascript - react Hook : What/Why `useEffect` ?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53051465/

javascriptuseEffectcodecomponentDidUpdateblockquotereactjsreact-hooks

有关javascript - react Hook : What/Why `useEffect` ?的更多相关文章

  1. Ruby 元类 : why three when defined singleton methods? - 2

    让我们计算MRI范围内的类别:defcount_classesObjectSpace.count_objects[:T_CLASS]endk=count_classes用类方法定义类:classAdefself.foonilendend然后运行:putscount_classes-k#=>3请解释一下，为什么是三个？ 最佳答案 查看MRI代码，每次你创建一个Class时，在Ruby中它是Class类型的对象，ruby会自动为这个新类创建“元类”类，这是另一个单例类型的Class对象。C函数调用(class.c)是:rb_define

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - what is - gets is a directory - 错误信息 - 2

    我遇到了这个奇怪的错误.../Users/gideon/Documents/ca_ruby/rubytactoe/lib/player.rb:13:in`gets':Isadirectory-spec(Errno::EISDIR)player_spec.rb:require_relative'../spec_helper'#theuniverseisvastandinfinite...itcontainsagame....butnoplayersdescribe"tictactoegame"docontext"theplayerclass"doit"musthaveahumanplay

  4. ruby 代码 : why put colon in front of variable name (inside initialize method) - 2

    我遇到了一些Ruby代码，我试图理解为什么变量在initialize方法声明中的名称末尾有冒号。冒号有什么原因吗？attr_reader:var1,:var2definitialize(var1:,var2:)@var1=var1@var2=var2end 最佳答案 那些是关键字参数。您可以按名称而非位置使用它们。例如ThatClass.new(var1:42,var2:"foo")或ThatClass.new(var2:"foo",var1:42)Anarticleaboutkeywordargumentsbythoughtbot

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  7. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  8. ruby - 异常 : why does adding parenthesis change anything? - 2

    关于Ruby如何处理内联错误处理程序，我想了解一些事情案例一这是一个常见的用例deffooraiseErrorendbar=foorescue1#=>1bar#=>1它按预期工作。表达式foorescue1返回1并正确分配给bar。案例二Ruby允许解构数组，所以这种行为看起来很奇怪。baz='a'baz,bar=foorescue[1,2]#=>[1,2]baz#=>'a'bar#=>nil表达式返回数组[1,2]但不解构或分配它。它完全跳过了分配。案例三但是，当您将错误括在括号中时，解构就起作用了。baz,bar=(foorescue[1,2])#=>[1,2]baz#=>1bar

  9. ruby-on-rails - rails 2.3.8， ruby 1.8.6 : Getting a visual call tree/graph of what methods call what? - 2

    我有一个中等复杂度的Rails应用程序。主Controller(执行应用程序所要做的事情的Controller)只有一个操作方法。(它不是标准的RESTful应用程序；它充当中介，并且对其调用方式有外部限制。)但是，它确实有很多方法和一些过滤器，以及一个不断增长的测试套件。随着时间的推移，结构发生了很大变化，我不再相信为之前编写的测试设置的某些Mocha期望仍然合适。有多个人在开发该应用程序，因此我正在构建一本用于编写功能测试的指南。“当你想在有/没有[那些]副作用的情况下进行测试时，使用[这些]期望和断言”等等。调用树/图在编写此类文档时非常有用。除了过滤器之外，这些甚至可以静态地从

  10. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

随机推荐