Please enable JavaScript.
Coggle requires JavaScript to display documents.
ReactJS, Lifecycle
dùng cho class, (Class), v (Còn chiều ngược lại (tức…
ReactJS
-
Props: là obj.
+Giúp giao tiếp giữa các compohnent bằng cách truyền tahm số qua lại giữa các components
-
-
-
Props validation
-
use:
import PropTypes from 'prop-types';
ClassName|| functionsName.propsTypes = {
name: PropTypes.string}
-
-
-
data binding
Data binding là quá trình thiết lập kết nối giữa giao diện ứng dụng (application UI) và các chức năng ở tầng logic của ứng dụng (business logic).
one-way-to-source
là khi textbox thay đổi, hoặc là bấm nút, nó sẽ phát sinh 1 sự kiện, handle sự kiện đó sẽ thay đổi dưới data
two way binding
Two-way ra đời với mục đích gộp 2 cái trên lại thành 1, để dễ dàng hơn cho dev
one way binding
Load data lên view
(nhận thông tin thông qua các đối số (được biểu diễn trong thuộc tính props) và truyền thông tin qua các giá trị trả về của chúng (giá trị trả về của hàm kết xuất)
-
hook
hàm này nhận đầu vào là giá trị khởi tạo của 1 state và trả ra 1 mảng gồm có 2 phần tử, phần tử đầu tiên là state hiện tại, phần tử thứ 2 là 1 function dùng để update state (giống như hàm setState cũ vậy)
Lifecycle
dùng cho class
DOM
-
-
-
Phần tử trong DOM có cấu trúc đối tượng, phương thức thuộc tính. Giúp truy xuất dễ dàng.
Điều chậm ở đây là layout mà các trình duyệt phải làm bất cứ khi nào DOM thay đổi. Mỗi khi DOM thay đổi, trình duyệt cần phải tính toán lại CSS, thực hiện dựng lại trang web. Đây là việc cần có thời gian.
-
-
-
-
updating
componentWillUpdate()
truyền vào hai tham số nextprops, nextState
sẽ chạy trước hàm render().
có thể thực hiện các hành động như update state, props,...trong phương thức này trước khi tiến hành re-render.
-
shoudComponentUpdate()
truyền vào hai tham số nextprops, nextState
Giá trị trả về sẻ là True, False
quyết định xem react có nên tiếp tụ render hay không
Intialization
bắt đầu hành trình của mình bằng cách khởi tạo state, props thường được viết trong hàm constructor
virtual DOM
-
Diffing
để so sánh và đối chiếu để biết được sự cập nhật được diễn ra ở đâu sau đó cập nhật nó mà bỏ qua những elements không liên quan.
Virtual DOM sử dụng key, ref mà ở DOM không có 😄 và Virtual DOM được tạo mới sau mỗi lần render lại.
-
một định dạng dữ liệu JavaScript nhẹ được dùng để thể hiện nội dung của DOM tại một thời điểm nhất định nào đó.
-
mounting
-
componentDidMount()
hàm chạy sau hàm render() ở đây cũng là nơi thực hiện các hàm AJAX, axios request, DOM hay update state sẽ được thực thi tại đây
-
-
-
-
-
-
-
-
-
console.log("day la a", a);
console.log("day la b", b);
-
v
Còn chiều ngược lại (tức one-way-to-source ấy) là khi textbox thay đổi, hoặc là bấm nút, nó sẽ phát sinh 1 sự kiện, handle sự kiện đó sẽ thay đổi dưới data
-
Two-way ra đời với mục đích gộp 2 cái trên lại thành 1, để dễ dàng hơn cho dev
-
Browser
browser's main component
-
-
-
UI backend
Vẽ các widgets cơ bản, như các hộp và cửa sổ
the user interface
address bar, back, forward btn, bookmarking menu,..mỗi phần hiển thị của trình duyệt. Ngoại trừ cửa sổ. nơi hiển thị trình duyệt
-
-
browser's main function
HIển thị tài nguyên bạn chọn bằng cách yêu cầu tài nguyên đó lên máy chủ và hiển thị trong cửa sổ trình duyệt.
Các điểm chung của trình duyệt: thanh URl nút back, forward, bookmark options, Refresh, stop refresh, home btn.
-
-
-
scss
use icon reactjs
-
-
<IconContext.Provider className="App-logo" value={{ color: "yellow", size: "30px"}}><FaReact />
</IconContext.Provider>
-
-
JS6 Summary
Object.freeze ()
găn chặn sửa đổi hoặc mở rộng giá trị hiện có của một đối tượng. Nó có thể thay đỗi khi gán lại giá trị khác
-