2017-12-02 19 views
7

tôi thấy rằng việc sử dụng các phương pháp vòng đời componentWillMount để thiết lập trạng thái ban đầu ...Có lý do nào mà mọi người thích sử dụng hàm tạo của thành phần React thay vì componentWillMount không?

componentWillMount() { 
    this.state = { 
    comments: [] 
    }; 
} 

... là hơi đơn giản hơn so với sử dụng các nhà xây dựng. Cụ thể là khi bạn sử dụng hàm tạo, bạn để gọi super().

constructor() { 
    super(); 
    this.state = { 
    comments: [] 
    }; 
} 

Không chỉ có vậy nhưng nếu thành phần của bạn được truyền props và/hoặc state sau đó bạn phải tự vượt qua những qua là tốt.

constructor(props, state) { 
    super(props, state); 
    ... 
} 

tôi đã không có bất kỳ vấn đề sử dụng componentWillMount nhưng tôi hầu như không bao giờ nhìn thấy bất cứ ai sử dụng nó cho việc thiết lập nhà nước (trừ khi họ đang tránh es6 và không có các lớp học). Tôi nhận được rằng chúng ta có quyền truy cập vào constructor trong một lớp es6, nhưng tại sao lại sử dụng nó khi bạn phải tạo một passthrough thủ công cho constructor cha và có một phương thức vòng đời hoàn hảo sẵn sàng và chờ đợi để bạn không phải làm điều đó ?

Chỉ cần tò mò nếu có một lý do thực tế thực tế hoặc nếu nó chủ yếu chỉ là sở thích.

+0

bạn cũng có thể chỉ sử dụng thuộc tính lớp và tránh trạng thái khởi tạo trong một trong số chúng – linasmnew

+2

Thân gửi cử tri: Nó không phải là "dựa trên ý kiến" trừ khi câu trả lời có nghĩa đen là "dựa trên ý kiến" bởi vì câu hỏi thực sự của tôi là có hay không ** thực tế ** lý do để lựa chọn một hoặc khác. – Chev

+0

@LinasMickevicius Tôi không chắc chắn những gì bạn có ý nghĩa ở đó. Tâm trí mở rộng về điều đó? – Chev

Trả lời

7

Constructor là nơi "chính xác" duy nhất để khởi tạo (gán trực tiếp) state. tức là this.state = {...}

Phần còn lại của các hàm bạn xác định trong thành phần (componentWillMount, v.v.) được gọi là "callback vòng đời" được gọi bởi công cụ React. Dự kiến ​​state sẽ không thay đổi trong suốt thời gian tồn tại của thành phần và không bao giờ được gán trực tiếp. Thay vào đó, bạn sẽ phải this.setState({...}) để thực hiện bất kỳ thay đổi nào đối với state ở bất kỳ đâu bên ngoài hàm tạo.

Trong khi thực tiễn hiện tại của bạn có thể không cho đến nay đã gây ra bất kỳ sự cố nào, việc đảm bảo vẫn không được đảm bảo để tiếp tục hoạt động theo cùng một cách. Nếu vì lý do nào đó, React đọc số state giữa các cuộc gọi lại vòng đời và bạn đã đột biến nó trong cuộc gọi lại componentWillMount của bạn, điều này có thể tạo ra các hậu quả không mong muốn.

Lời khuyên của tôi sẽ chỉ để khởi tạo trực tiếp state trong nhà xây dựng của bạn và sử dụng setState ở mọi nơi khác.

Nếu tính cách rườm rà là một mối quan tâm và bạn không có mục đích nào khác cho các nhà xây dựng hơn khởi state của bạn, và bạn không cần props để khởi state của bạn, đơn giản tuyên bố và khởi tạo tài sản nhà nước của bạn:

class MyComponent extends React.Component { 
    state = {} 
} 
+0

Điều này có ý nghĩa. Tôi đánh giá cao câu trả lời kỹ lưỡng. – Chev

+0

re: chỉnh sửa của bạn -> Có vẻ như tham chiếu 'this.props' bên trong trình khởi tạo thuộc tính lớp thực sự không hoạt động. 'state = {show: this.props.showing}' Tôi vừa thử nghiệm nó. Tôi ngạc nhiên nó mặc dù tbh. – Chev

+0

Thú vị! Tôi vẫn sẽ tránh xa việc đó. Tôi đoán là lý do 'this.props' có sẵn là vì hàm tạo' super() 'được gọi đầu tiên và thêm nó vào cá thể, và nó có sẵn cho bạn trong quá trình khởi tạo' state'. Bây giờ, nếu bạn kết thúc việc tạo ra một hàm tạo của riêng bạn, thứ tự của các khởi tạo thuộc tính có thể thay đổi, và 'props' có thể không còn được khởi tạo bên ngoài constructor của bạn nữa. Giữ mã của bạn càng dễ đoán càng tốt. Khởi tạo thuộc tính khởi tạo mà giả định và truy cập một thuộc tính khác có vẻ nguy hiểm và dễ bị lỗi với tôi :) –

2

Vâng theo DOCS:

chung, chúng tôi khuyên bạn sử dụng các nhà xây dựng() để thay thế.

Nó cũng nói rằng:

Đây là móc vòng đời chỉ gọi trên máy chủ rendering.

Vì vậy, tôi đoán đây có thể là một phần lý do.

Các vấn đề liên quan