render() 中的 React 函数

2023-12-23

在 React 组件中放置函数的位置是否有偏好?我仍在学习 React,所以只是想找出最佳实践。

class Content extends React.Component {
  // What is the difference between putting functions here such as 
  Hello() {

  }
  
  render() {
    // or here
    Hello() {

    }

    return() (
      <div>blah blah</div>
    );
  }
}

每次渲染都会创建渲染方法中的一个函数,这会对性能造成轻微影响。如果你把它们放在渲染中也会很混乱,这是一个更大的原因,你不应该在渲染中滚动代码来查看 html 输出。始终将它们放在课堂上。

对于无状态组件,最好将函数保留在主函数之外并传入 props,否则每次渲染也会创建该函数。我尚未测试性能,所以我不知道这是否是微优化,但值得注意。

Example:

const MyStatelessComponent = ({randomProp}) => (
    render() {
        doSomething(randomProp);

        return <div />
    }
);

doSomething = (randomProp) => {
    //Do something here
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

render() 中的 React 函数 的相关文章

  • 如何使用 useQuery 挂钩来填充其他挂钩中的状态?

    我最近一直在处理一些与钩子相关的问题 因为我一直在我的一个项目中实现钩子 我不断收到错误 渲染的钩子数量比上一次渲染期间的钩子数量多 看来我能让代码正常工作的唯一方法是将 useQuery 挂钩放在所有其他挂钩之后 然而 这是一个问题 因为
  • 我可以将 OverlappingMarkerSpiderfier 与 react-google-maps 一起使用吗?

    我正在开发一个使用react google maps https github com tomchentw react google maps https github com tomchentw react google maps 图书馆
  • ReferenceError:在玩笑测试中未定义 React

    我有以下行在浏览器中正确执行 eval Babel transform template presets react code 但是当我运行笑话测试时我得到ReferenceError React is not defined 我缺少什么
  • 如何在reactfire上启用持久性?

    我想使用以下方法在我的 PWA React 应用程序上实现 Firestore 离线持久性反应火 https github com FirebaseExtended reactfire图书馆 const firestore useFires
  • 将本地图像路径作为两个功能组件之间的 prop 传递

    我正在使用 React Native 开发一个项目 在该项目中我很难理解 props 在功能组件之间的工作原理 我的要求是创建一个可重用的按钮组件 我可以在其中传递项目内资源文件中的图像位置 这样它就会为我创建按钮 由于某种原因 如果我手动
  • ReactJS 在打字时延迟 onChange

    我需要更改状态以维护用户正在输入的字符串 但是我想延迟操作直到用户停止打字 但我不太清楚如何做到这两点 因此 当用户停止打字时 我希望触发一个操作 但不是在此之前 有什么建议么 使用 React Hooks 和 Function 组件 要保
  • eslint/prettier 在 html 标签中添加不需要的空间

    我正在尝试向我的项目添加配置 以便代码自动格式化 我对 VS Code 中的用户设置进行了一些更新 还安装了 eslint 和 prettier 现在 每当我尝试保存我的代码时 都会从中得到改变 div div div div div di
  • React router - 将路由上的 props 传递给子组件

    有人可以告诉我最好的方法吗 我想将页面标题道具从我的路线传递到我的标题子组件中 这是我的路线 var sampleApp React createClass render function return div div
  • 使用输入更新 redux 状态

    如何从文本输入更新 redux 状态 我正在尝试用文本输入做一个非常简单的 Hello World 当有人在文本输入中输入内容时 它应该更新我商店的 searchTerm 值 我无法弄清楚这些事情 1 如何获取输入的值并将其传递到其 onC
  • React Typescript:从文件输入获取文件

    我得到的错误是Property files does not exist on type ChangeEvent
  • “ReactNode”不是有效的 JSX 元素

    我有以下代码 代码沙箱 https codesandbox io s react typescript forked 50beyp file src App tsx import ComponentType ReactNode from r
  • 表单提交 ReactJS 时出现“类型错误:尝试获取资源时出现网络错误”

    我尝试在启用跨源的情况下从 API 获取一些数据 但收到此错误 同样的事情与JSON占位符 https jsonplaceholder typicode com 用于测试的在线 REST API 使用他们提供的示例 fetch https
  • React:如何从react-router-dom通过链接传递道具?

    我正在努力通过title从道具到我的Dishes组件使用但找不到解决方案 有什么建议么 import Link from react router dom const Category title gt return title expor
  • ReactTable 修复了最后一行

    我正在使用 ReactTable 最后我需要创建一些摘要 当分页存在时 它每次都应该可见 可以用react table来实现吗 我可以通过创建下一个表来部分解决这个问题 但我没有找到如何隐藏标题的方法 另一个问题是调整列宽度时 它不会应用于
  • 如果替换路径中的最后一个元素,React Router v6 useNavigate() 不会导航

    我有一个具有以下功能的反应组件 const handleNavigate clientId gt console log clientId navigate dashboard clients clientId console log 显示
  • 渲染作为 Prop 传入的 Component

    我怎样才能渲染一个StyledComponent它是作为道具传入的吗 我正在传递一个Spinner组件到我的BarComponent作为渲染的道具 我尝试使用 this props icon in my BarComponent在下面的示例
  • Material UI - 更改主题中的按钮文本颜色

    我在直接在 Material UI 主题中更改按钮文本颜色时遇到问题 更改主色 按钮字体大小效果很好 因此问题不在于传递主题 这是我的代码 import React from react import MuiThemeProvider cr
  • React Router v4 的优点

    除了能够在 NavLink 上设置 activeClassName 和 activeStyle 之外 还有什么理由使用NavLink over Link在您的网站上不需要活动状态 类的非导航元素 即不是页眉或页脚中的主导航 上创建指向其他路
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com

随机推荐

  • Scipy.optimize.l_bfgs_b:为什么它会多次计算相同的函数值?

    我目前正在尝试使用 scipy optimize 来查找尝试拟合某些数据的模拟参数 A 创建了一个函数 给出我的模型在数据上的卡方 以便 scipy optimize 必须最小化该函数 我进行模拟的主要问题之一是 因此被调用的函数非常耗时
  • Python无法导入DataFrame

    我正在尝试在 Python 中使用 Pandas 来导入和操作一些 csv 文件 我的代码是这样的 import pandas as pd from pandas import dataframe data df pd read csv h
  • Angular2 没有渲染器提供者! (NgModel -> 令牌 NgValueAccessor -> DefaultValueAccessor -> 渲染器)

    我在customModal ts中自定义模态shlomiassaf angular2 modal https github com shlomiassaf angular2 modal 具体来说 我添加一个包含ngModel的输入 它导入了
  • 将 MaterialToggleButton 的选定颜色更改为纯色

    无法将 MaterialToggleButton 的选定颜色设置为纯色 仅显示原色的透明阴影 我尝试了下面的代码集 输出图像如下所示 样式中的按钮主题
  • 使用 geom_sf 制作包含一组子区域的地图

    我想制作一张仅包含子区域组外部边界的地图 下面绘制了所有子区域 我想制作一张地图 但仅包含所在区域的外部边界region栏目中的spain目的 我尝试过几个aes like fill and group甚至在绘制之前进行分组但找不到正确的方
  • Android 解析 JSON 数组

    如何解析 JSON ARRAY 来获取没有 和 的数据 这是 json formattedAddress 23 Damansara Puchong Hwy Bandar Puchong Jaya 47100 Puchong Batu Dua
  • 设置 JQuery event.preventDefault() 时绕过 window.open 上的弹出窗口阻止程序

    我想在超链接的单击事件上有条件地显示 JQuery 对话框 我有一个要求 比如在条件 1 上打开一个 JQuery 对话框 如果条件 1 不满足 则导航到其点击事件有问题的 href 标记引用的页面 我可以在链接的点击事件上调用函数 该函数
  • 为什么我的 Scala 列表在以下代码中消失了?

    val files new File data list val filtered files filter name gt name contains txn val masterList new ListBuffer String fo
  • ISIN 至少有 1 个号码

    我有以下正则表达式来解析债券 资产等的 ISIN 2 个字符后跟 10 个数字和字符 A Z 2 A Z0 9 10 但这也标记了例如这样的单词ABCDEFGHIJKL 但这不是真正的 ISIN ISIN 的定义如下 WIKI https
  • 仅在加载 Google Web Font 后才绘制到画布

    我在用 fillText 在画布上 我希望其文本采用 Google Web 字体 在我的例子中为 Oswald 当页面加载时 文本在字体加载之前被绘制到画布上 但显然一旦字体加载 画布上的文本就不会更新 因为它已经被绘制为位图 如何延迟此文
  • 基于向量重叠从列表中删除和添加元素

    我有一个包含约 500 个模型对象的列表 该对象的名称是 v1 existing list lt vector list 3 v1 lt names existing list lt c A B C 我现在得到了不同的数据集 我也需要对其进
  • 实体框架 Code First 的 Spatial / DBGeography 属性索引

    我有一个 EF 6 1 代码优先项目 其模型之一具有 DbGeography 属性 仅包含 POINT 地理 我将对其执行查询 我声明自定义索引如下官方指南 http msdn microsoft com en us data jj5916
  • 使用 ES6 (Babel) 导出类

    我正在使用 ECMAScript 6 编写一些前端代码 使用 BabelJS 进行编译 然后使用 Browserify 进行浏览器化 以便我可以在一个文件中包含一个类 将其导出并将其导入到另一个文件中 我这样做的方式是 export cla
  • SearchView.isFocused 始终返回 false

    我正在尝试确定是否SearchViewActionBar 中的焦点 但当我打电话时SearchView isFocused 我总是得到false因此 即使视图真正聚焦 内部有光标 并且显示软键盘 我如何检查是否SearchView是否专注
  • 如何在测试期间对 Node.js 内置 fs 进行存根?

    我想存根 Node js 内置组件 例如fs这样我实际上就不会进行任何系统级文件调用 我唯一能想到的就是通过fs以及所有其他内置函数作为我所有函数的参数 以避免使用真正的 fs 这看起来有点愚蠢 并且创建了一个冗长的函数签名 里面挤满了内置
  • 如何将连字符后的第一个字母大写,即 Adam Smith-Jones

    我正在寻找一种将字符串的第一个字母大写的方法 包括名称由连字符连接的位置 例如 adam smith jones 需要是 Adam Smith Jones ucwords or ucfirst 如果我把它们分成名字和姓氏 只有亚当 斯密 琼
  • Rabbitmq:代理重启后未确认的消息不会消失

    我们观察到了 RabbitMQ 的以下行为 并试图了解它是否正确以及如何解决它 设想 持久 消息被传递到持久队列中 单个 消费者 Spring AMQP 获取消息并开始处理 gt 消息从 READY 变为 UNACK 现在代理已关闭 gt
  • 使用键值存储实现的图数据库

    我需要一个图形数据库 该数据库需要备份并可能在较低的抽象级别进行访问 为了负载平衡 它也必须是分布式的 单个主复制就可以 我知道可以使用自引用键值存储来实现图形数据库 Git 对象数据库就是这种模式的一个示例 我发现大多数图数据库令人沮丧的
  • 使用Python的h5py包读取hdf文件时出错

    我想从我下载的 hdf 文件中提取数据 MODIS http modis atmos gsfc nasa gov MOD08 M3 acquiring html网站 链接中提供了示例文件 我正在使用以下代码行读取 hdf 文件 gt gt
  • render() 中的 React 函数

    在 React 组件中放置函数的位置是否有偏好 我仍在学习 React 所以只是想找出最佳实践 class Content extends React Component What is the difference between put