jjzjj

关于 javascript：React 生命周期方法(如 componentWillReceiveProps)的典型用例是什么

codeneng 2023-03-28 原文

What are typical use cases for React lifecycle methods like componentWillReceiveProps

componentWillReceiveProps 和其他生命周期方法似乎具有欺骗性的诱惑，给没有经验的 React 编码人员手中的代码带来不必要的复杂性和噪音。它们为什么存在？他们最典型的用例是什么？在不确定的时刻，我怎么知道答案是否在生命周期方法中？

我已经使用 react 几个月了，我的大部分工作都是从头开始创建一个大型应用程序。所以同样的问题一开始就出现了。

以下信息基于在开发过程中学习并查阅了多个文档以使其正确。

正如问题中所问的，这里是 react

中生命周期方法的几个用例

  • componentWillMount()

    • 如果存在服务器端渲染，则在服务器端调用一次，然后在客户端调用一次。
    • 我个人使用它只是为了执行对组件没有直接影响的 api 调用，例如获取 oAuth 令牌

  • componentDidMount()

    • 此函数主要用于调用 API(这就是为什么在 componentDidMount 而不是在 componentWillMount 中调用它的原因)
    • 基于父母传递的道具的组件 state 初始化。

  • componentWillReceiveProps(nextProps,nextState)

    • 除第一次渲染外，每次收到道具时都会调用此函数
    • 我遇到的最常见的用途是更新我当前组件的状态，而我在 componentWillUpdate 中无法做到这一点。

  • shouldComponentUpdate(nextProps, nextState)

    • 当接收到新的道具或状态时，在渲染发生之前调用此方法。如果不需要重新渲染，这里我们可以返回 false。
    • 我认为这是一个性能优化工具。在频繁重新渲染父组件的情况下，应该使用此方法来避免对当前组件进行不必要的更新

  • componentWillUpdate(nextProps,nextState)

    • 每次更新组件时调用此函数，组件挂载时不调用
    • 在这里进行任何数据处理。例如，当 api fetch 返回数据时，将原始数据建模为要传递给子级的 props
    • this.setState() 在这个函数中是不允许的，它是在 componentWillReceiveProps 或 componentDidUpdate 中完成的

  • componentDidUpdate(prevProps,prevState)

    • 在将更改推送到 DOM 后立即调用
    • 每当所需数据不在第一次渲染时(等待 api 调用通过)并且需要根据收到的数据更改 DOM 时，我都会使用它
    • 例如，根据收到的年龄向用户显示他是否有资格申请活动

  • componentWillUnmount()

    • 正如官方文档所提到的，组件中使用的任何事件侦听器或计时器都将在此处清理

    • In the moment of uncertainty, how would I know if the answer lies in
    the lifecycle methods?

    我建议什么类比

  • 在组件本身中触发更改

    • 示例，在单击编辑按钮时启用字段编辑
    • 同一组件中的功能改变状态不涉及生命周期功能

  • 变化是在组件外部触发的

    • 示例，api调用完成，需要显示接收到的数据
    • 取胜的生命周期方法。

    • 这里还有一些场景 -

  • state/props 的变化是否需要修改 DOM？

    • 例如，如果当前电子邮件已经存在，则给输入类一个错误类。
    • componentDidUpdate

  • 状态/道具的变化是否需要更新数据？

    • 例如，父容器在 api 调用后格式化接收到的数据并将格式化的数据传递给子容器。
    • componentWillUpdate

  • 传递给孩子的道具改变了，孩子需要更新

    • 例子，
    • shouldComponentUpdate

  • 添加事件监听器

    • 例如，根据窗口大小添加一个监听器来监控 DOM。
    • componentDidMount
    • 'componentWillMount' , 销毁监听器

  • 调用api

    • 'componentDidMount'

    • 来源 -

  • 文档 - https://facebook.github.io/react/docs/component-specs.html
  • 这篇 scotch.io 文章清除了生命周期概念
  • 事件监听器 - https://facebook.github.io/react/tips/dom-event-listeners.html

    • 最常用的生命周期方法的一些典型用例：

    componentWillMount：在初始渲染之前调用。用于进行 AJAX 调用。例如，如果您需要获取用户信息来填充视图，这是一个很好的地方。如果您确实有 AJAX 调用，最好在 AJAX 调用完成之前呈现一个不确定的加载栏。我还使用 componentWillMount 调用 setInterval 并在页面呈现之前禁用 Chrome 的拖放功能。

    componentDidMount：在组件渲染后立即调用。如果您需要访问 DOM 元素，这很有用。例如，我用它来禁用复制和粘贴到密码输入字段。如果您想知道组件的状态，非常适合调试。

    componentWillReceiveProps：当组件接收到新的 props 时调用。用于在不重新渲染的情况下使用新道具设置状态。

    componentWillReceiveProps 是更新生命周期方法的一部分，在渲染开始之前被调用。最明显的例子是当新的道具被传递给组件时。例如，我们有一个 Form 组件和一个 Person 组件。表单组件有一个允许用户通过输入来更改名称的单一组件。输入绑定到 onChange 事件并设置表单上的状态。然后将状态值作为道具传递给 Person 组件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    import React from 'react';
    import Person from './Person';

    export default class Form extends React.Component {
      constructor(props) {
        super(props);
        this.state        = { name: '' } ;
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(event) {
        this.setState({ name: event.currentTarget.value });
      }

      render() {
        return (
         
            <input type="text" onChange={ this.handleChange } />
            <Person name={ this.state.name } />
         
        );
      }
    }

    任何时候用户输入 this 都会开始更新 Person 组件。在 Component 上调用的第一个方法是 componentWillReceiveProps(nextProps) 传入新的 prop 值。这使我们能够将传入的道具与我们当前的道具进行比较，并根据值做出合乎逻辑的决策。我们可以通过调用 this.props 来获取当前的 props，新值是传递给方法的 nextProps 参数。

    componentWillReceivePropsjavascriptspanclasslireactjsuser-interfaceweb

    有关关于 javascript：React 生命周期方法(如 componentWillReceiveProps)的典型用例是什么的更多相关文章

    1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

      我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

    2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

      总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

    3. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

      类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

    4. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

      我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

    5. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

      我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

    6. Ruby 方法() 方法 - 2

      我想了解Ruby方法methods()是如何工作的。我尝试使用“ruby方法”在Google上搜索，但这不是我需要的。我也看过ruby​​-doc.org，但我没有找到这种方法。你能详细解释一下它是如何工作的或者给我一个链接吗？更新我用methods()方法做了实验，得到了这样的结果:'labrat'代码classFirstdeffirst_instance_mymethodenddefself.first_class_mymethodendendclassSecond使用类#returnsavailablemethodslistforclassandancestorsputsSeco

    7. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

      我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

    8. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

      我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

    9. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

      为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

    10. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

      我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

    随机推荐