英文:
How to properly change component class in React.js
问题
以下是您要翻译的内容：
There are several ways to change a component's class in React.js, but which one is the right one?
I've read that this should be done using the useState hook, but are you sure that changing only the class of an element should result in its re-rendering?
We do not change the structure, we only add a class that will not change the structure of the component, only its appearance. Rendering the whole component again seems wrong in this case. Am I right?
EDIT
I have added various examples of components where the class change occurs in different ways. It seems that SuperSimpleCompontent is the most optimal solution, but is it correct?
以下是代码部分，不需要翻译：
function UsingRefComponent(){
const ref = React.useRef();
return <button ref={ref} onClick={() => {ref.current.classList.add("new");}}>useRef</button>
}
function UsingStateComponent(){
const [newClass, setNewClass] = React.useState(null);
return <button className={newClass} onClick={() => {setNewClass('new')}}>useState</button>
}
function SuperSimpleComponent(){
return <button onClick={(e) => {e.preventDefault(); e.target.classList.add("new")}}>simple event target</button>
}
ReactDOM.render(<React.Fragment><UsingRefComponent />vs<UsingStateComponent />vs<SuperSimpleComponent /></React.Fragment>, document.body);
以下是CSS和HTML部分，不需要翻译：
button {
margin: 15px;
}
.new {
background: #000;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
请告诉我如果您需要任何进一步的帮助。
英文:
There are several ways to change a component's class in React.js, but which one is the right one?
I've read that this should be done using the useState hook, but are you sure that changing only the class of an element should result in its re-rendering?
We do not change the structure, we only add a class that will not change the structure of the component, only its appearance. Rendering the whole component again seems wrong in this case. Am I right?
EDIT
I have added various examples of components where the class change occurs in different ways. It seems that SuperSimpleCompontent is the most optimal solution, but is it correct?
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
function UsingRefComponent(){
const ref = React.useRef();
return <button ref={ref} onClick={()=>{ref.current.classList.add("new");}}>useRef</button>
}
function UsingStateComponent(){
const [newClass, setNewClass] = React.useState(null);
return <button className={newClass} onClick={()=>{setNewClass('new')}}>useState</button>
}
function SuperSimpleComponent(){
return <button onClick={(e)=>{e.preventDefault(); e.target.classList.add("new")}}>simple event target</button>
}
ReactDOM.render(<React.Fragment><UsingRefComponent />vs<UsingStateComponent />vs<SuperSimpleComponent /></React.Fragment>, document.body);
<!-- language: lang-css -->
button {
margin:15px;
}
.new {
background:#000;
color:#fff;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- end snippet -->
答案1
得分: 3
重新渲染整个组件是标准的。React 存储了虚拟 DOM，这意味着每当应用的一部分被重新渲染时，React 只会实际更改已在真实 DOM 中被修改的属性并渲染节点。
在绝大多数情况下，性能足够快，差异是完全不可察觉的。如果你真的担心性能问题，可以考虑其他库，如 Svelte 或 Solid.js。
英文:
Rerendering the whole component is standard. React stores a virtual DOM, which means that whenever part of the app is re-rendered, React only actually changes the attributes and renders nodes that have been modified in the real DOM.
Performance in the vast majority of situations is fast enough that the difference is completely unnoticeable. If you're really worried about performance, look into other libraries like Svelte or Solid.js.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论