首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React:我想做一个函数,每次点击时都会用onClick呈现一个新的组件

React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式,使得开发者可以将界面拆分成独立的、可复用的组件,从而提高代码的可维护性和可重用性。

对于你的需求,你可以创建一个函数组件,并在每次点击时使用onClick事件来呈现一个新的组件。下面是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  const renderComponent = () => {
    switch (count) {
      case 0:
        return <Component1 />;
      case 1:
        return <Component2 />;
      case 2:
        return <Component3 />;
      // 添加更多的组件呈现逻辑
      default:
        return null;
    }
  };

  return (
    <div>
      <button onClick={handleClick}>点击</button>
      {renderComponent()}
    </div>
  );
}

function Component1() {
  return <div>组件1</div>;
}

function Component2() {
  return <div>组件2</div>;
}

function Component3() {
  return <div>组件3</div>;
}

export default App;

在上面的代码中,我们使用useState钩子来创建一个名为count的状态变量,并使用setCount函数来更新它。每次点击按钮时,count的值会增加1。根据count的值,我们在renderComponent函数中返回不同的组件。你可以根据需要添加更多的组件呈现逻辑。

这里没有提及具体的腾讯云产品,因为React是一个与云计算无关的前端开发库,不直接涉及云计算领域的产品。但是,你可以在使用React开发的应用程序中集成腾讯云的其他产品,例如腾讯云的对象存储服务 COS(https://cloud.tencent.com/product/cos)用于存储和管理应用程序的静态资源。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Web 性能优化:缓存 React 事件来提高性能

当我赋值 object3 = object1 将 object3 值赋值为 object1 地址,它不是一个对象。.../> ) } } 这是一个非常简单组件。 有一个按钮,当它被点击,就 alert。...这里所发生是,每当重新渲染 SomeComponent 组件(例如 do 从 true 切换到 false),按钮也会重新渲染,尽管每次 onClick 方法都是相同,但是每次渲染都会被重新创建。...每次渲染,都会在内存中创建一个函数(因为它是在 render 函数中创建),并将对内存中新地址引用传递给 ,虽然输入完全没有变化,该 Button 组件还是会重新渲染。...所述方法将在第一次使用值调用它创建该值唯一函数,然后返回该函数。以后对该方法所有调用都不会创建一个函数;相反,它将返回对先前在内存中创建函数引用。

2.1K20

React性能优化 -- 利用React-Redux

由于每个React组件逻辑都有自己特点,所以需要根据组件逻辑来定制shouldComponentUpdate函数行为. ?...组件需要自己写逻辑是不是太麻烦了 问题一: 关于这个问题,在前一篇文章其实已经作答,使用React Pref,或者why-did-you-update都可以找到无需被重新渲染组件,这个组件就是需要使用...例如: 这样每次传入进来style都是一个对象,所以即使里面的值相等,react-redux浅比较仍然认为它不等需要重新渲染。...这里一个onClick都是一个函数,即使Todo被装备了shouldComponentUpdate实现,浅比较时候props总是不相等,依旧躲不过每次更新都要被重新渲染命运。...(ownProps.id) }) 方法二: 直接让TodoList不要给todo传递任何函数类型prop,点击事件完全由todo组件自己搞定。

1K10

优化 React APP 10 种方法

函数占用大量CPU,我们将看到在每次重新渲染都会调用该函数React将不得不等待其完成才能运行其余重新渲染算法。...由于Redux实行不变性,这意味着每次操作分派都会创建对象引用。这将影响性能,因为即使对象引用发生更改但字段未更改,也会在组件上触发重新渲染。...这里引用之前博客内容: React.lazy是Reactv16.6发布添加到React新功能,它为延迟加载和代码拆分React组件提供了一种简单明了方法。...传递了箭头函数声明,因此,每当呈现App,总是使用引用(内存地址指针)创建函数声明。因此,React.memo浅表比较将记录差异,并为重新渲染提供批准。 现在,我们如何解决这个问题?...setState每次调用都会创建状态对象,所以严格相等运算符将看到不同内存引用并触发组件重新呈现

33.8K20

手把手教你全家桶之React(二)

前言 上一篇已经讲了一些react基本配置,本遍接着讲热更新以及react+redux配置与使用。 热更新 我们在实际开发,都有用到热更新,在修改代码后,不用每次重启服务,而是自动更新。..._test()}>点击!...我们公共组件放在了src/components文件目录下,业务组件放在src/pages目录下。在webpack中,提供一个别名配置,让我们无论在哪个位置下,通过别名从对应位置去读取文件。...正常我们去发起一个请求,给用户呈现大概步骤如下: 页面加载,请求发起,出现loading效果 请求成功,停止loading效果,data渲染 请求失败,停止loading效果,返回错误提示。...为了让action可以返回函数,我们需要装依赖redux-tuhnk。

