我不太明白Reaction状态在Reaction功能组件中是如何工作的。互联网上说,在原始状态最基本的情况下,
- 如果状态与之前相同,功能组件将不会重新呈现
- 对于类组件,它将重新呈现,而不考虑
但对于下面的代码,使用功能组件,我面临以下场景:
当状态第一次更改时,组件将重新呈现
如果我再次使用相同的值更新状态,则状态将再次更改
随后使用相同的值更新状态的所有尝试都不会重新呈现组件。
import "./App.css";
import React, { Component, useState } from "react";
function App() {
console.log("Component Ran");
const [placeHolder, setPlaceHolder] = useState("Start");
const onClickHandler = (e) => {
if (!e.target.classList.contains("state")) return;
const it = e.target.innerText;
console.log("coming from onClickHandler", it);
setPlaceHolder(it);
};
return (
<>
<div>{placeHolder}</div>
<div onClick={onClickHandler}>
<button className="state">State 1</button>
<button className="state">State 2</button>
</div>
</>
);
}
export default App;
基本上有两个按钮,每个按钮分别用于状态1和状态2。当单击该按钮时,状态占位符将更新为按钮的innerText
。在按钮的顶部有一个元素,它显示状态。下面是我在控制台中注意到的:现在假设占位符状态是状态1。我点击状态2按钮,我会在控制台日志中看到下面的输出。
来自onClickHandler状态2
元件范围
我再次点击状态为2的按钮,再次得到相同的输出。
但下一次和之后的一百万次,当我点击状态为2的按钮时,我只能得到低于输出的结果,
来自onClickHandler状态2
我在这里错过了什么。至少我预计会有一种行为,要么组件每次都会重新呈现,要么只在它更改时才重新呈现。为什么会出现这种喜忧参半的行为?
1条答案
按热度按时间nbysray51#
您的代码似乎表现出预期的行为。点击“State 1”按钮登录
coming from onClickHandler State 1
,点击“State 2”按钮登录coming from onClickHandler State 2
。请查看此处的沙箱以验证:https://codesandbox.io/s/hardcore-lamport-2tfe8m?file=/src/App.js