React JS cheat sheet PDF

Kể từ React v16. 2. 0, các đoạn có thể được sử dụng để trả về nhiều nút con mà không cần thêm các nút gói bổ sung vào DOM

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

2

Các thành phần lồng nhau để phân tách các mối quan tâm

Nhìn thấy.

Bọn trẻ

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

3____04

Trẻ em được thông qua là tài sản

7

Mặc định

Đặt đạo cụ mặc định

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

5

Nhìn thấy.

Đặt trạng thái mặc định

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

6

Đặt trạng thái mặc định trong

8

Và không có hàm tạo bằng Babel với các trường lớp đề xuất

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

7

Nhìn thấy.

Các thành phần khác

thành phần chức năng

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

8

Các thành phần chức năng không có trạng thái. Ngoài ra,

9 của chúng được truyền dưới dạng tham số đầu tiên cho hàm

Nhìn thấy.

thành phần tinh khiết

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

9

Phiên bản tối ưu hóa hiệu suất của

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

10. Không rerender nếu props/state không thay đổi

Nhìn thấy.

API thành phần

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

20

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

21

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

22

Các phương thức và thuộc tính này có sẵn cho các phiên bản

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

11

Nhìn thấy. API thành phần

Vòng đời

Gắn

Phương thức Mô tả

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

12 (đạo cụ)Trước khi kết xuất

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

13Không sử dụng cái này

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

14Kết xuất

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

15Sau khi kết xuất (có sẵn DOM)

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

16Trước khi xóa DOM

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

17Bắt lỗi (16+) #

Đặt trạng thái ban đầu trên

8. Thêm trình xử lý sự kiện DOM, bộ hẹn giờ (v.v.) trên

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

15, sau đó xóa chúng trên

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

16

Đang cập nhật

MethodDescription

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

51 (prevProps, prevState, snapshot)Sử dụng

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

52 tại đây, nhưng hãy nhớ so sánh các props

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

53 (newProps, newState)Bỏ qua

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

14 nếu trả về false

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

14Render

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

51 (prevProps, prevState)Hoạt động trên DOM tại đây

Được gọi khi cha mẹ thay đổi thuộc tính và

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

57. Chúng không được gọi cho các kết xuất ban đầu

Nhìn thấy.

Móc (Mới)

móc nhà nước

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

23

Móc là một bổ sung mới trong React 16. 8

Nhìn thấy. Móc trong nháy mắt

Khai báo nhiều biến trạng thái

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

24

móc hiệu ứng

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

25

Nếu bạn đã quen thuộc với các phương thức vòng đời của lớp React, bạn có thể nghĩ

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

58 Hook là sự kết hợp giữa

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

59,

class Hello extends React.Component {
  render () {
    return 

      Hello {this.props.name}
    
  }
}

51 và

81