trạng thái sự kiện vòng đời và prevState trong react.js

Question

Dưới đây là bộ đếm đơn giản phản ứng. Nhưng tôi có 3 sự nhầm lẫn.

1. Trạng thái trong dòng 3 là gì? trông giống như một biến toàn cầu, nó có ý nghĩa nếu nó có var hoặc const trước nó. Đó là một chức năng vòng đời/var?

2. Tôi có phải nhập Thành phần từ phản ứng không? Tôi nhớ tôi không cần phải làm điều đó trong v15.

3. Trường hợp nào prevState đến từ đâu?

import React, { Component } from 'react'; 

class Counter extends Component { 
    state = { value: 0 }; 

    increment =() => { 
    this.setState(prevState => ({ 
     value: prevState.value + 1 
    })); 
    }; 

    decrement =() => { 
    this.setState(prevState => ({ 
     value: prevState.value - 1 
    })); 
    }; 

    render() { 
    return (
     <div> 
     {this.state.value} 
     <button onClick={this.increment}>+</button> 
     <button onClick={this.decrement}>-</button> 
     </div> 
    ) 
    } 
} 

Answer 1

Đây là một bản demo với một mã số nhận xét ra để cung cấp cho bạn thêm thông tin: http://codepen.io/PiotrBerebecki/pen/rrGWjm

1. Nhà nước là gì trong dòng 3? trông giống như một biến toàn cầu, nó làm cho cảm giác nếu nó có var hoặc const trước nó. Đó có phải là vòng đời chức năng/var?

state trong dòng 3 chỉ là thuộc tính của thành phần Bộ đếm. Một cách khác để initialising một tiểu bang trong React sử dụng cú pháp ES6 là như sau:

constructor() { 
    super(); 
    this.state = { 
    value: 0 
    } 
} 

Phản ứng tài liệu: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

Các [Phản ứng ES6 lớp] API tương tự như React.createClass với ngoại lệ của getInitialState. Thay vì cung cấp phương thức getInitialState riêng, bạn thiết lập thuộc tính trạng thái của riêng bạn trong hàm tạo.

2. Tôi có phải nhập Thành phần từ phản ứng không? Tôi nhớ tôi không cần phải làm điều đó trong v15.

Bạn có thể cách khác chỉ nhập khẩu Phản ứng và xác định một lớp theo cách sau:

import React from 'react'; 

class Counter extends React.Component { 
... 

dưới đây cũng sẽ cho phép bạn sử dụng Component API:

import React, { Component } from 'react'; 

class Counter extends Component { 
... 

3. Trường hợp nào prevState đến từ đâu?

Các prevState xuất phát từ api setstate: https://facebook.github.io/react/docs/component-api.html#setstate

Cũng có thể để vượt qua một chức năng với chữ ký chức năng (nhà nước, đạo cụ). Điều này có thể hữu ích trong một số trường hợp khi bạn muốn để enqueue bản cập nhật nguyên tử tham khảo giá trị trước đó của đạo cụ nhà nước trước khi đặt bất kỳ giá trị nào. Ví dụ, giả sử chúng ta muốn để tăng giá trị trong tình trạng:

this.setState(function(previousState, currentProps) { 
    return { 
    value: previousState.value + 1 
    }; 
}); 

Bạn thường sẽ thấy các nhà phát triển cập nhật trạng thái theo cách sau. Điều này kém tin cậy hơn so với phương thức trên vì trạng thái có thể được cập nhật không đồng bộ và chúng ta không nên dựa vào các giá trị của nó để tính toán trạng thái tiếp theo.

this.setState({ 
    value: this.state.value + 1 // prone to bugs 
}); 

Full mã từ codepen tôi:

class Counter extends React.Component { 

    // state = { value: 0 }; 

    // you can also initialise state in React 
    // in the constructor: 
    constructor() { 
    super(); 
    this.state = { 
     value: 0 
    } 
    } 

    increment =() => { 
    this.setState(prevState => ({ 
     value: prevState.value + 1 
    })); 
    } 

    decrement =() => { 
    this.setState(prevState => ({ 
     value: prevState.value - 1 
    })); 
    } 

    render() { 
    return (
     <div> 
     {this.state.value} 
     <button onClick={this.increment}>+</button> 
     <button onClick={this.decrement}>-</button> 
     </div> 
    ) 
    } 
} 


ReactDOM.render(
    <Counter />, 
    document.getElementById('app') 
); 

Answer 2

Có một số tính năng trong mã của bạn có liên quan với (ES2015) phiên bản ES6, vì vậy đó là lý do tại sao bạn có thể bị nhầm lẫn:

nhà nước là gì trong dòng 3? trông giống như một biến toàn cầu, nó có ý nghĩa nếu nó có var hoặc const trước nó. Đó là một chức năng vòng đời/var?

Vì nó nằm bên trong cơ thể class, đây không phải là biến toàn cục. Trong trường hợp này, state là thuộc tính sẽ được đặt thành các phiên bản Counter, vì vậy bạn có thể truy cập vào đó bằng this.state.

Tôi có phải nhập Thành phần từ phản ứng không? Tôi nhớ tôi không cần phải làm điều đó trong v15.

Khi tạo một thành phần sử dụng một lớp, bạn cần phải mở rộng các lớp Component, vì vậy trong trường hợp này: yes bạn cần phải nhập khẩu Component hoặc bạn có thể đã sử dụng class Counter extends React.Component là tốt.

Trường hợp nào prevState đến từ đâu?

Một lần nữa, một tính năng ES6. Nội dung đang được chuyển đến phương pháp this.setState() là chức năng . Điều này có thể gây nhầm lẫn vì đây là chức năng mũi tên =>. Vì vậy, previousState thực sự là một tham số của hàm đó. Để giúp bạn xem các hình ảnh, đoạn code trên là tương tự đó:

this.setState(function (prevState) { 
    return { 
    value: prevState.value - 1 
    }; 
}); 

Có một số sự khác biệt giữa một mũi tên chức năng 'bình thường' và, mặc dù, vì vậy tôi khuyên bạn nên tìm kiếm các tính năng ES6 để làm quen với nó hơn.