Phản ứng hooks cheat sheet pdf

Mục đích chính của một thành phần React là trả lại một số JSX để được hiển thị. Thông thường, sẽ rất hữu ích nếu một thành phần thực thi một số mã thực hiện tác dụng phụ bên cạnh việc hiển thị JSX

Trong các thành phần của lớp, các tác dụng phụ được quản lý bằng các phương thức vòng đời. Trong các thành phần chức năng, chúng tôi quản lý các tác dụng phụ bằng Móc hiệu ứng. Một số tác dụng phụ phổ biến bao gồm. tìm nạp dữ liệu từ máy chủ, đăng ký luồng dữ liệu, ghi giá trị vào bảng điều khiển, bộ định thời khoảng thời gian và tương tác trực tiếp với DOM

Bảng cheat React Hooks

Ngày 29 tháng 7 năm 2021 · 3 phút đã đọc

Bunlong

Nhóm mô hình phản ứng

Phản ứng hooks cheat sheet pdf

quản lý nhà nước

useState()

khai báo trạng thái

const [tên, đặtTên] = useState('Initial value');

Sao chép

Cập nhật trạng thái

setName('Giá trị mới');< // directly

Sao chép

setName((giá trị) => 'New' + value); // based on previous state

Sao chép

Phản ứng phụ

sử dụngEffect()

Chỉ kích hoạt chức năng gọi lại một lần khi thành phần được gắn kết

useEffect( () => {

// Tác dụng phụ, yêu cầu HTTP, setTimeout,. vân vân

}, []);

Sao chép

Kích hoạt chức năng gọi lại khi phụ thuộc 'VALUE' bị thay đổi

useEffect(() => {

// Tác dụng phụ, yêu cầu HTTP, setTimeout,. vân vân

}, [giá trị]);

Sao chép

Dọn dẹp tác dụng phụ khi thành phần không được đếm

useEffect(() => {

let timeout = setTimeout(doSomething, 5000);

return () => ClearTimeout(timeout);

}, [giá trị]);

Sao chép

Ghi nhớ cuộc gọi lại

sử dụngCallback()

Chỉ trả lại chức năng mới khi phụ thuộc thay đổi

const handleClick = useCallback(() => {

doSomethingWith(param1, param2);

}, [param1, param2]);

Sao chép

Ghi nhớ gọi lại cho một danh sách các phần tử động

const handleClick = useCallback((event) => {

const = sự kiện. mục tiêu;

const = nút. getAttribute('data-value');

doSomethingWith(giá trị);

}, []);

<ul>

{đối tượng. bản đồ((obj) => (

<phím li={obj.id}>

<dữ liệu nút-giá trị={obj.giá trị} onClick={handleClick}>

{obj. giá trị}

</nút>

</li>

))}

</ul>

Sao chép

Ghi nhớ một giá trị

sử dụngMemo()

Sẽ chỉ kích hoạt khi phụ thuộc thay đổi

const = useMemo(() => {

// chỉ đánh giá khi param1 hoặc param2 thay đổi

return excessiveOperation(param1, param2);

}, [param1, param2]);

Sao chép

Phần tử tham chiếu

userRef()

userRef giống như một "HỘP" có thể chứa giá trị có thể thay đổi trong thuộc tính hiện tại của nó

const inputRef = useRef(null); // initialize

...

const onButtonClick = () => {

// điểm hiện tại đến phần tử đầu vào

inputRef. hiện tại. tập trung(); /

}

<loại đầu vào="văn bản" trình giữ chỗ<="Name" ref={inputRef} />

<button onClick={onButtonClick}>Focus input</button>

Sao chép

API ngữ cảnh

sử dụngContext()

Tránh khoan đạo cụ bằng API ngữ cảnh

// tạo và xuất ngữ cảnh

xuất const ThemeContext = createContext(null);

// bọc thành phần cha mẹ với nhà cung cấp ngữ cảnh

trả về (

<Bối cảnh chủ đề. Giá trị của nhà cung cấp={{ . theme: 'tối}}>

<Ứng dụng />

</Bối cảnh chủ đề. Nhà cung cấp>

);

// sử dụng ngữ cảnh bên trong bất kỳ thành phần con nào

const { chủ đề } = useContext(ThemeContext);

Sao chép

Quản lý Nhà nước

sử dụngReducer()

Khởi tạo một trạng thái cục bộ và tạo bộ giảm tốc

const initState = {

giá trị. 0

};

const bộ giảm = (trạng thái, action) {

chuyển đổi (hành động. loại) {

trường hợp 'tăng'.

trả về { . trạng thái, giá trị. trạng thái. giá trị + 1 };

trường hợp 'set_to'.

trả về { . trạng thái, giá trị. trạng thái. giá trị };

mặc định.

ném mới Lỗi('Hành động chưa xử lý'<);

}

};

Sao chép

Tạo trạng thái cục bộ và gửi hành động

const [bang, công văn] = useReducer(reducer, initialState);

...

<nhấp vào nút={() => dispatch({ type: 'tăng' })} />

<nhấp vào nút={() => dispatch({ type: 'set_to', giá trị. 24 })} />

<nút><nút>

Sao chép

Tạo móc tùy chỉnh của riêng bạn

Móc tùy chỉnh phải bắt đầu bằng use

const useApiResult = (param) => {

const [kết quả, setResult] = useState(null);

useEffect(() => {

// nhiệm vụ của bạn

}, [tham số]);

return { kết quả };

};

// để sử dụng nó trong một thành phần

const { kết quả } = useApiResult('some-param');

Sao chép

thẻ. cái móc

React hook có khó không?

Móc phản ứng là nguồn liên tục tạo ra các bài kiểm tra khó viết và không xác định . Các thành phần lớp cũng gặp phải vấn đề tương tự. Bây giờ sau khi biết về nó, tôi sẽ không bao giờ quay lại các thành phần của lớp. Đó không phải là hai lựa chọn duy nhất.

Các hook có còn được sử dụng trong React không?

Hook là cách trực tiếp hơn để sử dụng các tính năng của React mà bạn đã biết — chẳng hạn như trạng thái, vòng đời, ngữ cảnh và giới thiệu. Về cơ bản, chúng không thay đổi cách React hoạt động và kiến ​​thức của bạn về các thành phần, đạo cụ và luồng dữ liệu từ trên xuống cũng phù hợp.

Móc phản ứng nào là quan trọng nhất?

🚀 useState . Đây là móc quan trọng nhất và thường được sử dụng. Mục đích của hook này để xử lý dữ liệu phản ứng, bất kỳ dữ liệu nào thay đổi trong ứng dụng được gọi là trạng thái, khi bất kỳ dữ liệu nào thay đổi, React sẽ kết xuất lại giao diện người dùng. const [đếm, setCount] = Phản ứng. useState(0);

Tất cả các hook React khác nhau là gì?

Nhưng mình sẽ tập trung vào một số loại React hook cần thiết nhất. .
móc nhà nước. Hãy bắt đầu bằng useState Hook từ React. .
Móc hiệu ứng. Một trong những khái niệm quan trọng nhất để thành thạo React ngày nay là hiểu cách thức hoạt động của Use Effect Hook. .
Móc ngữ cảnh