如何防止重新渲染未更改的组件?

本文介绍了如何防止重新渲染未更改的组件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个组件由几个其他组件组成，例如文本字段，当对文本字段进行输入时，所有其他组件都会重新呈现.我想防止重新渲染，只重新渲染实际更改的组件.我已经看到了useCallback"是正确的方法，我已经看到了如何使用它.但是，我在获取useCallBack"时遇到了一些麻烦.为我的情况正常工作.即使我以如下简单的方式进行设置，文本字段中输入的每个新字符都会导致按钮再次呈现.我没有看到我的错误.

查看沙盒中的工作示例.

const Button = () =>{console.log(按钮渲染！");window.alert(按钮渲染");return <button onClick="">按我</button>;};导出默认函数 App() {const [textInput, setTextInput] = useState(Hallo");const onChangeInput = useCallback((e) =>{setTextInput(e.target.value);},[文本输入]);返回 (<div><输入类型=文本"onChange={onChangeInput}值={文本输入}/><按钮/>

);}

我很高兴任何校准.

解决方案

我个人会避免 React.memo/React.useRef/React.useCallback.

您的示例最简单的解决方案是创建另一个组件，并用它存储状态.

例如

const Button = () =>{console.log(按钮渲染！");window.alert(按钮渲染");return <button onClick="">按我</button>;};const TextInput = () =>{const [textInput, setTextInput] = useState(Hallo");const onChangeInput = useCallback((e) =>{setTextInput(e.target.value);},[文本输入]);返回 (<输入类型=文本"onChange={onChangeInput}值={文本输入}/>);}导出默认函数 App() {返回 (<div><文本输入/><按钮/>

);}

在上面如果你改变Text，App中没有State改变，所以Button不会被重新渲染，不需要useMemo等.

您会发现 React 工作得非常好，您将组件拆分得越多，它不仅可以解决重新渲染的问题，而且可能使以后重新使用组件变得更加容易.

IOW:保持状态尽可能靠近组件，性能会随之而来.

当然，您的示例很简单，在实际应用中，您将需要处理 HOC 等问题，但这是另一个问题.. :)

I have a component that consists of several other components such as text fields, and when an input is made to the text field, all other components are re-rendered. I would like to prevent the re-rendering and only re-render the component that actually changes. I have seen that "useCallback" is the right way to do this and I have already seen how to use it. However, I'm having some trouble getting "useCallBack" to work correctly for my case. Even if I set it up in a simple manner as below, each new character entered into the text field causes the button to be rendered again. I dont see my mistake.

See working example in sandbox.

const Button = () => { console.log("Button Rendered!"); window.alert("Button Rendered"); return <button onClick="">Press me</button>; }; export default function App() { const [textInput, setTextInput] = useState("Hallo"); const onChangeInput = useCallback( (e) => { setTextInput(e.target.value); }, [textInput] ); return ( <div> <input type="text" onChange={onChangeInput} value={textInput} /> <Button /> </div> ); }

I am happy for any calrification.

解决方案

Personally I would avoid React.memo / React.useRef / React.useCallback.

The simplest solution to your example is just create another component, and store the state with this.

eg.

const Button = () => { console.log("Button Rendered!"); window.alert("Button Rendered"); return <button onClick="">Press me</button>; }; const TextInput = () => { const [textInput, setTextInput] = useState("Hallo"); const onChangeInput = useCallback( (e) => { setTextInput(e.target.value); }, [textInput] ); return ( <input type="text" onChange={onChangeInput} value={textInput} /> ); } export default function App() { return ( <div> <TextInput/> <Button /> </div> ); }

In the above if you change Text, there is not State change in App, so Button doesn't get re-rendered, no need for useMemo etc..

You will find React works really well, the more you divide your components up, not only does it solve issues of re-render, but potentially makes it a lot easier to re-use components later.

IOW: keep state as close to the component as possible, and performance will follow.

Of course your example is simple, and in a real app you will have HOC's etc to cope with, but that's another question.. :)