Giới thiệu

Xin chào các bạn! Nếu bạn đang phân vân không biết nên chọn thư viện nào để quản lý Global State trong ReactJS và đang lo lắng về vấn đề re-render cũng như hiệu suất ứng dụng, thì bài viết này chính là dành cho bạn.

Hôm nay, mình sẽ giới thiệu một thư viện rất hữu ích cho việc quản lý Global State trong React có tên là React Signify. Mình đã sử dụng thư viện này trong nhiều dự án và muốn chia sẻ để cộng đồng ReactJS cùng khám phá.

Tại Sao Nên Chọn React Signify?

React Signify là một thư viện nhỏ gọn nhưng mạnh mẽ, cung cấp các công cụ mạnh mẽ để quản lý và cập nhật global state một cách hiệu quả. Thư viện này đặc biệt phù hợp cho các ứng dụng React, giúp bạn đồng bộ hóa các giá trị khi chúng thay đổi. Một số ưu điểm nổi bật của React Signify bao gồm:

• Thư viện nhẹ và dễ dàng tích hợp.
• Cú pháp dễ hiểu, giúp bạn nhanh chóng làm quen.
• Quản lý re-render hiệu quả: Đây là một điểm mình đánh giá cao!

Thông Tin Dự Án

• Website: React Signify
• GitHub: react-signify
• NPM: react-signify trên NPM

Cài Đặt

Để cài đặt React Signify, bạn chỉ cần sử dụng NPM hoặc Yarn như sau:

npm install react-signify  // Sử dụng NPM

yarn add react-signify      // Sử dụng Yarn

Tổng Quan

Khởi Tạo

Bạn có thể khởi tạo Signify ở bất kỳ file nào trong dự án của bạn. Dưới đây là một ví dụ:

import { signify } from 'react-signify';

const sCount = signify(0);

Tại đây, chúng ta đã tạo một biến sCount với giá trị khởi tạo là 0.

Sử Dụng Ở Nhiều Nơi

Việc sử dụng Signify rất đơn giản nhờ vào module export/import. Dưới đây là ví dụ:

Component A (xuất 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 (nhập 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>
  );
}

Bạn có thể thấy rằng Signify rất dễ sử dụng và linh hoạt.

Các Tính Năng Cơ Bản

Hiển Thị Giá Trị

Chúng ta có thể 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>
  );
}

Mỗi lần nhấn nút sẽ thay đổi giá trị của Signify và cập nhật tức thì lên giao diện.

Các Tính Năng Nâng Cao

Use

Tính năng này cho phép bạn 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>
  );
}

Watch

Cho phép theo dõi sự thay đổi giá trị của Signify mà không làm component re-render:

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>
  );
}

Wrap

Á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) => <h1>{value}</h1>}
      </sCount.Wrap>
      <button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
    </div>
  );
}

Hardwrap

Giúp hạn chế các re-render không cần thiết:

import { signify } from 'react-signify';

const sCount = signify(0);

export default function App() {
  return (
    <div>
      <sCount.HardWrap>
        {(value) => <h1>{value}</h1>}
      </sCount.HardWrap>
      <button onClick={() => sCount.set((pre) => pre.value += 1)}>UP</button>
    </div>
  );
}

Reset

Khôi phục giá trị mặc định:

import { signify } from 'react-signify';

const sCount = signify(0);
sCount.reset();

Kết Luận

Sau một thời gian trải nghiệm với React Signify trong các dự án lớn nhỏ, mình đánh giá thư viện này rất dễ sử dụng và bảo trì. Đặc biệt, với devtool, việc kiểm soát các giá trị khi thay đổi trở nên dễ dàng. Thư viện này giúp mình điều chỉnh và tối ưu hóa hiệu suất ứng dụng một cách hiệu quả.

Hy vọng bạn sẽ trải nghiệm và có những cảm nhận giống như mình khi sử dụng React Signify!

Xem Thêm

Đừng quên ghé thăm trang chủ của Signify để tìm hiểu thêm về:

• Tài liệu API
• Render & Update
• Devtool
• Hướng dẫn sử dụng
• Cấu trúc
• Hiểu biết về Signify.
  source: viblo