1.3K30

手把手教你全家桶之React(二)

前言 上一篇已经讲了一些react基本配置,本遍接着讲热更新以及react+redux配置与使用。 热更新 我们在实际开发,都有用到热更新,在修改代码后,不用每次重启服务,而是自动更新。..._test()}>点击!...我们公共组件放在了src/component文件目录下,业务组件放在src/pages目录下。在webpack中,提供一个别名配置,让我们无论在哪个位置下,通过别名从对应位置去读取文件。...正常我们去发起一个请求,给用户呈现大概步骤如下: 页面加载,请求发起,出现loading效果 请求成功,停止loading效果,data渲染 请求失败,停止loading效果,返回错误提示。...为了让action可以返回函数,我们需要装依赖redux-tuhnk。

1.7K80

教你如何在 React 中逃离闭包陷阱 ...

当你点击组件 "完成" 按钮,就会触发这个回调。如果你想在点击提交表单数据。这也很简单:只需将 title 和 onClick 这两个 props 传递给它即可。...我们只是创建了一个名为 cache 外部变量,并将内部函数分配给 cache.current 属性。然后,我们就不会再每次重新创建这个函数了,而是直接返回已经保存值。...然后,我们把它保存在 something 函数之外一个对象中。 当我们下一次调用 something 函数,我们将返回之前创建闭包,而不是创建一个带有闭包函数。...={onClick} /> ); }; 每次点击按钮,都会打印 "undefined" 。...an empty ref const ref = useRef(); }; 为了让函数能够访问最新状态,每次重新渲染需要重新创建函数,这是无法避免,这也是闭包本质,与 React 无关。

53440

超性感React Hooks(五):自定义hooks

思维,当我们点击, 1.得到数组A,2.执行一次equalArr方法,得到比较结果,3.然后再处理结果。 而思维,当我们点击,我们只关注数组A变化!...想想函数组件一个特殊性:每次state改变,整个函数都会重新执行一次。...全都得益于state改变,引发函数组件重新执行这一特性。 3 自定义hook能够跟随函数组件重复执行,并且每次返回最新结果。因此,我们可以非常放心大胆封装异步逻辑。...还记得我们刚才说到思维方式吗?当我们想要刷新,我们只需要修改一个state状态值,让函数重新执行一次就可以了。根据此时场景,引入一个loading状态,就可以简单达到我们目的。...1.在原始宽度基础上+10px2.给元素div设置宽度值 而React点击事件呢?只关注一件事儿,那就是数据!

1.3K30

组长指出了使用react常犯错误

背景 年底了,换了项目组,项目组使用react,从vue到react只花了一天时间,看了官方简单文章之后,就觉得这玩意很简单啊,比起vue那么api来说,这根本没有学习成本好吧,十分迅速就进入了...react项目开发,并且洋洋得意,根据我多年经验来看,这波肯定会得到领导赏识 很快,就做完了需求,把代码提交上去,组长可能确实比较闲,还review了代码,并且指出了一系列问题,并告诉说学习...react最难部分,并不是知道怎么使用它,而是要知道怎么能够编写良好,干净react代码 主要给我提了六点错误,相信在座各位,可能需要对号入座 在不需要使用state时候使用state 涉及到项目中代码逻辑...这种在页面上呈现内容需要使用,比如一个计数器 export default function App() { const [count, setCount] = useState(0); const... ); } 表面看着没有问题,点击加减也挺正常,但是如果你是熟悉useState的话,你也会给setCount传递一个函数形式,这两者表现形式似乎完全一样

87830

React ref & useRef 完全指南,原来这么用!

实例:记录按钮点击 组件logbuttonclicked使用了一个引用来存储按钮点击次数: import { useRef } from 'react'; function LogButtonClicks...; return Click me; } 每次点击,你会在控制台中看到“I rendering !”’...——这意味着每次状态更新组件都会重新呈现。 所以,state和references之间两个主要区别是: 更新 state 会触发组件重新呈现,而更新 ref 则不会。...此外,如果组件在秒表处于活动状态卸载,useEffect()清理函数也将停止计时器。 在秒表示例中,ref用于存储基础架构数据—活动计时器id。...引用对象有一个属性current:可以使用该属性读取引用值,或更新引用。reference.current = newValue。 在组件重新呈现之间,引用值是持久

