React js - Component specs and lifecycle
2 likes1,285 views
Tài liệu mô tả các thông số và chu trình sống của thành phần trong React, bao gồm các phương thức như render, getInitialState, và các phương thức vòng đời như componentWillMount và componentDidMount. Nó cũng giải thích về cách khởi tạo thành phần, cập nhật trạng thái và props, cũng như sử dụng proptypes để xác thực props và mixins để chia sẻ hành vi giữa các thành phần. Cuối cùng, tài liệu đưa ra quy trình chi tiết cho việc khởi tạo và cập nhật thành phần.
![1. Component Specifications
propTypes
‒ The propTypes object allows you to validate props being
passed to your components.
mixins[]
‒ The mixins array allows you to use mixins to share
behavior among multiple components.
statics {}
‒ The statics object allows you to define static methods
that can be called on the component class.](https://image.slidesharecdn.com/reactjs-componentspecsandlifecycle-160427013510/85/React-js-Component-specs-and-lifecycle-4-320.jpg)
React js - Component specs and lifecycle
- 1. Component Specs and Lifecycle
- 2. 1. Component Specifications • render • getInitialState • getDefaultProps • propTypes • Mounting • Updating • Unmounting 2. Lifecycle Method • mixins • statics • displayName
- 3. 1. Component Specifications render() - The render() method is required - The render() function should be pure getInitialState() - Invoked once before the component is mounted getDefaultProps() - Invoked once and cached when the class is created - This method is invoked before any instances are created and thus cannot rely on this.props
- 4. 1. Component Specifications propTypes ‒ The propTypes object allows you to validate props being passed to your components. mixins[] ‒ The mixins array allows you to use mixins to share behavior among multiple components. statics {} ‒ The statics object allows you to define static methods that can be called on the component class.
- 5. 2. Lifecycle Methods Mounting: 1. componentWillMount 2. componentDidMount Updating: 1. componentWillReceiveProps 2. shouldComponentUpdate 3. componentWillUpdate 4. componentDidUpdate Unmounting: componentWillUnmount
- 6. Khởi tạo component 1. Khởi tạo Class (đã thừa kế từ class Component của React) 2. Khởi tạo giá trị mặc định cho Props (defaultProps) 3. Khởi tạo giá trị mặc định cho State (getInitialState) 4. Gọi hàm componentWillMount() 5. Gọi hàm render() 6. Gọi hàm componentDidMount()
- 7. Khi state thay đổi 1. Cập nhật giá trị cho state 2. Gọi hàm shouldComponentUpdate() 3. Gọi hàm componentWillUpdate() (*) 4. Gọi hàm render() 5. Gọi hàm componentDidUpdate()
- 8. Khi Props thay đổi 1. Cập nhật giá trị cho props 2. Gọi hàm componentWillReceiveProps() 3. Gọi hàm shouldComponentUpdate() 4. Gọi hàm componentWillUpdate() – với điều kiện hàm trên return true 5. Gọi hàm render() 6. Gọi hàm componetDidUpdate()