如何避免React组件中不必要的重新租赁
React从早期阶段已经走了很长一段路。我们中的许多人仍然发现很难修复不必要的重新租赁。
有许多方法可以避免重新租赁。在这里，我正在讨论一些方法和方法，以避免在React中进行不必要的重新订阅。
用useref（）挂钩替换usestate（）。
使用重新选择库创建回忆的选择器
使用SWR A React Hooks库进行数据获取。
使用usememo（）和usecallback（）挂钩的备忘录。
* 1。用useref（）挂钩替换usestate（）。
*
usestate（）是钩子在反应功能组件中常用的钩子，以重新渲染状态变化的组件。但是在某些情况下，我们需要跟踪更新而不重新渲染组件。为了解决这个问题，我们可以使用useref（）挂钩，当我们使用useref（）进行更新时，它不会重新渲染与usestate（）
usestate（）的示例：
function inputWithState() {
const [value, setValue] = useState("");
return (
<input
value={value}
onChange={e => setValue(e.target.value)}
type={type}
/>
);
}
在此示例中
with useref（）示例：
function inputWithRef() {
const inputEl = useRef(null);
console.log(inputEl?.current?.value);
return (
<input ref={inputEl} type="text" />
);
}
在此示例中，您输入输入的内容，您都可以使用输入参考读取该输入。这种方法避免在每次击键上进行不必要的重新渲染。
2。使用重新选择库创建回忆的选择器
React组件具有快速的生命周期，由于如此多的重新渲染，它们总是遭受损失，从而导致生产时间和性能。为此，开发人员创建了一个第三方性能库重新选择，这是一个流行库的包装器重新选择，该包装库与Redux一起使用，通过编码回忆的选择器来改善性能。
选择器可以计算派生的数据，从而允许Redux存储最小可能的状态。
选择器是有效的。除非其参数之一更改，否则不会重新计算选择器。
选择器是可以组合的。它们可以用作其他选择器的输入。
示例：
import { createSelector } from 'reselect'
const selectShopItems = state => state.shop.items
const selectTaxPercent = state => state.shop.taxPercent
const selectSubtotal = createSelector(selectShopItems, items =>
items.reduce((subtotal, item) => subtotal + item.value, 0)
)
const selectTax = createSelector(
selectSubtotal,
selectTaxPercent,
(subtotal, taxPercent) => subtotal * (taxPercent / 100)
)
const selectTotal = createSelector(
selectSubtotal,
selectTax,
(subtotal, tax) => ({ total: subtotal + tax })
)
const exampleState = {
shop: {
taxPercent: 8,
items: [
{ name: 'apple', value: 1.2 },
{ name: 'orange', value: 0.95 }
]
}
}
console.log(selectSubtotal(exampleState)) // 2.15
console.log(selectTax(exampleState)) // 0.172
console.log(selectTotal(exampleState)) // { total: 2.322 }
在这里，CreateSelector将2个选择器作为输入，并返回回忆版。在值不同之前，将不再使用此记忆版本重新计算选择器。
。虽然重新选择不是redux独有的，但默认情况下它已包含在官方的redux工具包软件包中 - 不需要进一步安装。
3。使用SWR A React Hooks库进行数据获取
SWR是用于数据获取的React Hooks库。
这个名称swr swr源自陈旧的重新值。 SWR首先返回来自CACH（陈旧）的数据，然后发送请求（重新验证），最后再次带有最新数据。它将阻止组件重新渲染多次。
只需一个钩子，您就可以显着简化项目中的数据获取逻辑。它还涵盖了速度，正确性和稳定性的各个方面，以帮助您更好地建立。
示例：
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
请参阅此处的更多信息和示例：https://swr.vercel.app/
4。使用usememo（）和usecallback（）挂钩
备忘录
仅当道具中有更新时，备忘录才能使我们的React代码重新渲染组件。通过这种方法，开发人员可以避免不必要的重新渲染并减少应用程序中的计算负载。
React提供了两个钩子来创建回忆：
usememo（）
usecallback（）
这些钩子通过缓存并返回相同输出的情况下的重新渲染，如果输入相同，没有任何计算。当输入更新时，缓存将无效并渲染新组件状态。
usememo（）
此挂钩用于记忆函数调用和渲染之间的计算结果。
示例：
const expensiveFunction = (inputValue) => {
let expensiveValue = inputValue * 42;
//... lots and lots of computing including inputValue ...
expensiveValue = 'World';
return expensiveValue;
};
const MyComponent = ({ something }) => {
const [inputValue, setInputValue] = useState('');
const expensiveValue = useMemo(
() => expensiveFunction(inputValue),
[ inputValue ]
);
return <h1>Hello {expensiveValue}</h1>;
};
2。 usecallback（）
这是实现纪念的另一个反应钩。但是，与usememo（）不同，它不会缓存结果。相反，它记忆了提供给它的回调函数。
示例：
function item() {
const onClick = useCallback(event => {
console.log('Clicked Item : ', event.currentTarget);
}, [item]);
return (
<li={item} onClick={onClick} />
);
}
例如，usecallback（）记忆了OnClick回调。因此，如果用户一次又一次单击同一项目，则不会重新渲染组件。
希望本文可以帮助开发人员解决React组件中的重新汇总问题。请帮助您学习是否有其他方法或技术可以避免在React中重新呈现React。请在评论中添加。
感谢您的阅读。欢呼！！！。
你很棒！