javascript - React - 不必要的渲染

问题描述

我正在学习 ReactJS。我想使用功能组件。在我的组件中，我有一个文本框和一个清除按钮。

我担心的是 - 每当我从键盘输入字符以输入文本框的信息时，我都会search account called!!!在控制台输出中看到。如果我输入 5 个字符，我会看到 5 次 - 这基本上意味着整个组件被重新渲染 & 方法重新定义.rt？

这不是不好的做法并影响性能吗？还有其他选择吗？

import React, { useState, useContext } from 'react';
import AccountContext from . './accountContext'

const SearchAccounts = () => {
    
    const [text, setText] = useState('');
    const onChange = (evt) => setText(evt.target.value);

    console.log('search account called!!!');
    
    // some methods are defined here
    onSubmit = () => {...}
    onClear = () => {...}

    return (
        <div>
            <form onSubmit={onSubmit} className="form">
                <input 
                    type="text" 
                    name="text" 
                    value={text} 
                    onChange={onChange}
                    placeholder="Search Accounts..." 
                />
                <input type="submit" value="Search" className="...." />
            </form>
            <button 
                className="...."
                onClick={onClear}
                style={getClearStyle()}
            >Clear</button>
        </div>
    );

}

export default SearchAccounts;

标签： javascriptreactjs

重新渲染不一定很昂贵，您必须接受您的组件会频繁重新渲染，以便将数据中的更改传播到 UI。您的示例非常便宜，因为组件很小并且不会在其返回函数中呈现任何其他组件 - 这是组合必须经常重新呈现的 React 组件的理想方式。

您还必须记住，每次组件重新渲染时，您的 JSX 都不会丢弃所有 HTML 元素并将其附加到 DOM。仅应用了最后一次渲染和当前渲染之间的差异，这使得 React 和其他前端框架能够在大规模构建时创建流畅和快速的 UI。

如果并且当您确实在组件中遇到瓶颈时，您可以使用记忆技术（React.memo在功能组件上下文中，shouldComponentUpdate在类上下文中）来防止定期渲染组件影响其子组件的性能。通常最好在项目或代码单元结束时执行此操作，并且仅作为最终措施，因为记忆化逃逸内置在 React 优化中，如果您使用不当，实际上可能会导致比它解决的问题更多的问题。结构良好的组件树和基于通量的状态解决方案将缓解大多数性能问题。

javascript - React - 不必要的渲染

问题描述

解决方案

推荐阅读