我很想知道如果我們有多個嵌套組件并且我們將回呼函式傳遞給最低級別的組件,然后整個組件樹從最低級別組件中的事件呈現,那么 React 應用程式的性能是否會受到影響觸發此回呼。
如果是這樣,解決這個問題的最佳方法是什么?
謝謝。
uj5u.com熱心網友回復:
有很多方法可以傳遞資料,但對于函式來說則較少。
可以使用 Redux、useContext 或其他一些外部解決方案,如jotai。
其實官方推薦的方式是useContext:https ://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down
const TodosDispatch = React.createContext(null);
function TodosApp() {
// Note: `dispatch` won't change between re-renders
const [todos, dispatch] = useReducer(todosReducer);
return (
<TodosDispatch.Provider value={dispatch}>
<DeepTree todos={todos} />
</TodosDispatch.Provider>
);
}
function DeepChild(props) {
// If we want to perform an action, we can get dispatch from context.
const dispatch = useContext(TodosDispatch);
function handleClick() {
dispatch({ type: 'add', text: 'hello' });
}
return (
<button onClick={handleClick}>Add todo</button>
);
}
但坦率地說,將一個函式傳遞幾個組件也不是那么糟糕。
它使資料依賴關系更加明確并提高了可測驗性,盡管它確實有點冗長。做你覺得更正確的事。您可以稍后(在這種情況下)很容易地更改您的方法。
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/479163.html
標籤:反应