6.4K20

精读:10个案例让你彻底理解React hooks渲染逻辑

,子组件Demo都会重新render: 总结:父组件(hook)每次更新,都会导出一个state和value对象,子组件肯定会更新(如果不做特殊处理) ---- 场景二,父组件使用hooks,子组件使用...** 官方对useCallback解释: 就是返回一个函数,只有在依赖项发生变化时候才会更新(返回一个函数) 结论: 我们声明handleClickButton1是直接定义了一个方法,这也就导致只要是父组件重新渲染...(状态或者props更新)就会导致这里声明出一个方法,方法和旧方法尽管长一样,但是依旧是两个不同对象,React.memo 对比后发现对象 props 改变,就重新渲染了。...但是结果每次组件修改了value值后,虽然子组件没有依赖value,而且使用了memo包裹,还是每次重新渲染了 import React from 'react'; const Button =...hook组件更新,那么hook就会导出一个count,const 就会声明一个obj对象,即使用了memo包裹,也会被认为是一个对象。。

93120

React Hooks 万字总结

更符合 FP 理解, React 组件本身定位就是函数一个吃进数据、吐出 UI 函数 常用 hook useState const [state, setState] = useState...返回 ref 对象在组件整个生命周期内保持不变 解决引用问题--useRef 会在每次渲染返回同一个 ref 对象 解决一些 this 指向问题 对比 createRef -- 在初始化阶段两个是没区别的...useRef 创建 ref 仿佛就像在函数外部定义一个全局变量,不会随着组件更新而重新创建。...但组件销毁,它也会消失,不用手动进行销毁 总结下就是 ceateRef 每次渲染都会返回一个引用,而 useRef 每次都会返回相同引用 useMemo const memoizedValue =...useMemo 差不多,是专门用来缓存函数 hooks // 下面的情况可以保证组件重新渲染得到方法都是同一个对象,避免在传给onClick时候每次传不同函数引用 import React,

92420

这届面试官,不讲武德

最近React源码群里有个同学去大厂面试被问到一道经常在各种面经中出现问题: ? 据说标准答案是:React是异步更新,依据是: 触发如下点击事件后console.log打印结果不是1。...我们可以用一个公式描述React: UI = f(state) 视图(UI)可以表示为状态(state)通过某个函数(f)映射。...其中: UI是反映页面的DOM树 f是React内部运行流程 state是状态集合 从公式可以看出,每次调用this.setState,整个React应用会执行一遍更新流程,将状态映射为视图。...只不过恰巧在映射过程中,这个组件state改变,所以组件对应视图会映射为视图。 最终表现为:视图其他部分不变,该组件视图更新。 从这个角度看,这道面试题就完全没有意义了。...既然每次更新都是整个视图层面,而不是某个组件,那么更新是同步还是异步无所谓了。 毕竟对组件操作完全应该在各个生命周期函数(或者hooks)中进行。

54520

提示可能你react函数组件从来没有优化过React.memome

当到了C组件时候,会浅比较C组件前后props值。如果props每一个属性值一样,会跳过函数组件C执行,减少了不必要渲染,达到了性能优化。..., prevProps) => { // 做我们想做事情,类似shouldComponentUpdate }) 复制代码 函数组件中传入props值为函数 我们知道,js中函数不是简单数据类型...onClick是做同一个事情函数前提下,不比较onClick React.memo(C, (nextProps, prevProps) => nextProps.a === prevProps.a)...(() => {}, []); // 依赖a,重新执行函数组件,a不变,是同一个函数 // a变了handleClick是函数 const handleClick1 = useCallback(...) => , deps) 复制代码 最后 有如下组件,Big是一个10w个节点组件,每一个节点绑定事件 const handleClick = useCallback(() => {},

87520

深入了解 useMemo 和 useCallback

这里有一个视角转换:之前,我们在记忆一个特定计算结果,计算质数。然而,在本例中,记住了整个组件。无论哪种方式,只有当用户选择一个 selectedNum ,昂贵计算才会重新运行。...每次调用 getNumbers 函数,我们都会创建一个全新数组,它是保存在计算机内存中一个不同东西。如果我们多次调用它,我们将在内存中存储该数组多个副本。...当我们渲染它,我们调用那个函数: // 每次渲染这个组件,我们调用这个函数… function App() { // 最后创造了一个全新数组 const boxes = [ { flex...,每次生成一个相同但唯一函数。...这个按钮大大增加了计数,以防你很匆忙,不想多次点击标准按钮。 多亏了 React.memo, MegaBoost 组件一个组件。它不依赖于计数,但每当计数改变它就会重新呈现

8.8K30

前端单测,为什么不要测 “实现细节”?

每次改点东西,测试都会崩!—— 心声 一旦测试代码写得不好,会严重拖垮你开发效率。下面来看看这类测试代码会产生怎样问题。...假如现在你同事看到这段代码 this.setOpenIndex(index)}>{item.title} 他觉得:每次渲染都要生成一个...这就是上面说 “假正确”。 它是指,在我们跑测试用例通过了,但实际上业务代码/应用代码里是有问题,用例是应该要抛出错误!那我们应该怎么才能覆盖这些情况呢?...如果没有正确绑定 onClick 点击事件,也会报错。这样也可以解决 “假正确” 问题。...这也正是 React Testing Library 测试思路:把 Mock Props 传给 Accordion 组件,然后通过 RTL API 来验证 render 函数输出内容、测试

