首页
学习
活动
专区
工具
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.9K20

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

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

    1.4K30

    手把手教你全家桶之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 无关。

    69140

    超性感的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传递一个函数的形式,这两者表现形式似乎完全一样

    89330

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

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

    6.9K20

    精读: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包裹,也会被认为是一个新的对象。。

    95420

    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,

    94420

    提示可能你的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(() => {},

    89020

    这届面试官,不讲武德

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

    55720

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

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

    95850

    深入了解 useMemo 和 useCallback

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

    9.1K30

    React基础语法

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

    4.9K40

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

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

    15K33

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

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

    2.2K51

    一文掌握React 渲染原理及性能优化

    如今的前端,框架横行,不掌握点框架的知识,出去面试都虚。 我比较常用React, 这里就写了一篇 React 基础原理的内容, 面试基本上也就问这些, 分享给大家。 React 是什么 ?...// Bad case // 每次父组件触发render 将导致传入的handleClick参数都是一个全新的匿名函数引用。...// hitSlop的属性值每次render都会生成一个新对象 class Father extends Component { onClick() {} render() {...这时一个 List 组件,里面有标题,包含 ListItem 子组件的members列表,和一个按钮,绑定了一个 onclick 事件. 然后我加了一个插件,可以显示出各个组件的渲染情况。...现在我们来点击改变标题, 看看会发生些什么。 ? 奇怪的事情发生了,为什么我只改了标题, 为什么不相关的 ListItem 组件也会重新渲染呢? 我们可以回到组件生命周期看看为什么。 ?

    4.4K30
    领券