Please enable JavaScript.
Coggle requires JavaScript to display documents.
ReactJS - Coggle Diagram
ReactJS
Hooks
-
useEffect
-
-
-
-
-
-
Types of useEffect
useEffect(callback)
-
-
-
Thực thi sau khi component render ra giao diện nên sử dụng useEffect để đảm bảo việc luôn render ra được giao diện ng dùng
useEffect(callback,[])
-
Phù hợp để gọi API, addEventListener (nhưng phải dùng return để bỏ eventListener mỗi khi unmount), setInterval
useEffect(callback,[dependencies])
-
-
useMemo
memo() có thể bọc component lại để hạn chế việc re-render lại - chỉ render lại khi nào mà component có sự thay đổi
-
-
useRef
Là đặt biến ngoài phạm vi của component và chỉ thay đổi khi mình gán lại và không bị ảnh hưởng khi component bị re-render trong khi let const var thì có
-
useCallback
-
-
nên sử dụng vì mỗi lần re-render thì react sẽ tạo một hàm mới và như vậy nếu truyền hàm vào props thì sẽ khiến cho component đó bị re-render mặc dù component con không bị thay đổi cái gì
-
Definition and notes
-
ReactJS là one-way binding lẫn 2 way binding : ràng buộc khi thay đổi state thì đồng thời giao diện cũng phải thay đổi và ngược lại
-
Javascript
6 types of data
-
-
-
-
object (Indicates No Object, Explicit Assignment)
-
-
ES6
let, const, var
const(function scope, block scope)
let(function scope, block scope,can be reassigned)
var(function scope, global scope, can be reassigned)
-
-
-
-
-
-
-
Redux
Components
Store
The central component of Redux is the store. The store is a JavaScript object that holds the entire state of your application.
State
State in Redux represents the current data and UI state of your application. All state is stored in the Redux store.
Actions
describe an event or an intention to change the state. They have a type property that indicates the type of action being performed and may also include additional data (payload). Actions are dispatched to the store to initiate state changes.
Reducers
Reducers are pure functions that specify how the state changes in response to actions. They take the current state and an action as input and return a new state. Reducers should not modify the existing state but instead create a new state object. The reducer function has the following signature:
(state, action) => newState.
Dispatch
Dispatch is a function provided by the Redux store that you use to send actions to the store. When you dispatch an action, Redux invokes the reducer with the current state and the action, and then it updates the state based on the reducer's logic.
Middleware
Middleware in Redux is a way to extend the store's functionality. Middleware can intercept dispatched actions and perform tasks like logging, making asynchronous API requests, and more. Popular middleware libraries include Redux Thunk, Redux Saga, and Redux-observable.
Immutable State
Redux encourages immutable state updates. This means that you should not modify the current state directly but create a new state object with the desired changes. Libraries like Immutable.js can help enforce this pattern.
Time-Travel Debugging
Redux integrates well with tools like the Redux DevTools Extension, which allows you to inspect and debug the state changes in your application over time. This feature is called time-travel debugging.
It provides a predictable state container for managing and organizing the data in your application and ensuring that state changes occur in a consistent and maintainable manner.
-
react-route-dom
Router Component
<BrowserRouter>: Uses the browser's HTML5 history API to create clean, user-friendly URLs.
<HashRouter>: Uses URL hash fragments for routing, suitable for applications that need to support older browsers or environments where configuring server-side routing is challenging.
Route Component
The Route component is used to define routes and associate them with specific components. It takes two props: path (the URL path) and component (the component to render when the path matches).
<Router>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Router>
Nested Routes
React Router DOM supports nested routes, where you can render child components within parent components. You can use the Route component inside other components to achieve this.
<Route path="/dashboard" component={Dashboard}><Route path="/dashboard/profile" component={Profile} /><Route path="/dashboard/settings" component={Settings} />
</Route>
Route Guards
They enable you to perform actions or checks before navigating to a specific route, such as protecting routes based on user authentication or authorization
<Route> Component render Prop: You can use the render prop of the <Route> component to define a function that returns a component or redirect based on certain conditions.
<Route path="/private" render={() => (userAuthenticated ? <PrivateComponent /> : <Redirect to="/login" />)} />
Higher-Order Components (HOCs): You can create higher-order components that wrap your route components and perform checks or actions before rendering the component.
const withAuth = (Component) => {
return (props) => {
if (userAuthenticated) {
return <Component {...props} />;
} else {
return <Redirect to="/login" />;
}
};
};
const ProtectedRoute = withAuth(PrivateComponent);
Link Component
The Link component is used to create navigation links within your application.Clicking on a Link navigates to the specified route without triggering a full page reload.
-
Route Parameters
You can define dynamic route segments by using a colon (:) followed by a parameter name in the path. Route parameters are accessible in the component through the match prop.
-
Redirects
You can use the Redirect component to programmatically navigate to another route. This is often used for conditional routing based on certain conditions.
-
Hooks
React Router DOM provides various hooks like useHistory, useLocation, and useParams to access routing-related information and perform navigation programmatically.
useHistory: The useHistory hook provides access to the history object, which allows you to programmatically navigate, go back, or perform other navigation-related actions.
useLocation: The useLocation hook provides access to the current location object, which contains information about the current URL.
-
useRouteMatch: The useRouteMatch hook lets you access route matching information for the current location.
The useRouteMatch hook is especially useful when you're working with nested routes, conditional rendering, or building dynamic links and navigation elements within your React Router DOM-based application
-
Lazy Loading
You can use code-splitting and React's lazy loading with React Router to load components only when they are needed, improving the performance of your application.
// Example: Create a dynamic import for a component
const LazyComponent = React.lazy(() => import('./LazyComponent'));
// Example: Wrapping routes with Suspense
import { Suspense } from 'react';
<Suspense fallback={<div>Loading...</div>}>
<Route path="/lazy" component={LazyComponent} />
</Suspense>
-
CSS
Position
-
-
relative => absolute => relative : tách nút ra và gắn định nền để tách cái sau bằng relative để k dính thanh nav bar
-
-
-