React.js CheatSheet - Bảng Ghi Nhớ Tóm Tắt Dành Cho Developer

Bảng ghi nhớ (cheatsheet) dưới đây tóm tắt lại những nội dung chính cốt lõi mà các developer hay sử dụng khi viết app sử dụng React.js:

ReactDOM

Render Component

Để render một component với tên ví dụ là MyComponent vào trong phần tử DOM element có giá trị id là container:

ReactDOM.render(<MyComponent />, document.getElementById('container'));

Câu lệnh trên trả về giá trị là một đối tượng React component mới được tạo ra. Chúng ta có thể gán giá trị trả về trên cho môt biết để có thể dễ dàng tham chiếu tới component:

componentRef = ReactDOM.render(<MyComponent />, document.getElementById('container'));

Tìm DOM Element

Để tìm môt DOM element tương ứng được dùng để tạo ra component:

ReactDOM.findDOMNode(componentRef);

Câu lệnh trên sẽ trả về DOM element với id làcontainer.

Xoá Component Đã Được Mount

Để xoá một component đã được mount (hay tạo ra) từ một DOM element cho trước:

ReactDOM.unmountComponentAtNode(document.getElementById('container'))

Đoạn câu lệnh trên sẽ xoá đi component <MyComponent> từ phần tử DOM với id là container.

Render Một React Element Trên Server

Để trả về mã HTML của một React Element:

ReactDOMServer.renderToString(<MyComponent />);

Câu lệnh trên chỉ nên sử dụng trên server để trả về mã HTML cho client.

Component

Cập Nhật State

Gán giá trị mới cho một hay nhiều key trong state của component:

this.setState({someKey: 'a new value'});

React sẽ cập nhật UI của component khi phương thức setSate() khi được gọi. Lưu ý rằng khi chỉ update một key trong state thì setState() vẫn giữ nguyên giá trị của các key còn lại trong state.

Thay Đổi State

Thay đổi state của component với một state mới:

this.replaceState({someKey: 'a new value'});

Render với forceUpdate()

Khi một component được update ví dụ như khi gán giá trị mới cho state thì phương thức shouldComponentUpdate() sẽ tự động được gọi. Để render component UI và không gọi shouldComponentUpdate () chúng ta sẽ sử dụng phương thức forceUpdate():

this.forceUpdate();

React Lifecycle

Các phương thức cần nhớ trong React Lifecycle:

componentWillMount()

Phương thức này được gọi ngay trước khi component được render lần đầu tiên:

componentWillMount: function ()

componentDidMount()

Phương thức này được gọi ngay sau khi component được render lần đầu tiên:

componentDidMount: function ()

componentWillReceiveProps()

Phương thức này được gọi ngay trước khi thuộc tính của component được cập nhật thành giá trị mới là nextProps:

componentWillReceiveProps: function (nextProps)

shouldComponentUpdate

Phương thức này được gọi ngay trước khi component được render và sau khi thuộc tính component được cập nhật:

shouldComponentUpdate: function (nextProps, nextState)

componentDidUpdate()

Phương thức này được gọi ngay sau khi component UI đã được cập nhật:

componentDidUpdate: function (prevProps, prevState)

componentWillUnmount()

Phương thức này được gọi ngay trước khi một component được unmount (hay xoá) khỏi DOM element:

componentWillUnmount: function ()