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 函数 的相关文章

  • ReactJS - Redux Form - 如何根据单选字段元素有条件地显示/隐藏元素?

    我对 Redux 比较陌生 我有一个表单 其中有一些无线电输入 是 或 否 基本上 我想根据该无线电输入选择有条件地显示包含另一个 redux 表单字段的另一个元素 有直接的方法可以做到这一点吗 我想检查一下formProps site v
  • ReactJs 警告:不推荐使用改变“style”。考虑事先克隆它

    我收到以下警告 inWarning div was passed a style object that has previously been mutated Mutating style is deprecated Consider c
  • 可下载文件 - 盖茨比

    由于某种原因 尝试下载文件时失败 我尝试了几种不同的方法 但都失败了 我读过一些关于 pdf word 文件在盖茨比中被 禁止 的内容 默认 a href route to file a 好像不行 显示下载失败 任何帮助表示赞赏 See 将
  • Redux-saga 从操作中获取数据返回patternOrChannel 未定义

    我需要将动态数据从屏幕发送到操作 减速器 并使用该数据从 API 获取数据 但是当我在我的rootSaga我会收到这样的错误 在检查 take patternOrChannel 时未捕获 patternOrChannel 未定义未捕获在 r
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 如何正确更新反应钩子状态内的数组

    我一直在尝试更新代表反应状态的数组内的对象 当输入的值更改时应该更新该对象 我可以自己找到一种方法来更新它 但我不太确定这是正确的方法 因为当我打开反应开发工具并转到组件选项卡并单击我正在处理的组件时 在输入输入时状态不会立即更新 并且为了
  • React-redux useDispatch() 未捕获类型错误

    我正在尝试创建一个简单的组件来使用 React Redux 钩子分派操作useDispatch 我收到一个错误 我已将组件修剪到发生错误的位置 当调用 useDispatch 函数时会发生这种情况 import useDispatch fr
  • HTMLImageElement 作为 React Child 无效

    我正在尝试异步加载图像 并且仅在加载图像后才将其显示在 React 应用程序中 componentDidMount const img new Image img onload gt this setState originalImage
  • Angular 2在实例化子组件之前解析根组件

    当我刷新网络应用程序时 我希望它在实例化任何组件或路由之前请求潜在的登录用户数据 如果找到用户的数据 我想将其注入到我的所有其他子组件所依赖的服务中 场景 假设我有 3 个组件 应用程序 ROOT 主页和关于 如果我将此代码放在 About
  • 在vscode中使用reactjs报错

    在 Visual Studio 代码中使用 jsx 语法 Visual Studio代码报错 请帮我 谢谢 符号 例如 而不是这样做 return lt button className square gt TODO lt button g
  • React无限滚动scrollableTarget动态获取id?

    我在我的项目中使用react infinite scroll component 如何让scrollableTarget动态获取item id 我试过这样scrollableTarget item id 但它不起作用 必须与该 div 具有
  • React Native 反应导航 SafeArea 问题

    我更新了我的android项目 react navigation was 3 x 搬去5 x 决定实施必要的更改 但它不想工作 从反应导航页面复制了示例 但仍然显示相同的错误 有人知道问题出在哪里吗 当我用谷歌搜索一半的互联网时找不到解决方
  • × TypeError:无法读取未定义的属性(读取“map”)

    当我尝试运行此代码时 它给出了此错误 TypeError 无法读取未定义的属性 读取 map 为什么会发生这种情况 我怎样才能让它发挥作用 import React from react import Grid from material
  • React Context - Context.Consumer 与 Class.contextType

    我正在学习新引入的 React Context API 但我注意到它在示例中的消耗存在一些不一致 有的还是用原来的上下文 消费者HOC 方法 而有些 包括 React 文档 使用静态类 contextType method 有什么区别以及为
  • 禁用 Angular 2 中的按钮

    我想如果输入 合同类型 为空 则 保存 按钮不可点击 保存按钮 div class col md 4 div
  • 在设定的时间后从 DOM 中删除元素

    我正在尝试找出在事件触发后从 DOM 中删除元素的 React 方法 我正在尝试发出警报 copySuccess when onClick this props handleCopyFact 被触发 然后在 5 秒后淡出该警报 每个组件的状
  • 诊断 RangeError:React KeyEscapeUtils 中超出了最大调用堆栈大小

    背景 我们的 Web 应用程序是使用官方的 React Redux 绑定用 React 和 Redux 编写的 此网络应用程序中使用的另一个主要库是PaperJS http paperjs org 我们最近将其转变为 Redux 应用程序
  • 我应该如何实现将状态保存到 localStorage?

    CODE var React require react var Recipe require Recipe jsx var AddRecipe require AddRecipe jsx var EditRecipe require Ed
  • 如何为 React 组件参数创建文字类型?

    我创建了 SelectProps 界面 export interface SelectProps value string options string onChange value any gt void 我创建了反应组件
  • ‘state’未定义 no-undef

    我使用教程来学习 React 但我很快就陷入困境 在教程中 他们使用以下代码 import React Component from react class Counter extends Component state count 0 r

随机推荐

  • 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