$scope.readFile = function(files,success) {
var data= new Array();
if(files===undefined||files==null){
return success(data);
}
//tạo Promise - bất đồng bộ đọc nhiều file
return Promise.all([].map.call(files, function (file) {
return new Promise(function (resolve, reject) {
var reader = new FileReader();
reader.onloadend = function () {
resolve({name: file.name, data:reader.result});
};
reader.readAsDataURL(file);
});
})).then(function (results) {
return success(results);
});
}
Lần lượt các hành động sau để khởi tạo component:
- Khởi tạo Class (đã thừa kế từ class Component của React)
- Khởi tạo giá trị mặc định cho Props (defaultProps)
- Khởi tạo giá trị mặc định cho State (trong hàm constuctor)
- Gọi hàm componentWillMount()
- Gọi hàm render()
- Gọi hàm componentDidMount()
- Cập nhật giá trị cho state
- Gọi hàm shouldComponentUpdate()
- Gọi hàm componentWillUpdate() – với điều kiện hàm trên return true
- Gọi hàm render()
- Gọi hàm componentDidUpdate()
- Khi Props thay đổi
- Gọi hàm componentWillReceiveProps()
- Gọi hàm shouldComponentUpdate()
- Gọi hàm componentWillUpdate() – với điều kiện hàm trên return true
- Gọi hàm render()
- Gọi hàm componetDidUpdate()
- Gọi hàm componentWillUnmount()
* Nên:
> thiết lập state ban đầu
> nếu không sử dụng cú pháp thuộc tính class ->
chuẩn bị tất cả các fields class và ràng buộc
các function sẽ được pass như callbacks
* Ko:
> gây ra bất kỳ side-effects (hiệu ứng lề) (gọi AJAX ....)
* Nên:
> Cập nhật state
* Ko:
> gây ra bất kỳ side-effects (hiệu ứng lề) (gọi AJAX ....)
- Function này sẽ được gọi trong mỗi lần update vòng đời do các thay đổi đối với props (component cha mẹ thực hiện re-rendering)
- Function này là lý tưởng nếu bạn có một component mà các phần của state phụ thuộc vào props được truyền từ component cha mẹ như việc gọi this.setState ở đây sẽ không gây ra thêm một lời gọi render
componentWillReceiveProps(nextProps) {
if(nextProps.myProp !== this.props.myProps) {
// nextProps.myProp có giá trị khác với current prop của chúng ta
// nên chúng ta có thể thực hiện các phép tính trên giá trị mới
}
}
* Nên:
> đồng bộ hóa state với props
* Ko:
> gây ra bất kỳ side-effects (hiệu ứng lề) (gọi AJAX ....)
* Nên:
> quyết định có cập nhật hay không khi trạng thay đổi state, props
* Ko:
> gây ra bất kỳ side-effects (hiệu ứng lề) (gọi AJAX ....)
> gọi setState
* Nên:
> đồng bộ hóa state với props
* Ko:
> gây ra bất kỳ side-effects (hiệu ứng lề) (gọi AJAX ....)
- Có thể được sử dụng thay cho componentWillReceiveProps trong trường hợp shouldComponentUpdate đc implement(true) vì khi này component chắc chắn được render lại
- hàm này được đảm bảo gọi duy nhất trong quá trình re-render
- hàm này được gọi với các object-maps của các props, state và context trước đây => kiểm tra nếu giá trị đã cho thay đổi->thực hiện các thay đổi tiếp theo:
if(prevProps.myProps !== this.props.myProp) {
// this.props.myProp có một giá trị khác
// chúng ta có thể thực thi các operations mà sẽ cần
// giá trị mới và/hoặc gây ra side-effects
// như gọi AJAX với giá trị mới - this.props.myProp
}
* Nên:
> tạo ra side-effects (hiệu ứng lề) (gọi AJAX ....)
* Ko:
> gọi this.setState vì nó sẽ tạo ra một re-render
- Thay đổi, update realm table tham khảo từ khóa migration