[React][React Signify] Quản lý Global State chuyên nghiệp
Lời mở
Xin chào mọi người 😀, nếu mọi người còn đang băn khoăn không biết nên chọn thư viện quản lý Global State nào trong ReactJS, đang hoang mang về các vấn đề re-render và cần tìm giải pháp cho vấn đề hiệu năng trong ứng dụng, thì đây sẽ bài viết phù hợp với bạn.
Và hôm nay, mình xin lên cho anh em con thư viện khá ngon, dùng để quản lý Global State trong React, bản thân đã và đang xài, nên cũng muốn chia sẽ cho anh em trong cộng đồng ReactJS cùng trải nghiệm.
Giới thiệu
React Signify là một thư viện đơn giản cung cấp các tính năng quản lý và cập nhật global state một cách hiệu quả. Nó đặc biệt hữu ích trong các ứng dụng React để quản lý state và tự đồng bộ khi giá trị của chúng thay đổi. Ưu điểm của thư viện:
- Thư viện nhỏ gọn
- Cú pháp đơn giản
- Hỗ trợ kiểm soát re-render hiệu quả - phần mình thích nhất 🫡
Thông tin dự án
- Website : https://reactsignify.dev/?lang=vi
- Git : https://github.com/VietCPQ94/react-signify
- NPM : https://www.npmjs.com/package/react-signify
Cài đặt
React Signify có sẵn dưới dạng package trên NPM để sử dụng với ứng dụng React:
# NPM
npm install react-signify
# Yarn
yarn add react-signify
Tổng quan
Khởi tạo
Bạn có thể khởi tạo Signify ở bất kỳ file nào, hãy tham khảo ví dụ sau
import { signify } from 'react-signify';
const sCount = signify(0);
Tại đây ta tạo 1 biến sCount với giá trị khởi tạo là 0.
Sử dụng tại nhiều nơi
Việc sử dụng đơn giản bằng công cụ export/import của module. Hãy tham khảo ví dụ sau :
Component A (export Signify)
import { signify } from 'react-signify';
export const sCount = signify(0);
export default function ComponentA() {
return (
<div>
<h1>{sCount.html}</h1>
<button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
</div>
);
}
Component B (import Signify)
import { sCount } from './ComponentA';
export default function ComponentB() {
return (
<div>
<h1>{sCount.html}</h1>
<button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
</div>
);
}
Từ đây ta thấy được tính linh động của Signify, khai báo đơn giản, sử dụng ở mọi nơi.
Các tính năng cơ bản
Hiện thị trên giao diện
Ta sẽ sử dụng thuộc tính html để hiện thị giá trị lên giao diện.
import { signify } from 'react-signify';
const sCount = signify(0);
export default function App() {
return (
<div>
<h1>{sCount.html}</h1>
</div>
);
}
Cập nhật giá trị
import { signify } from "react-signify";
const sCount = signify(0);
export default function App() {
return (
<div>
<h1>{sCount.html}</h1>
<button onClick={() => sCount.set(1)}>Set 1</button>
<button onClick={() => sCount.set((pre) => pre.value += 1)}>UP 1</button>
</div>
);
}
Việc nhấn nút sẽ thay đổi giá trị của Signify và được cập nhật tự động lên giao diện.
Các tính năng nâng cao
Use
Tính năng cho phép lấy giá trị của Signify và sử dụng nó như một state của component.
import { useEffect } from "react";
import { signify } from "react-signify";
const sCount = signify(0);
export default function App() {
const countValue = sCount.use();
useEffect(() => {
console.log(countValue);
}, [countValue]);
return (
<div>
<h1>{countValue}</h1>
<button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
</div>
);
}
Thường thì mình sẽ sử dụng nếu có nhu cầu tích hợp chung với các hook khác của React như useCallback, useMemo, useEffect, v.v...
watch
Tính năng cho phép theo dõi sự thay đổi giá trị của Signify một cách an toàn.
import { signify } from 'react-signify';
const sCount = signify(0);
export default function App() {
sCount.watch((newValue) => {
console.log(newValue);
}, []);
return (
<div>
<button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
</div>
);
}
Đây là nhân tố chính trong việc quản lý hiệu năng ứng dụng, vì nó cho phép bạn theo dõi sự thay đổi của Signify mà không làm component re-render (thử đặt console.log để check nhé)
Wrap
Tính năng áp dụng giá trị của Signify trong một vùng giao diện cụ thể.
import { signify } from 'react-signify';
const sCount = signify(0);
export default function App() {
return (
<div>
<sCount.Wrap>
{(value) => (
<div>
<h1>{value}</h1>
</div>
)}
</sCount.Wrap>
<button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
</div>
);
}
Phần ưu thích nhất của mình, Wrap giúp mình cô lập phạm vi re-render khi Signify thay đổi, từ đó component App sẽ luôn được bảo toàn và không re-render
Hardwrap
Tính năng áp dụng giá trị của Signify trong một vùng giao diện và hạn chế được các re-render không cần thiết khi component cha re-render.
import { signify } from 'react-signify';
const sCount = signify(0);
export default function App() {
return (
<div>
<sCount.HardWrap>
{(value) => (
<div>
<h1>{value}</h1>
</div>
)}
</sCount.HardWrap>
<button onClick={() => sCount.set((pre) => pre += 1)}>UP</button>
</div>
);
}
Mình thích Hardwrap nhất, lý do là phần giao diện đôi khi chỉ cần sử dụng biến của Signify, vẫn nên việc đóng HardWrap sẽ giúp cho phạm vi này không re-render khi Component App render.
Tất nhiên sẽ đi kèm với nhược điểm là không thể nhận được giá trị mới từ ngoài phạm vi Hardwrap truyền vào, vậy nên có thể sử dụng Wrap để thay thế trong trường hợp này
reset
Công cụ cho phép khôi phục lại giá trị mặc định.
import { signify } from 'react-signify';
const sCount = signify(0);
sCount.reset()
Thường thì mình sẽ sử dụng để khôi phục nội dung mặc đinh khi không còn sử dụng, đảm bảo memory được giải phóng
Kết Luận
Theo quan điểm của mình sau khi đã sử dụng qua vài project lớn nhỏ, mình thấy React Signnify rất dễ sử dụng và bảo trì, đặc biệt có hỗ trợ devtool nên rất dễ để kiểm soát các giá trị khi thay đổi. Đặc biệt Signify cho phép mình toàn quyền kiểm soát Re-render, nhờ vậy mà giúp cho ứng dụng của mình hoạt động đúng cách và hiệu quả hơn. Mình cũng sử dụng Signify để làm ra rất nhiều thư viện chung cho nhóm như thông báo lỗi, hiển thị cảnh báo, hiển thị đơn đặt hàng ở nhiều vị trí, v.v...
Các bạn thử sử dụng xem có cùng trải nghiệm giống mình không nhé.
Xem thêm
Còn rất nhiều nội dung khác trên trang chủ của Signify, hãy xem thêm ở nội dung dưới đây nhé :
All rights reserved
