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 Show
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 HooksNgày 29 tháng 7 năm 2021 · 3 phút đã đọc BunlongNhóm mô hình phản ứngquản lý nhà nướcuseState()khai báo trạng thái const [tên, đặtTên] = useState('Initial value'); Sao chépCập nhật trạng thái setName('Giá trị mới');< // directly Sao chépsetName((giá trị) => 'New' + value); // based on previous state Sao chépPhả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épKí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épDọ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épGhi nhớ cuộc gọi lạisử 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épGhi 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épGhi 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épPhần tử tham chiếuuserRef()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épAPI ngữ cảnhsử 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épQuản lý Nhà nướcsử 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épTạ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épTạo móc tùy chỉnh của riêng bạnMóc tùy chỉnh phải bắt đầu bằng 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épthẻ. 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 |