摘要: 怎么用 React.createElement 重写下面的代码 Question: const element = ( <h1 className="greeting"> Hello, rdhub.cn! </h1> ); Answer: const element = React.createEl 阅读全文
posted @ 2022-10-17 08:23 beifeng11996 阅读(31) 评论(0) 推荐(0) 编辑
摘要: Hook 简介 Hook出世之前React存在的问题 在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径(例如,把组件连接到 store)。有一些解决此类问题的方案,比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构,这可能会很麻烦,使 阅读全文
posted @ 2022-10-17 08:19 beifeng11996 阅读(39) 评论(0) 推荐(0) 编辑
摘要: createElement和 cloneElement有什么区别? createElement是JSX被转载得到的,在 React中用来创建 React元素(即虚拟DOM)的内容。cloneElement用于复制元素并传递新的 props。 了解redux吗? redux 是一个应用数据流框架,主要 阅读全文
posted @ 2022-10-14 09:43 beifeng11996 阅读(24) 评论(0) 推荐(0) 编辑
摘要: 一、写一个时钟 用 react 写一个每秒都可以更新一次的时钟 import React from 'react' import ReactDOM from 'react-dom' function tick() { let ele = <h1>{ new Date().toLocaleTimeSt 阅读全文
posted @ 2022-10-14 09:40 beifeng11996 阅读(17) 评论(0) 推荐(0) 编辑
摘要: 一、React 渲染流程和更新流程 react渲染流程:jsx -> 虚拟dom -> 真实dom react更新流程:props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树 所以 阅读全文
posted @ 2022-10-14 09:32 beifeng11996 阅读(29) 评论(0) 推荐(0) 编辑
摘要: Debounce debounce 原意消除抖动,对于事件触发频繁的场景,只有最后由程序控制的事件是有效的。 防抖函数,我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生,在定时器期间事件再次触发的话则清除重置定时器,直到定时器到时仍不被清除,事件才真正发生。 const debounce 阅读全文
posted @ 2022-10-13 10:11 beifeng11996 阅读(20) 评论(0) 推荐(0) 编辑
摘要: 我现在有一个button,要用react在上面绑定点击事件,要怎么做? class Demo { render() { return <button onClick={(e) => { alert('我点击了按钮') }}> 按钮 </button> } } 你觉得你这样设置点击事件会有什么问题吗? 阅读全文
posted @ 2022-10-13 10:06 beifeng11996 阅读(24) 评论(0) 推荐(0) 编辑
摘要: Hook 简介 Hook出世之前React存在的问题 在组件之间复用状态逻辑很难 React 没有提供将可复用性行为“附加”到组件的途径(例如,把组件连接到 store)。有一些解决此类问题的方案,比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构,这可能会很麻烦,使 阅读全文
posted @ 2022-10-13 10:02 beifeng11996 阅读(11) 评论(0) 推荐(0) 编辑
摘要: 一、React 渲染流程和更新流程 react渲染流程:jsx -> 虚拟dom -> 真实dom react更新流程:props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树 所以 阅读全文
posted @ 2022-10-12 09:06 beifeng11996 阅读(8) 评论(0) 推荐(0) 编辑
摘要: React中可以在render访问refs吗?为什么? <> <span id="name" ref={this.spanRef}>{this.state.title}</span> <span>{ this.spanRef.current ? '有值' : '无值' }</span> </> 不可 阅读全文
posted @ 2022-10-12 09:02 beifeng11996 阅读(19) 评论(0) 推荐(0) 编辑