Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React js - Component specs and lifecycle

970 views

Published on

Sort document for Component specs and lifecycle of ReactJS (Vietnamese)

Published in: Technology
  • Login to see the comments

React js - Component specs and lifecycle

  1. 1. Component Specs and Lifecycle
  2. 2. 1. Component Specifications • render • getInitialState • getDefaultProps • propTypes • Mounting • Updating • Unmounting 2. Lifecycle Method • mixins • statics • displayName
  3. 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. 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. 5. 2. Lifecycle Methods Mounting: 1. componentWillMount 2. componentDidMount Updating: 1. componentWillReceiveProps 2. shouldComponentUpdate 3. componentWillUpdate 4. componentDidUpdate Unmounting: componentWillUnmount
  6. 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. 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. 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()

×