30/09/2019, 08:30
Những concept JavaScript bạn cần biết trước khi học React
1. Nên tìm hiểu những ý tưởng và concept trước khi lao vào học react Kiến thức tiên quyết mà bạn phải làm quen chính là một số tính năng JavaScript mà bạn sẽ sử dụng rất rất nhiều lần trong React. Đôi khi mọi người nhầm lẫn nghĩ rằng đó là một trong các tính năng được React ...
1. Nên tìm hiểu những ý tưởng và concept trước khi lao vào học react
- Kiến thức tiên quyết mà bạn phải làm quen chính là một số tính năng JavaScript mà bạn sẽ sử dụng rất rất nhiều lần trong React.
- Đôi khi mọi người nhầm lẫn nghĩ rằng đó là một trong các tính năng được React cung cấp, nhưng thật ra nó chỉ là cú pháp JavaScript hiện đại thôi.
- Có thể nói rằng Javascript là xương sống của React, vậy nên việc tìm hiểu Javascript chính là đang tiến đến dần đến React.
- Mình sẽ đề cập một danh sách những điều giúp mọi người tăng tốc trong việc tìm hiểu React.
2. Biến
- Giống như các ngôn ngữ lập trình khác, biến được hiểu như là gán cho một định danh, sau đó có thể sử dụng lại bằng cách gọi lại chính tên định danh đó (cần chú ý scope khi khai báo).
- Một biến phải được khai báo trước khi sử dụng nó. Trong javascript có 3 cách để làm điều này, sử dụng var, let và const. Cả 3 cách đều có cách tiếp cận và cách sử dụng khác nhau.
2.1 Sử dụng var
- Cho đến ES2015, var là cấu trúc duy nhất để định nghĩa một biến
|
1 2 3 4 |
var a = 0; |
- Nếu bạn không gán giá trị cho nó khi khai báo, nó sẽ nhận giá trị là undefined cho đến khi bạn gán giá trị
|
1 2 3 4 5 6 |
var a; // a == 'undefined' // typeof a == 'undefined' |
- Bạn có thể ghi đè biến nhiều lần:
|
1 2 3 4 5 |
var a = 1; var a = 2; |
- Có thể khai báo nhiều biến trên một dòng:
|
1 2 3 4 |
var a = 1, b = 2; |
- var tạo ra một biến có phạm vi truy cập xuyên suốt các function (biến toàn cục).
2.2 Sử dụng let
|
1 2 3 4 |
let a = 3; |
- let là một tính năng mới được giới thiệu trong ES2015 và về cơ bản nó là một phiên bản tốt hơn var.
- scopecủa nó được giới hạn trong block, statement hoặc biểu thức nơi nó được xác định và tất cả các block bên trong được chứa.
- Các coder javascript hiện tại đã chọn chỉ sử dụng let và loại bỏ hoàn toàn việc sử dụng var
- Ngược lại với var, let không tạo ra một biến toàn cục, điều này hạn chế việc xảy ra lỗi vặt hơn
2.3 Sử dụng const
- Khác với let và var, khai báo biến với const thì giá trị không được thay đổi nữa và nó không thể được gán lại thành một giá trị khác.
|
1 2 3 4 |
const a = 22; |
- const có scope được giới hạn trong block, giống với let
Tham khảo thêm
3. Arrow functions
- Arrow function được giới thiệu trong ES6/ ECMAScript 2015, kể từ khi giới thiệu, nó làm thay đổi cách chúng ta viết và nhìn nhận một function
- Trực quan mà nói, nó làm đơn giản hơn trong việc viết code function rất nhiều, trông đơn giản và thích thú hơn nhiều.
- Từ
|
1 2 3 4 5 6 |
const myFactor = function () { // ... } |
thành
|
1 2 3 4 5 6 |
const myFactor = () => { // ... } |
- Nếu thân hàm chỉ chứa một câu lênh, bạn có thể bỏ qua dấu ngoặc nhọn và viết nó trên một dòng
|
1 2 3 4 |
const myFunction = () => doSomething() |
- Các tham số được truyền trong ngoặc đơn:
|
1 2 3 4 |
const myFunction = (param1, param2) => doSomething(param1, param2) |
- Nếu bạn chỉ có một và chỉ một tham số, bạn nên lược bỏ luôn cả ngoặc dơn đó
|
1 2 3 4 |
const myFunction = param => doSomething(param) |
- Dễ thích hơn nhiều đúng không nào =)).
3.1 Implicit return
- Với arrow functionthì chúng ta thêm tính năng là implicit return, cụ thể là
- Thay vì:
|
1 2 3 4 5 6 7 |
const myFactor = function() { return 'test'; } myFactor () // 'test' |
ta có thể viết:
|
1 2 3 4 5 6 |
const myFactor = () => 'test' myFactor () // 'test' |
- Một ví dụ khác, khi trả về một đối tượng, hãy nhớ bọc dấu ngoặc nhọn trong ngoặc đơn để tránh nó được coi là dấu ngoặc của thân hàm:
|
1 2 3 4 5 6 |
const myFunction = () => ({value: 'test'}) myFactor () // {value: 'test'} |
3.2 this trong arrow function
- this là một khái niệm có thể phức tạp để nắm bắt, vì nó thay đổi rất nhiều tùy thuộc vào ngữ cảnh.
- Nó rất quan trọng để làm rõ khái niệm này vì các arrow function hoạt động rất khác so với các hàm thông thường.
- Khi được định nghĩa là một phương thức của một đối tượng, trong một hàm thông thường, điều này đề cập đến đối tượng, vì vậy bạn có thể làm:
|
1 2 3 4 5 6 7 8 9 10 |
const car = { model: 'Fiesta', manufacturer: 'Ford', fullName: function() { return `${this.manufacturer} ${this.model}` } } |
gọi car.fullName () sẽ trả về "Ford Fiesta".
- Scope của this trong arrow function là kế thừa từ bối cảnh thực hiện.
- arrow function hoàn toàn không định nghĩa giá trị của this, do đó, với đoạn code trên, car.fullName () sẽ không hoạt động và sẽ trả về chuỗi "undefined undefined"
|
1 2 3 4 5 6 7 8 9 10 |
const car = { model: 'Fiesta', manufacturer: 'Ford', fullName: () => { return `${this.manufacturer} ${this.model}` } } |
- arrow function không thể được sử dụng như các hàm khởi tạo, khi khởi tạo một đối tượng sẽ raise TypeError lỗi.
- Đây là nơi các chức năng thông thường nên được sử dụng thay thế, khi không cần bối cảnh động.
- Đây cũng là một vấn đề khi xử lý các sự kiện. DOM Event listeners set this là thành phần đích và nếu bạn dựa vào điều này trong trình xử lý sự kiện, thì một chức năng thông thường là cần thiết….:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const link = document.querySelector('#link') link.addEventListener('click', () => { // this === window }) const link = document.querySelector('#link') link.addEventListener('click', function() { // this === link }) |
Tham khảo thêm
4. Rest và spread
4.1 Spread Operator
- Bạn có thể mở rộng một mảng, đối tượng, hoặc một string với spread operator(...)
- Hãy bắt đầu với một ví dụ mảng.
|
1 2 3 4 |
const a = [1, 2, 3] |
- Bạn có thể tạo một mảng mới bằng cách sử dụng
|
1 2 3 4 |
const b = [... a, 4, 5, 6] |
- Cũng có thể tạo một bản sao của một mảng bằng cách sử dụng
|
1 2 3 4 |
const c = [... a] |
- Điều này làm việc cho các đối tượng khá tốt giúp nhân bản một đối tượng:
|
1 2 3 4 |
const newObj = {... oldObj} |
- Sử dụng với string, spread operator tạo một mảng với mỗi kí tự trong chuỗi:
|
1 2 3 4 5 |
const hey = 'hey' const arrayized = [...hey] // ['h', 'e', 'y'] |
- Toán tử này có một số ứng dụng khá hữu ích. Điều quan trọng nhất là khả năng sử dụng một mảng làm đối số hàm theo cách rất đơn giản:
|
1 2 3 4 5 6 |
const f = (foo, bar) => {} const a = [1, 2] f(...a) |
4.2 Rest element
rest element rất hữu ích khi làm việc với array destructuring:
|
1 2 3 4 5 6 7 8 |
const numbers = [1, 2, 3, 4, 5] [first, second, ...others] = numbers // first = 1 // second = 2 // others = [3, 4, 5] |
và spread elements:
|
1 2 3 4 5 6 |
const numbers = [1, 2, 3, 4, 5] const sum = (a, b, c, d, e) => a + b + c + d + e const sumOfNumbers = sum(...numbers) |
4.3 Rest properties
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const { first, second, ...others } = { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 } first // 1 second // 2 others // { third: 3, fourth: 4, fifth: 5 } |
- Spread properties cho phép tạo một đối tượng mới bằng cách kết hợp các thuộc tính của đối tượng được truyền sau spread operator:
