我有一个组件由几个其他组件组成,例如文本字段,当对文本字段进行输入时,所有其他组件都会重新呈现.我想防止重新渲染,只重新渲染实际更改的组件.我已经看到了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.. :)
更多推荐
如何防止重新渲染未更改的组件?
发布评论