94250

React基础语法

所以定义组件最简单方式是编写JavaScript函数,以下函数就是一个有效React组件,它接收唯一带有数据props参数,并返回一个React元素。这称为函数组件。...ON':'OFF'} ); } } 方法二问题在于每次渲染 Toggle组件都会创建不同回调函数。...由于 handlechange 在每次按键都会执行并更新 React state,因此显示值将随着用户输入而更新。 对于受控组件来说,每个 state 突变都有一个相关处理函数。...中,当多个组件需要反映相同变化数据,可以将这个共享变化数据提升到最近组件中去。...React 使用 Calculator 组件提供 props 分别调用两个 TemperatureInput 子组件 render 方法来获取子组件 UI 呈现

4.9K40

怎样对react,hooks进行性能优化?

在使用它们进行优化之前,想我们需要明确我们使用它们目的:减少组件非必要重新渲染减少组件内部重复计算1 使用 React.memo 避免组件重复渲染在讲述 React.memo 作用之前,我们先来思考一个问题...这种优化有助于避免在每次渲染进行高开销计算。...当点击 【往 List 添加一个数字】按钮后,list 值发生改变,sum 和 memoSum 进行重新计算。...useCallback 不会执行传入回调函数,返回函数引用useCallback 使用误区有很多初学者(包括以前)会有这样一个误区:在函数组件内部声明函数全部都用 useCallback...情况 2:onClick 包裹 useCallback ,当点击 app button ,触发重新渲染,onClick 不会生成引用,避免了 Child 子组件重新渲染。

2.1K51

用Jest来给React完成一次妙不可言~单元测试

除非合并,否则将覆盖DOM测试库中默认设置。 基本上,这个函数所做就是使用ReactDOM呈现组件。在直接附加到document.body新创建div中呈现(或为服务器端呈现提供水合物)。...这里,我们创建了自己助手函数 renderWithRedux() 来呈现组件,因为它将被多次使用。 renderWithRedux() 作为参数接收要呈现组件、初始状态和存储。...如果没有存储,它将创建一个存储,如果它没有接收初始状态或存储,它将返回一个空对象。 接下来,我们使用render()来呈现组件并将存储传递给提供者。...Redux部分一样,这里我们使用相同方法,创建一个助手函数renderWithContext()来呈现组件。...接下来,我们使用助手函数 renderWithRouter() 来呈现组件,并将历史记录传递给路由器组件。这样,我们现在就可以测试在开始加载页面是否是主页。以及导航栏是否加载了预期链接。

14.9K33

快速了解 React Hooks 原理

现在,你应该有很多疑问,如: 当组件重新渲染每次都不会重新创建状态吗? React如何知道旧状态是什么? 为什么hook 名称必须以“use”开头? 这看起来很可疑。...React第一次渲染函数组件,它同时会创建一个对象与之共存,该对象是该组件实例定制对象,而不是全局对象。只要组件存在于DOM中,这个组件对象就会一直存在。...其中做一件事设置 Hooks 数组。 它开始是空, 每次调用一个hookReact 都会向该数组添加该 hook。...下次渲染,同样3个hooks以相同顺序被调用,所以React可以查看它数组,并发现已经在位置0有一个useState hook ,所以React不会创建一个状态,而是返回现有状态。...这就是React能够在多个函数调用中创建和维护状态方式,即使变量本身每次超出作用域。

1.3K10
领券