+5

[React][React Signify] Quản lý Global State chuyên nghiệp

image

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

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

Viblo
Let's register a Viblo Account to get more interesting posts.