We want to hear from you!Take our 2021 Community Survey!
Support Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ Help Provide Humanitarian Aid to Ukraine.

React.Component

ื”ื“ืฃ ื”ื–ื” ืžื›ื™ืœ ื”ืคื ื™ื™ืช API ืžืคื•ืจื˜ืช ืขื‘ื•ืจ ื”ื”ื’ื“ืจื” ืฉืœ ืงื•ืžืคื•ื ื ื˜ืช ืžื—ืœืงื” ื‘-React. ื”ื•ื ืžื ื™ื— ืฉืืชื ืžื›ื™ืจื™ื ืงื•ื ืกืคื˜ื™ื ื‘ืกื™ืกื™ื™ื ื‘-React, ื›ื“ื•ื’ืžืช ืงื•ืžืคื•ื ื ื˜ื•ืช ื•-Props, ื‘ื ื•ืกืฃ ื’ื State ื•ืžืขื’ืœ-ื—ื™ื™ื. ืื ืืชื ืœื, ืงืจืื• ืื•ืชื ืชื—ื™ืœื”.

ืกืงื™ืจื”-ื›ืœืœื™ืช

React ืžืืคืฉืจืช ืœื”ื’ื“ื™ืจ ืงื•ืžืคื•ื ื ื˜ื•ืช ื›ืžื—ืœืงื•ืช ืื• ื›ืคื•ื ืงืฆื™ื•ืช. ืงื•ืžืคื•ื ื ื˜ื•ืช ื”ืžื•ื’ื“ืจื•ืช ื›ืžื—ืœืงื•ืช ื›ืจื’ืข ืžืกืคืงื•ืช ื™ื•ืชืจ ืืคืฉืจื•ื™ื•ืช ืืฉืจ ืžืชื•ืืจื•ืช ื‘ืคื™ืจื•ื˜ ื‘ื“ืฃ ื–ื”. ื›ื“ื™ ืœื”ื’ื“ื™ืจ ืงื•ืžืคื•ื ื ื˜ืช ืžื—ืœืงื” ื‘-React, ื ื“ืจืฉ ืœื”ืจื—ื™ื‘ ืœ-React.Component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ื”ืžืชื•ื“ื” ื”ื™ื—ื™ื“ื” ืฉื—ื™ื™ื‘ ืœื”ื’ื“ื™ืจ ื‘ืชืช-ืžื—ืœืงื” ืžืกื•ื’ React.Component ื ืงืจืืช render(). ื›ืœ ืฉืืจ ื”ืžืชื•ื“ื•ืช ื”ืžืชื•ืืจื•ืช ื‘ื“ืฃ ื–ื” ื”ืŸ ืื•ืคืฆื™ื•ื ืœื™ื•ืช.

ืื ื—ื ื• ืžืžืœื™ืฆื™ื ื‘ื—ื•ื ื ื’ื“ ื™ืฆื™ืจืช ืงื•ืžืคื•ื ื ื˜ื•ืช-ื‘ืกื™ืก ืžืฉืœื›ื. ื‘ืงื•ืžืคื•ื ื ื˜ื•ืช React, ืฉื™ืžื•ืฉ ื—ื•ื–ืจ ื‘ืงื•ื“ ืžื•ืฉื’ ื‘ืขื™ืงืจ ืขืœ-ื™ื“ื™ ืงื•ืžืคื•ื–ื™ืฆื™ื” ืžืืฉืจ ืขืœ-ื™ื“ื™ ื”ื•ืจืฉื”.

ื”ืขืจื”:

React ืœื ื›ื•ืคื” ืขืœ ืฉื™ืžื•ืฉ ื‘ืชื—ื‘ื™ืจ ืžื—ืœืงื•ืช ืฉืœ ื’ืจืกืช ES6. ืื ืืชื ืžืขื“ื™ืคื™ื ืœื”ื™ืžื ืข ืžืžื ื•, ืืชื ืจืฉืื™ื™ื ืœื”ืฉืชืžืฉ ื‘ืžื•ื“ื•ืœ create-react-class ืื• ื”ืจื—ื‘ื” ืžื•ืชืืžืช ื“ื•ืžื”, ื‘ืžืงื•ื. ื”ืขื™ืคื• ืžื‘ื˜ ื‘-ืฉื™ืžื•ืฉ ื‘-React ืœืœื ื’ืจืกืช ES6 ื›ื“ื™ ืœืœืžื•ื“ ืขื•ื“.

ืงื•ืžืคื•ื ื ื˜ืช ืžืขื’ืœ-ื”ื—ื™ื™ื

ืœื›ืœ ืงื•ืžืคื•ื ื ื˜ื” ืงื™ื™ืžื•ืช ืžืกืคืจ โ€œืžืชื•ื“ื•ืช ืฉืœ ืžืขื’ืœ ื—ื™ื™ืโ€ ืฉื ื™ืชืŸ ืœื“ืจื•ืก ื›ื“ื™ ืœื”ืจื™ืฅ ืงื•ื“ ื‘ื–ืžื ื™ื ืžืกื•ื™ืžื™ื ื‘ืชื”ืœื™ืš. ืืชื ื™ื›ื•ืœื™ื ืœื”ืฉืชืžืฉ ื‘ื“ื™ืื’ืจืžืช ืžืขื’ืœ-ื”ื—ื™ื™ื ื”ื–ื• ื›ืฉืœื™ืฃ. ื‘ืจืฉื™ืžื” ืžื˜ื”, ืžืชื•ื“ื•ืช ืžืขื’ืœ-ื—ื™ื™ื ืฉื‘ืฉื™ืžื•ืฉ ื ืคื•ืฅ ื™ื•ืชืจ, ืžืกื•ืžื ื•ืช ื‘ืžื•ื“ื’ืฉ. ืฉืืจ ื”ืžืชื•ื“ื•ืช ืงื™ื™ืžื•ืช ืขื‘ื•ืจ ืฉื™ืžื•ืฉื™ื ื ื“ื™ืจื™ื ื™ื•ืชืจ.

ืขื™ื’ื•ืŸ (Mounting)

ืงืจื™ืื” ืœืžืชื•ื“ื•ืช ื”ื‘ืื•ืช ืžืชื‘ืฆืขื•ืช ื‘ืกื“ืจ ื”ื–ื” ื›ืืฉืจ ืžื•ืคืข ืฉืœ ืงื•ืžืคื•ื ื ื˜ื” ื ื•ืฆืจ ื•ืžื•ื›ื ืก ืœืชื•ืš ื”-DOM:

ื”ืขืจื”:

ื”ืžืชื•ื“ื•ืช ื”ืืœื• ื ื—ืฉื‘ื•ืช ืœื™ืฉื ื•ืช ื•ื›ื“ืื™ ืœื”ื™ืžื ืข ืžื”ืŸ ื‘ืงื•ื“ ื—ื“ืฉ:

ืขื“ื›ื•ืŸ

ืขื“ื›ื•ืŸ ื™ื›ื•ืœ ืœื”ื™ื’ืจื ืขืœ ื™ื“ื™ ืฉื™ื ื•ื™ props ืื• state. ื”ืžืชื•ื“ื•ืช ื”ืืœื• ื ืงืจืื•ืช ื‘ืกื“ืจ ืœื”ืœืŸ ื›ืืฉืจ ืงื•ืžืคื•ื ื ื˜ื” ืžืจื•ื ื“ืจืช ืžื—ื“ืฉ:

ื”ืขืจื”:

ื”ืžืชื•ื“ื•ืช ืœื”ืœืŸ ื ื—ืฉื‘ื•ืช ื™ืฉื ื•ืช ื•ืขื“ื™ืฃ ืœื”ืžื ืข ืžืฉื™ืžื•ืฉ ื‘ื”ืŸ ื‘ืงื•ื“ ื—ื“ืฉ:

ื”ืกืจื” (Unmounting)

ืงืจื™ืื” ืœืžืชื•ื“ื” ื”ื–ื• ืžืชื‘ืฆืขืช ื›ืืฉืจ ืงื•ืžืคื•ื ื ื˜ื” ืžื•ืกืจืช ืžื”-DOM:

ื ื™ื”ื•ืœ ืฉื’ื™ืื•ืช

ืงืจื™ืื” ืœืžืชื•ื“ื•ืช ื”ืืœื• ืžืชื‘ืฆืขืช ื›ืืฉืจ ืงื™ื™ืžืช ืฉื’ื™ืื” ื‘ืจื™ื ื“ื•ืจ, ื‘ืžืชื•ื“ืช ืžืขื’ืœ-ื—ื™ื™ื, ืื• ื‘ื‘ื ืื™ ืฉืœ ืงื•ืžืคื•ื ื ื˜ืช ื™ืœื“ ื›ืœืฉื”ื™.

API-ื™ื ืื—ืจื™ื

ื›ืœ ืงื•ืžืคื•ื ื ื˜ื” ืžืกืคืงืช ื‘ื ื•ืกืฃ ืžืกืคืจ API-ื™ื ืื—ืจื™ื.

Properties ืฉืœ ืžื—ืœืงื”

Properties ืฉืœ ืžื•ืคืข


ืขื™ื•ืŸ

ืžืชื•ื“ื•ืช ืžืขื’ืœ-ื—ื™ื™ื ืฉื‘ืฉื™ืžื•ืฉ ื ืคื•ืฅ

ื”ืžืชื•ื“ื•ืช ื‘ื—ืœืง ื”ื–ื” ืžื›ืกื•ืช ืืช ื”ื—ืœืง ื”ื ืจื—ื‘ ืฉืœ ืฉื™ืžื•ืฉื™ื ืฉืชืชืงืœื• ื‘ื”ื ื›ืืฉืจ ืชื™ืฆืจื• ืงื•ืžืคื•ื ื ื˜ื•ืช ื‘-React. ืœื”ืคื ื™ื™ื” ื•ื™ื–ื•ืืœื™ืช, ื‘ื™ื“ืงื• ืืช ื“ื™ืื’ืจืช ืžืขื’ืœ-ื”ื—ื™ื™ื ื”ื–ื•.

render()

render()

ืžืชื•ื“ืช ื”-render() ื”ื™ื ื”ืžืชื•ื“ื” ื”ื ื“ืจืฉืช ื”ื™ื—ื™ื“ื” ื‘ืฉื™ืžื•ืฉ ืฉืœ ืงื•ืžืคื•ื ื ื˜ืช ืžื—ืœืงื”.

ื‘ืงืจื™ืื” ืืœื™ื”, ื”ืžืชื•ื“ื” ืชื‘ื—ืŸ ืืช this.props ื•ืืช this.state ื•ืชื—ื–ื™ืจ ืืช ืื—ื“ ื”ืกื•ื’ื™ื ื”ื‘ืื™ื:

  • ืืœืžื ื˜ื™ื ืฉืœ React. ื‘ื“ืจืš ื›ืœืœ ื ื•ืฆืจื™ื ืขืœ ื™ื“ื™ JSX. ืœื“ื•ื’ืžื, <div /> ื•- <MyComponent /> ื”ื ืืœืžื ื˜ื™ื ืฉืœ React ืฉืžื ื—ื™ื ืืช React ืœืจื ื“ืจ ืฆื•ืžืช ืฉืœ DOM, ืื• ืงื•ืžืคื•ื ื ื˜ืช ืžืฉืชืžืฉ ืื—ืจืช, ื‘ื”ืชืืžื”.
  • ืžืขืจื›ื™ื ื•-Fragments. ืžืืคืฉืจื™ื ืœื”ื—ื–ื™ืจ ืืœืžื ื˜ื™ื ืžืจื•ื‘ื™ื ืž-render. ืงืจืื• ืืช ื”ืชื™ืขื•ื“ ื‘-fragments ืžื™ื“ืข ื ื•ืกืฃ.
  • Portals. ืžืืคืฉืจื™ื ืœืจื ื“ืจ ื™ืœื“ื™ื ืœืชื•ืš ืชืช-ืขืฅ DOM ืฉื•ื ื”. ืงืจืื• ืืช ื”ืชื™ืขื•ื“ ื‘-portals ืœืžื™ื“ืข ื ื•ืกืฃ.
  • ืžื—ืจื•ื–ื•ืช ื•ืžืกืคืจื™ื. ืžืจื•ื ื“ืจื™ื ื›ืฆืžืชื™ ื˜ืงืกื˜ ื‘ืชื•ืš ื”-DOM.
  • ืžืฉืชื ื™ื ื‘ื•ืœืื ื™ื ืื• null. ืžืจื ื“ืจ ื›ืœื•ื. (ื‘ืขื™ืงืจ ืงื™ื™ื ื›ื“ื™ ืœืชืžื•ืš ื‘ืชื‘ื ื™ืช return test && <Child />, ื›ืืฉืจ test ื”ื•ื ืžืฉืชื ื” ื‘ื•ืœืื ื™.)

ื”ืคื•ื ืงืฆื™ื” render() ืฆืจื™ื›ื” ืœื”ื™ื•ืช ื˜ื”ื•ืจื”, ื›ืœื•ืžืจ ื”ื™ื ืœื ืžืฉื ื” ืืช ื”-state ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื”, ื”ื™ื ืžื—ื–ื™ืจื” ืืช ืื•ืชื” ื”ืชื•ืฆืื” ื‘ื›ืœ ืคืขื ืฉื”ื™ื ืžืชื‘ืฆืขืช, ื•ื”ื™ื ืœื ืžื“ื‘ืจืช ื™ืฉื™ืจื•ืช ืขื ื”ื“ืคื“ืคืŸ.

ื›ืืฉืจ ื™ืฉ ืฆื•ืจืš ืœื“ื‘ืจ ืขื ื”ื“ืคื“ืคืŸ, ื™ืฉ ืœื”ืฉืชืžืฉ ื‘- componentDidMount() ืื• ื‘ืžืชื•ื“ื•ืช ื”ืื—ืจื•ืช ืฉืœ ืžืขื’ืœ-ื”ื—ื™ื™ื ื‘ืžืงื•ื. ืฉืžื™ืจื” ืขืœ ื›ืš ืฉ- render ืชืฉืžืจ ื˜ื”ื•ืจื”, ื”ื•ืคื›ืช ืืช ื”ื—ืฉื™ื‘ื” ืขืœ ืงื•ืžืคื•ื ื ื•ืช ืœื™ื•ืชืจ ืงืœื”.

ื”ืขืจื”

render() ืœื ืชืชื‘ืฆืข ืื shouldComponentUpdate() ืžื—ื–ื™ืจื” โ€˜falseโ€™.


constructor()

constructor(props)

ืื ืื™ืŸ ืฆื•ืจืš ื‘ืืชื—ื•ืœ state ื•-binding ืขื‘ื•ืจ ืžืชื•ื“ื•ืช, ืื™ืŸ ืฆื•ืจืš ืœืžืžืฉ ื‘ื ืื™ ืขื‘ื•ืจ ืงื•ืžืคื•ื ื ื˜ืช ื”-React ืฉืœื›ื.

ืงืจื™ืื” ืœื‘ื ืื™ ืฉืœ ืงื•ืžืคื•ื ื ื˜ืช ื”-React ืฉืœื›ื ืžืชื‘ืฆืขืช ืœืคื ื™ ื”-Mounting ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื”. ื›ืืฉืจ ืžืžืžืฉื™ื ืืช ื”ื‘ื ืื™ ืขื‘ื•ืจ ืชืช-ืžื—ืœืงื” ืžืกื•ื’ React.Component, ื ื“ืจืฉืช ืงืจื™ืื” ืœ- super(props) ืœืคื ื™ ื›ืœ ื‘ื™ื˜ื•ื™ ืื—ืจ. ืื—ืจืช, this.props ื™ื”ืคื•ืš ืœื”ื™ื•ืช ืœื-ืžื•ื’ื“ืจ (undefined) ื‘ื‘ื ืื™, ืžื” ืฉื™ื›ื•ืœ ืœื”ื•ื‘ื™ืœ ืœื‘ืื’ื™ื.

ื‘ื“ืจืš ื›ืœืœ ื‘-React, ื‘ื ืื™ื ื ื›ืชื‘ื™ื ืขื‘ื•ืจ ืฉืชื™ ืžื˜ืจื•ืช ื‘ืœื‘ื“:

  • ืื™ืชื—ื•ืœ local state ืขืœ ื™ื“ื™ ื”ืงืฆืืช ืื•ื‘ื™ืงื˜ ืœ- this.state.
  • Binding event handler ืฉืœ ืžืชื•ื“ื•ืช ืœืžื•ืคืข ื›ืœืฉื”ื•.

ืœื ืืžื•ืจื” ืœื”ืชื‘ืฆืข ืงืจื™ืื” ืœ- setState() ื‘ืชื•ืš ื”- constructor(). ื‘ืžืงื•ื ื–ืืช, ืื ืงื•ืžืคื•ื ื ื˜ื” ืฆืจื™ื›ื” ืœื”ืฉืชืžืฉ ื‘-state ืžืงื•ืžื™, ืขืœื™ื›ื ืœื”ืงืฆื•ืช ืืช ื”-state ื”ืจืืฉื•ื ื™ ืœ- this.state ื™ืฉื™ืจื•ืช ื‘ืชื•ืš ื”ื‘ื ืื™:

constructor(props) {
  super(props);
  // ืœื ืœืงืจื•ื ืœ-this.setState() ื›ืืŸ!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

ื”ื‘ื ืื™ ื”ื•ื ื”ืžืงื•ื ื”ื™ื—ื™ื“ื™ ืฉืืžื•ืจื” ืœื”ืชื‘ืฆืข ื‘ื• ื”ืงืฆืื” ื™ืฉื™ืจื” ืœ- this.state. ื‘ื›ืœ ืฉืืจ ื”ืžืชื•ื“ื•ืช, ืฆืจื™ืš ืœื”ืชื‘ืฆืข ืฉื™ืžื•ืฉ ื‘- this.setState() ื‘ืžืงื•ื.

ื™ืฉ ืœื”ื™ืžื ืข ืžื”ืฆื”ืจื” ืจืืฉื•ื ื™ืช ืขืœ side-effects ื›ืœืฉื”ืŸ ืื• ืžื™ื ื•ื™ื™ื (subscriptions) ื‘ืชื•ืš ื”ื‘ื ืื™. ืขื‘ื•ืจ ืฉื™ืžื•ืฉื™ื ืืœื•, ื™ืฉ ืœื”ืฉืชืžืฉ ื‘- componentDidMount() ื‘ืžืงื•ื.

ื”ืขืจื”

ื™ืฉ ืœื”ื™ืžื ืข ืžื”ืขืชืงืช props ืœืชื•ืš state!, ื–ื•ื”ื™ ื˜ืขื•ืช ื ืคื•ืฆื”:

constructor(props) {
 super(props);
 // ืืœ ืชืขืฉื• ื–ืืช!
 this.state = { color: props.color };
}

ื”ื‘ืขื™ื” ื”ื™ื ืฉื–ื” ื’ื ืœื ื ื—ื•ืฅ (ืืคืฉืจ ืœื”ืฉืชืžืฉ ื‘- this.props.color ื™ืฉื™ืจื•ืช ื‘ืžืงื•ื), ื•ื’ื ื™ื•ืฆืจ ื‘ืื’ื™ื (ืขื“ื›ื•ื ื™ื ืœ- color prop ืœื ื™ืฉื•ืงืคื• ื‘-state).

ื”ืฉืชืžืฉื• ื‘ืชื‘ื ื™ืช ื”ื–ื• ืื ืจื•ืฆื™ื ื‘ืื•ืคืŸ ืžื›ื•ื•ืŸ ืœื”ืชืขืœื ืžืขื“ื›ื•ื ื™ prop. ื‘ืžืงืจื™ื ื”ืืœื•, ื”ื’ื™ื•ื ื™ ื™ื•ืชืจ ืœืฉื ื•ืช ืืช ืฉื ื”-prop ืœ- initialColor ืื• defaultColor. ืื– ืชื•ื›ืœื• ืœื’ืจื•ื ืœืงื•ืžืคื•ื ื ื˜ื” ืœื‘ืฆืข โ€œืื™ืคื•ืกโ€ ืœ-state ื”ืคื ื™ืžื™ ื‘ืื•ืคืŸ ื›ืคื•ื™ ืขืœ-ื™ื“ื™ ืฉื™ื ื•ื™ ื”ืžื”ืคืชื— ืฉืœื• ื›ืืฉืจ ื™ืฉ ืฆื•ืจืš ื‘ื›ืš.

ืงืจืื• ืืช ื”ืคื•ืกื˜ ื‘ื‘ืœื•ื’ ืฉืœื ื• ืขืœ ื”ื™ืžื ืขื•ืช ืž- derived state ื›ื“ื™ ืœืœืžื•ื“ ืขืœ ืžื” ืœืขืฉื•ืช ืื ืืชื ื—ื•ืฉื‘ื™ื ืฉืืชื ืฆืจื™ื›ื™ื state ืฉื™ื”ื™ื” ืชืœื•ื™ ื‘-props.


componentDidMount()

componentDidMount()

ื”ืžืชื•ื“ื” componentDidMount() ืžืชื‘ืฆืขืช ืžื™ื“ื™ืช ืœืื—ืจ ื”-Mounting ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื” (ื›ืืฉืจ ื”ื™ื ืžื•ื›ื ืกืช ืœืชื•ืš ื”ืขืฅ). ืื™ืชื—ื•ืœ ืฉื“ื•ืจืฉ ืฆืžืชื™ DOM ื™ืชืื™ื ืœื”ื™ื•ืช ื›ืืŸ. ืื ื™ืฉ ืฆื•ืจืš ืœื˜ืขื•ืŸ ืžื™ื“ืข ืžืงืฆื” ืžืจื•ื—ืง, ื–ื” ืžืงื•ื ื˜ื•ื‘ ืœื™ืฆื•ืจ ืืช ื‘ืงืฉืช ื”ืจืฉืช.

ื”ืžืชื•ื“ื” ื”ื–ื• ื”ื™ื ืžืงื•ื ื˜ื•ื‘ ืœื”ื’ื“ื™ืจ ืžื™ื ื•ื™ื™ื (subscription). ืื ืื›ืŸ ืืชื ืžื‘ืฆืขื™ื ื–ืืช, ืœื ืœืฉื›ื•ื— ืœื‘ื˜ืœ ืžื™ื ื•ื™ ื‘- componentWillUnmount().

ืืชื ื™ื›ื•ืœื™ื ืœืงืจื•ื ืœ- setState() ื‘ืื•ืคืŸ ืžื™ื“ื™ ื‘- componentDidMount(). ื–ื” ื™ื’ืจื•ื ืœืจื™ื ื“ื•ืจ ื ื•ืกืฃ, ืื‘ืœ ื”ื•ื ื™ืงืจื” ืœืคื ื™ ืฉื”ื“ืคื“ืคืŸ ื™ืขื“ื›ืŸ ืืช ื”ืžืกืš. ื–ื” ืžื‘ื˜ื™ื— ืฉืืคื™ืœื• ืœืžืจื•ืช ืฉืงืจื™ืื” ืœ- render() ืชืชื‘ืฆืข ืคืขืžื™ื™ื ื‘ืžืงืจื” ื–ื”, ื”ืžืฉืชืžืฉ ืœื ื™ื•ื›ืœ ืœืจืื•ืช ืืช state ื”ื‘ื™ื ื™ื™ื. ื”ืฉืชืžืฉื• ื‘ืชื‘ื ื™ืช ื–ื• ืขื ื™ืชืจ ื–ื”ื™ืจื•ืช ืžื›ื™ื•ื•ืŸ ืฉืœืขืชื™ื ื”ื™ื ื™ื•ืฆืจืช ื‘ืขื™ื•ืช ื‘ื‘ื™ืฆื•ืขื™ื. ื‘ืจื•ื‘ ื”ืžืงืจื™ื, ื ื™ืชืŸ ืœื‘ืฆืข ื”ืงืฆืื” ืœ-state ื”ื”ืชื—ืœืชื™ ื‘ืชื•ืš ื”- constructor() ื‘ืžืงื•ื. ืขื ื–ืืช, ื™ื›ื•ืœ ืœื”ื™ื•ืช ืฉื”ืชื‘ื ื™ืช ื”ื–ื• ืชื”ื™ื” ื”ื›ืจื—ื™ืช ื‘ืžืงืจื™ื ื›ืžื• modals ื•-tooltips ื›ืืฉืจ ื™ืฉ ืฆื•ืจืš ืœืžื“ื•ื“ ืฆื•ืžืช ื‘-DOM ืœืคื ื™ ืจื™ื ื“ื•ืจ ืžืฉื”ื• ืฉืชืœื•ื™ ื‘ื’ื•ื“ืœื• ืื• ืžื™ืงื•ืžื•.


componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot)

ื”ืžืชื•ื“ื” componentDidUpdate() ืžืชื‘ืฆืขืช ืžื™ื“ื™ืช ืœืื—ืจ ืฉื”ืขื™ื“ื›ื•ืŸ ืงื•ืจื”. ืื™ืŸ ืงืจื™ืื” ืœืžืชื•ื“ื” ื”ื–ื• ื‘ืจื™ื ื“ื•ืจ ื”ืจืืฉื•ื ื™.

ื”ืฉืชืžืฉื• ื‘ื–ื” ื›ื”ื–ื“ืžื ื•ืช ืœื ื”ืœ ืืช ื”-DOM ื›ืืฉืจ ื”ืงื•ืžืคื•ื ื ื˜ื” ืขื•ื“ื›ื ื”. ื–ื” ื’ื ืžืงื•ื ื˜ื•ื‘ ืœื‘ืฆืข ื‘ืงืฉื•ืช ืจืฉืช ื›ืœ ืขื•ื“ ืืชื ืžืฉื•ื•ื™ื ืืช ื”-props ื”ื ื•ื›ื—ื™ื™ื ืœ-props ื”ืงื•ื“ืžื™ื (ืœื“ื•ื’ืžื, ื™ื›ื•ืœ ืœื”ื™ื•ืช ืฉื‘ืงืฉืช ืจืฉืช ืื™ื ื” ื”ื›ืจื—ื™ืช ืื ื”-props ืœื ื”ืฉืชื ื•).

componentDidUpdate(prevProps) {
  // ืฉื™ืžื•ืฉ ื˜ื™ืคื•ืกื™ (ืœื ืœืฉื›ื•ื— ืœื”ืฉื•ื•ืช ืืช ื”-props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

ื ื™ืชืŸ ืœืงืจื•ื ื‘ืื•ืคืŸ ืžื™ื“ื™ ืœ- setState() ื‘- componentDidUpdate() ืื‘ืœ ืฉื™ืžื• ืœื‘ ืฉืงืจื™ืื” ื›ื–ื• ืžื—ื•ื™ื‘ืช ืœื”ื™ื•ืช ืขื˜ื•ืคื” ื‘ืžืฉืคื˜ ืชื ืื™ ื›ืžื• ื‘ื“ื•ื’ืžื ืžืขืœื”, ืื—ืจืช ืชื”ื™ื” ืœื•ืœืื” ืื™ื ืกื•ืคื™ืช. ื‘ื ื•ืกืฃ, ืจื™ื ื“ื•ืจ ื ื•ืกืฃ ื™ืชื‘ืฆืข, ืฉืœืžืจื•ืช ืฉืœื ื™ื”ื™ื” ื’ืœื•ื™ ืœืขื™ื ื• ืฉืœ ื”ืžืฉืชืžืฉ, ื™ื•ื›ืœ ืœื”ืฉืคื™ืข ืขืœ ื‘ื™ืฆื•ืขื™ื” ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื”. ืื ืืชื ืžื ืกื™ื โ€œืœืฉืงืฃโ€ state ืœ- prop, ืฉื™ืงืœื• ืฉื™ืžื•ืฉ ื‘- prop ื™ืฉื™ืจื•ืช, ื‘ืžืงื•ื. ืงืจืื• ืขื•ื“ ืขืœ ืœืžื” ื”ืขืชืงืช props ืœืชื•ืš state ื’ื•ืจื ืœื‘ืื’ื™ื.

ืื ื”ืงื•ืžืคื•ื ื ื˜ื” ืฉืœื›ื ืžืžืžืฉืช ืืช ืžืชื•ื“ืช ืžืขื’ืœ-ื”ื—ื™ื™ื getSnapshotBeforeUpdate() (ืฉื–ื” ืžืงืจื” ื ื“ื™ืจ), ื”ืขืจืš ืฉื”ื™ื ืชื—ื–ื™ืจ ื™ื•ืขื‘ืจ ื›ืคืจืžื˜ืจ โ€œืชืžื•ื ืช-ืžืฆื‘โ€ ืฉืœื™ืฉื™ ืœ- componentDidUpdate(). ืื—ืจืช, ื”ืคืจืžื˜ืจ ื”ื–ื” ื™ื”ื™ื” ืœื-ืžื•ื’ื“ืจ.

ื”ืขืจื”

ื”ืžืชื•ื“ื” componentDidUpdate() ืœื ืชืชื‘ืฆืข ืื shouldComponentUpdate() ืชื—ื–ื™ืจ โ€˜falseโ€™.


componentWillUnmount()

componentWillUnmount()

ื”ืžืชื•ื“ื” componentWillUnmount() ืžืชื‘ืฆืขืช ื‘ืื•ืคืŸ ืžื™ื“ื™ ืœืคื ื™ Unmounting ืฉืœ ืงื•ืžืคื•ื ื ื˜ื” ื•ื”ืจื™ืกืชื”. ื‘ืฆืขื• ื›ืœ ื ื™ืงื•ื™ ื—ื™ื•ื ื™ ื‘ืžืชื•ื“ื” ื”ื–ื•, ื›ื“ื•ื’ืžืช ื‘ื™ื˜ื•ืœ ื˜ื™ื™ืžืจื™ื, ื‘ื™ื˜ื•ืœ ื‘ืงืฉื•ืช ืจืฉืช, ืื• ื ื™ืงื•ื™ ืฉืœ ื›ืœ ืžื™ื ื•ื™ ืฉื ื•ืฆืจ ื‘- componentDidMount().

ืงืจื™ืื” ืœ- setState() ืœื ืืžื•ืจื” ืœื”ืชื‘ืฆืข ื‘- componentWillUnmount ืžื›ื™ื•ื•ืŸ ืฉื”ืงื•ืžืคื•ื ื ื˜ื” ืœืขื•ืœื ืœื ืชืจื•ื ื“ืจ ืฉื•ื‘. ื‘ืจื’ืข ืฉืžื•ืคืข ืฉืœ ืงื•ืžืคื•ื ื ื˜ื” ื‘ื™ืฆืข Unmounting, ื”ื•ื ืœืขื•ืœื ืœื ื™ื‘ืฆืข Mounting ืฉื•ื‘.


ืžืชื•ื“ื•ืช ืžืขื’ืœ-ื—ื™ื™ื ืฉื‘ืฉื™ืžื•ืฉ ื ื“ื™ืจ

ื”ืžืชื•ื“ื•ืช ื‘ื—ืœืง ื”ื–ื” ืžืชื›ืชื‘ื•ืช ืขื ืฉื™ืžื•ืฉื™ื ืคื—ื•ืช ื ืคื•ืฆื™ื. ื”ืŸ ื ื•ื—ื•ืช ืœืฉื™ืžื•ืฉ ืœืขืชื™ื, ืื‘ืœ ืจื•ื‘ ื”ืงื•ืžืคื•ื ื ื˜ื•ืช ื›ื›ืœ ื”ื ืจืื” ืœื ื–ืงื•ืงื•ืช ืœื”ืŸ. ืืชื ื™ื›ื•ืœื™ื ืœืจืื•ืช ืืช ืจื•ื‘ ื”ืžืชื•ื“ื•ืช ืœื”ืœืŸ ื‘ื“ื™ืื’ืจืžืช ืžืขื’ืœ-ื”ื—ื™ื™ื ื”ื–ื• ืขืœ ื™ื“ื™ ืœื—ื™ืฆื” ืขืœ ืชื™ื‘ืช ื”ืกื™ืžื•ืŸ - โ€œื”ืจืื” ืžืชื•ื“ื•ืช ืžืขื’ืœ-ื—ื™ื™ื ืคื—ื•ืช ื ืคื•ืฆื•ืชโ€ ื‘ืจืืฉื”.

shouldComponentUpdate()

shouldComponentUpdate(nextProps, nextState)

ื”ืฉืชืžืฉื• ื‘- shouldComponentUpdate ื›ื“ื™ ืœื’ืจื•ื ืœ-React ืœื“ืขืช ืื ืคืœื˜ ืฉืœ ืงื•ืžืคื•ื ื ื˜ื” ืœื ืžื•ืฉืคืข ืขืœ ื™ื“ื™ ื”ืฉื™ื ื•ื™ ื”ื ื•ื›ื—ื™ ื‘-state ืื• props. ื”ืชื ื”ื’ื•ืช ื‘ืจื™ืจืช ื”ืžื—ื“ืœ ื”ื™ื ืœืจื ื“ืจ ืฉื•ื‘ ื‘ื›ืœ ืฉื™ื ื•ื™ ืฉืœ state, ื•ื‘ืจื•ื‘ ื”ืžืงืจื™ื ืขืœื™ื›ื ืœื”ืกืชืžืš ืขืœ ื”ืชื ื”ื’ื•ืช ื–ื•.

ื”ืžืชื•ื“ื” shouldComponentUpdate() ืžืชื‘ืฆืขืช ืœืคื ื™ ืจื™ื ื“ื•ืจ ื‘ืขืงื‘ื•ืช ืงื‘ืœืช props ืื• state ื—ื“ืฉื™ื. ื‘ืจื™ืจืช ื”ืžื—ื“ืœ ื”ื™ื true. ืœื ืžืชื‘ืฆืขืช ืงืจื™ืื” ืœืžืชื•ื“ื” ื–ื• ื‘ืจื™ื ื“ื•ืจ ื”ืจืืฉื•ื ื™ ืื• ื›ืืฉืจ ื™ืฉ ืฉื™ืžื•ืฉ ื‘- forceUpdate().

ื”ืžืชื•ื“ื” ื”ื–ื• ืงื™ื™ืžืช ืจืง ื›-ืื•ืคื˜ื™ืžื™ื–ืฆื™ื” ื‘ื‘ื™ืฆื•ืขื™ื. ืืœ ืชืกืชืžื›ื• ืขืœื™ื” ื›ื“ื™ โ€œืœืžื ื•ืขโ€ ืจื™ื ื“ื•ืจ, ื–ื” ื™ื›ื•ืœ ืœื”ื•ื‘ื™ืœ ืœื‘ืื’ื™ื. ืฉื™ืงืœื• ืœื”ืฉืชืžืฉ ื‘-PureComponent ื‘ืžืงื•ื ืœื›ืชื•ื‘ ืืช shouldComponentUpdate() ื‘ืขืฆืžื›ื. PureComponent ืžื‘ืฆืข ื”ืฉื•ื•ืื” ืจื“ื•ื“ื” ืฉืœ props ื•-state, ื•ืžืคื—ื™ืช ืืช ื”ืกื™ื›ื•ื™ ืฉื ื“ืœื’ ืขืœ ืขื“ื›ื•ืŸ ื”ื›ืจื—ื™.

ืื ืืชื ื‘ื˜ื•ื—ื™ื ื‘ืขืฆืžื›ื ืฉืืชื ืจื•ืฆื™ื ืœื›ืชื•ื‘ ืื•ืชื” ื‘ืขืฆืžื›ื, ืจืฆื•ื™ ืฉืชืฉื•ื• ืืช this.props ืขื nextProps ื•ืืช this.state ืขื nextState ื•ืœื”ื—ื–ื™ืจ ื‘ื™ื˜ื•ื™ ืฉืงืจ ื•ื›ืš ื‘ืขืฆื ืœื•ืžืจ ืœ-React ืฉืืคืฉืจ ืœื“ืœื’ ืขืœ ื”ืขื™ื“ื›ื•ืŸ. ืฉื™ืžื• ืœื‘ ืฉื”ื—ื–ืจืช false ืœื ืžื•ื ืข ืžืงื•ืžืคื•ื ื ื˜ื•ืช-ื™ืœื“ ืœื‘ืฆืข ืจื™ื ื“ื•ืจ ื—ื•ื–ืจ, ื›ืืฉืจ ื”-state ืฉืœื”ื ืžืฉืชื ื”.

ืื ื—ื ื• ืœื ืžืžืœื™ืฆื™ื ืœื‘ืฆืข ื‘ื“ื™ืงื•ืช ืื™ื›ื•ืช ืขืžื•ืงื•ืช ืื• ืฉื™ืžื•ืฉ ื‘- JSON.stringify() ื‘- shouldComponentUpdate(). ื–ื” ืžืื•ื“ ืœื ื™ืขื™ืœ ื•ื™ื›ื•ืœ ืœื’ืจื•ืข ื‘ื‘ื™ืฆื•ืขื™ื.

ื›ืจื’ืข, ืื shouldComponentUpdate() ืžื—ื–ื™ืจื” false, ืื– UNSAFE_componentWillUpdate(), render(), ื•- componentDidUpdate() ืœื ื™ืชื‘ืฆืขื•. ื‘ืขืชื™ื“ React ืื•ืœื™ ืชืชื™ื™ื—ืก ืœ- shouldComponentUpdate() ื›ืืœ ืจืžื–, ืžืืฉืจ ื›ืืœ directive ื ื•ืงืฉื”, ื•ื”ื—ื–ืจืช false ืื•ืœื™ ืชื•ื‘ื™ืœ ืœืจื™ื ื“ื•ืจ ื ื•ืกืฃ ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื”.


static getDerivedStateFromProps()

static getDerivedStateFromProps(props, state)

ื”ืžืชื•ื“ื” getDerivedStateFromProps ืžื•ืคืขืœืช ืจื’ืข ืœืคื ื™ ื”ืงืจื™ืื” ืœืžืชื•ื“ืช ื”ืจื™ื ื“ื•ืจ, ื’ื ื‘-mount ื”ืจืืฉื•ื ื™ ื•ื’ื ืขืœ ืขื“ื›ื•ื ื™ื ืœืื—ืจ ืžื›ืŸ. ืขืœื™ื” ืœื”ื—ื–ื™ืจ ืื•ื‘ื™ื™ืงื˜ ืขืœ ืžื ืช ืœืขื“ื›ืŸ ืืช ื”-state, ืื• null ื›ื“ื™ ืœื ืœืขื“ื›ืŸ ื›ืœื•ื.

ื”ืžืชื•ื“ื” ื”ื–ื• ืงื™ื™ืžืช ืœืฉื™ืžื•ืฉื™ื ื ื“ื™ืจื™ื ื‘ื”ื ื”-state ืชืœื•ื™ ื‘ืฉื™ื ื•ื™ื™ื ื‘-props ื‘ืžื”ืœืš ื”ื–ืžืŸ. ืœื“ื•ื’ืžื, ื™ื™ืชื›ืŸ ืฉื™ื”ื™ื” ื–ื” ืฉื™ืžื•ืฉื™ ืœืฉื™ืžื•ืฉ ื‘ืžื™ืžื•ืฉ ืฉืœ ืงื•ืžืคื•ื ื ื˜ืช <Transition> ืฉืžืฉื•ื•ื” ืืช ื”ื™ืœื“ื™ื ื”ืงื•ื“ืžื™ื ื•ื”ื‘ืื™ื ืฉืœื” ื›ื“ื™ ืœื”ื—ืœื™ื˜ ืื™ื–ื” ืžื”ื ืœื”ื ืคื™ืฉ.

ืฉื™ืžื•ืฉ ื‘- deriving state ืžื•ื‘ื™ืœ ืœืงื•ื“ ืืจื•ืš ื•ืžืงืฉื” ืขืœ ื—ืฉื™ื‘ื” ืขืœ ื”ืงื•ืžืคื•ื ื ื˜ื•ืช ืฉืœื›ื. ื•ื“ืื• ืฉืืชื ืžื›ื™ืจื™ื ืžื™ืžื•ืฉ ืขื ืืœื˜ืจื ื˜ื™ื‘ื•ืช ืคืฉื•ื˜ื•ืช ื™ื•ืชืจ:

  • ืื ืืชื ืฆืจื™ื›ื™ื ืœื™ืฆื•ืจ side-effect (ืœื“ื•ื’ืžื, ืงื‘ืœืช ืžื™ื“ืข ืื• ื”ื ืคืฉื”) ื›ืชื’ื•ื‘ื” ืœืฉื™ื ื•ื™ ื‘-props, ื”ืฉืชืžืฉื• ื‘- componentDidUpdate ืžืขื’ืœ-ื”ื—ื™ื™ื ื‘ืžืงื•ื.
  • ืื ืืชื ืจื•ืฆื™ื ืœื—ืฉื‘ ืžื—ื“ืฉ ืžื™ื“ืข ืžืกื•ื™ื ืจืง ื›ืืฉืจ prop ืžืฉืชื ื”, ื”ืฉืชืžืฉื• ื‘-memoization helper ื‘ืžืงื•ื.
  • ืื ืืชื ืจื•ืฆื™ื ืœืืคืก state ื›ืœืฉื”ื• ื›ืืฉืจ prop ืžืฉืชื ื”, ืฉืงืœื• ืœื™ื™ืฆืจ ืงื•ืžืคื•ื ื ื˜ื” fully controlled ืื• fully uncontrolled with a key ื‘ืžืงื•ื.

ืœืžืชื•ื“ื” ื”ื–ื• ืื™ืŸ ื’ื™ืฉื” ืœืžื•ืคืขื™ื ืฉืœ ืงื•ืžืคื•ื ื ื˜ื•ืช. ืื ืชืจืฆื•, ืืชื ื™ื›ื•ืœื™ื ืœืขืฉื•ืช ืฉื™ืžื•ืฉ ื—ื•ื–ืจ ื‘ืงื•ื“ ื‘ื™ืŸ getDerivedStateFromProps() ื•ืฉืืจ ื”ืžืชื•ื“ื•ืช ื‘ืžื—ืœืงื” ืขืœ-ื™ื“ื™ ื—ื™ืœื•ืฅ ืคื•ื ืงืฆื™ื•ืช ื˜ื”ื•ืจื•ืช ืžืชื•ืš ื”-props ื•ื”-state ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื” ืžื—ื•ืฅ ืœื”ื’ื“ืจืช ื”ืžื—ืœืงื”.

ืฉื™ืžื• ืœื‘ ืฉื”ืžืชื•ื“ื” ื”ื–ื• ืžืชื‘ืฆืขืช ื‘ื›ืœ ืจื™ื ื“ื•ืจ, ืœืœื ืงืฉืจ ืœืกื™ื‘ื” ืฉื”ื™ื ื”ื•ืคืขืœื”. ื–ื” ื‘ื ื™ื’ื•ื“ ืœ- UNSAFE_componentWillReceiveProps, ืฉืžืชื‘ืฆืขืช ืจืง ื›ืืฉืจ ื”ื”ื•ืจื” ื’ื•ืจื ืœืจื™ื ื“ื•ืจ ืžื—ื“ืฉ ื•ืœื ื›ืชื•ืฆืื” ืฉืœ setState ืžืงื•ืžื™.


getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate(prevProps, prevState)

ื”ืžืชื•ื“ื” getSnapshotBeforeUpdate() ืžืชื‘ืฆืขืช ืจื’ืข ืœืคื ื™ ืฉื”ืคืœื˜ ืฉืœ ื”ืจื™ื ื“ื•ืจ ื”ืื—ืจื•ืŸ ื‘ื™ื•ืชืจ ื”ื•ืขื‘ืจ ืœ-DOM ืœื“ื•ื’ืžื. ื–ื” ืžืืคืฉืจ ืœืงื•ืžืคื•ื ื ื˜ื” ืœืœื›ื•ื“ ืžื™ื“ืข ืžืกื•ื™ื ืžื”-DOM (ืœื“ื•ื’ืžื, ืžื™ืงื•ื ื”ื’ืœื™ืœื”) ืœืคื ื™ ืฉื”ื•ื ืขืฉื•ื™ ืœื”ืฉืชื ื•ืช. ื›ืœ ืขืจืš ืฉื™ื•ื—ื–ืจ ืขืœ-ื™ื“ื™ ืžืชื•ื“ืช ืžืขื’ืœ-ื”ื—ื™ื™ื ื”ื–ื• ื™ื•ืขื‘ืจ ื›ืคืจืžื˜ืจ ืœ-componentDidUpdate().

ื”ืฉื™ืžื•ืฉ ื”ื–ื” ืœื ื ืคื•ืฅ, ืื‘ืœ ื™ื›ื•ืœ ืœื”ืชืจื—ืฉ ื‘-UI-ื™ื ื›ืžื• ื’ื“ื™ืœ ืฉืœ ืฆโ€™ืื˜ ืฉืฆืจื™ืš ืœื ื”ืœ ืžื™ืงื•ื ื’ืœื™ืœื” ื‘ื“ืจืš ืžื™ื•ื—ื“ืช.

ืขืจืš ืฉืœ ืชืžื•ื ืช-ืžืฆื‘ (ืื• null) ืืžื•ืจ ืœื”ื™ื•ืช ืžื•ื—ื–ืจ

ืœื“ื•ื’ืžื:

class ScrollingList extends React.Component {
  constructor(props) {
    super(props);
    this.listRef = React.createRef();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Are we adding new items to the list?
    // Capture the scroll position so we can adjust scroll later.
    if (prevProps.list.length < this.props.list.length) {
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // If we have a snapshot value, we've just added new items.
    // Adjust scroll so these new items don't push the old ones out of view.
    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
    if (snapshot !== null) {
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      <div ref={this.listRef}>{/* ...contents... */}</div>
    );
  }
}

ื‘ื“ื•ื’ืžืื•ืช ืœืžืขืœื”, ื—ืฉื•ื‘ ืœืงืจื•ื ืืช ื”- scrollHeight property ื‘- getSnapshotBeforeUpdate ื‘ื’ืœืœ ืฉื™ื›ื•ืœื™ื ืœื”ื™ื•ืช ืขื™ื›ื•ื‘ื™ื ื‘ื™ืŸ ืฉืœื‘ โ€œื”ืจื™ื ื“ื•ืจโ€ ื‘ืžืขื’ืœ-ื”ื—ื™ื™ื (ื›ืžื• render) ืœื‘ื™ืŸ ืฉืœื‘ ื”- โ€œcommitโ€ ื‘ืžืขื’ืœ-ื”ื—ื™ื™ื (ื›ืžื• ื‘- getSnapshotBeforeUpdate ื•ื‘- componentDidUpdate).


Error boundaries

Error boundaries ื”ื ืงื•ืžืคื•ื ื ื˜ื•ืช ืฉืœ React ืฉืชื•ืคืกื•ืช ืฉื’ื™ืื•ืช ืฉืœ JavaScript ื‘ื›ืœ ืžืงื•ื ื‘ืขืฅ ืงื•ืžืคื•ื ื ื˜ื•ืช ื”ื™ืœื“ ืฉืœื”ื, ืžืชืขื“ืช ืืช ื”ืฉื’ื™ืื•ืช ื”ืืœื•, ื•ืžืฆื™ื’ื” UI ืžื’ื•ื‘ื” ืฉืœ ืขืฅ ื”ืงื•ืžืคื•ื ื ื˜ื” ืฉื”ืชืจืกืงื”. Error boundaries ืชื•ืคืกืช ืฉื’ื™ืื•ืช ื‘ืžื”ืœืš ืจื™ื ื“ื•ืจ, ื‘ืžืชื•ื“ื•ืช ืžืขื’ืœ-ื”ื—ื™ื™ื, ื•ื‘ื‘ื ืื™ื ืฉืœ ื›ืœ ื”ืขืฅ ืฉืžืชื—ืชื™ื”ื.

ืงื•ืžืคื•ื ื ื˜ืช ืžื—ืœืงื” ื”ื•ืคื›ืช ืœ- error boundary ืื ื”ื™ื ืžื’ื“ื™ืจื” ืืช ืื—ืช ื”ืžืชื•ื“ื•ืช ื”ื‘ืื•ืช ืฉืœ ืžืขื’ืœ-ื”ื—ื™ื™ื (ืื• ืฉืชื™ื”ืŸ): static getDerivedStateFromError(), componentDidCatch(). ืขื“ื›ื•ืŸ ืฉืœ state ืžืžืขื’ืœ-ื”ื—ื™ื™ื ื”ื–ื” ืžืืคืฉืจ ืœื ื• ืœืœื›ื•ื“ ืฉื’ื™ืืช JavaScript ืœื ืžื˜ื•ืคืœืช ื‘ืขืฅ ืžืชื—ืช ื•ืœื”ืฆื™ื’ UI ืžื’ื•ื‘ื”.

ื”ืฉืชืžืฉื• ื‘-error boundaries ืœื”ืชืื•ืฉืฉ ืžื—ืจื™ื’ื•ืช ืœื ืฆืคื•ื™ื•ืช ื‘ืœื‘ื“; ืืœ ืชื ืกื• ืœื”ืฉืชืžืฉ ื‘ื”ื ืขื‘ื•ืจ ื‘ืงืจืช ื–ืจื™ืžื”.

ืœืคืจื˜ื™ื ื ื•ืกืคื™ื, ื”ืกืชื›ืœื• ื‘- ื˜ื™ืคื•ืœ ื‘ืฉื’ื™ืื•ืช ื‘-React 16.

ื”ืขืจื”

Error boundaries ืชื•ืคืกื™ื ืฉื’ื™ืื•ืช ื‘ืงื•ืžืคื•ื ื ื˜ื•ืช ืžืชื—ืชื™ื”ื ื‘ืขืฅ ื‘ืœื‘ื“. error boundary ืœื ื™ื›ื•ืœ ืœืชืคื•ืก ืฉื’ื™ืื” ื‘ืชื•ืš ืขืฆืžื•.

static getDerivedStateFromError()

static getDerivedStateFromError(error)

ืžืขื’ืœ-ื—ื™ื™ื ื–ื” ืžืชื‘ืฆืข ืœืื—ืจ ืฉืฉื’ื™ืื” ื ื–ืจืงื” ืขืœ ื™ื“ื™ ืงื•ืžืคื•ื ื ื˜ืช-ืฆืืฆื. ื”ื•ื ืžืงื‘ืœ ืืช ื”ืฉื’ื™ืื” ืฉื ื–ืจืงื” ื›ืคืจืžื˜ืจ ื•ืืžื•ืจ ืœื”ื—ื–ื™ืจ ืขืจืš ื›ื“ื™ ืœืขื“ื›ืŸ ืืช state.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {    // ืžืขื“ื›ืŸ ืืช ื”-state ื›ื“ื™ ืฉื”ืจื™ื ื“ื•ืจ ื”ื‘ื ื™ืจืื” ืืช ื”-UI ื”ืžื’ื•ื‘ื”.    return { hasError: true };  }
  render() {
    if (this.state.hasError) {      // ื ื™ืชืŸ ืœืจื ื“ืจ ื›ืœ ื’ื™ื‘ื•ื™ UI ืžื•ืชืื.      return <h1>Something went wrong.</h1>;    }
    return this.props.children;
  }
}

ื”ืขืจื”

ื”ืžืชื•ื“ื” getDerivedStateFromError() ื ืงืจืืช ื‘ืžื”ืœืš ืฉืœื‘ โ€œื”ืจื™ื ื“ื•ืจโ€, ืœื›ืŸ side-effects ืœื ืžื•ืจืฉื™ื. ื‘ืฉื‘ื™ืœ ืžืงืจื™ื ื›ืืœื•, ื”ืฉืชืžืฉื• ื‘- componentDidCatch() ื‘ืžืงื•ื.


componentDidCatch()

componentDidCatch(error, info)

ืžืชื•ื“ืช ืžืขื’ืœ-ื”ื—ื™ื™ื ื”ื–ื• ืžืชื‘ืฆืขืช ืœืื—ืจ ืฉืฉื’ื™ืื” ื ื–ืจืงื” ืขืœ-ื™ื“ื™ ืงื•ืžืคื•ื ื ืช ืฆืืฆื. ื”ื™ื ืžืงื‘ืœ ืฉื ื™ ืคืจืžื˜ืจื™ื:

  1. ืฉื’ื™ืื” (error) - ื”ืฉื’ื™ืื” ืฉื ื–ืจืงื”.
  2. ืžื™ื“ืข (info) - ืื•ื‘ื™ื™ืงื˜ ืขื ืžืคืชื— componentStack ื”ืžื›ื™ืœ ืžื™ื“ืข ืœื’ื‘ื™ ืื™ื–ื• ืงื•ืžืคื•ื ื ื˜ื” ื–ืจืงื” ืืช ื”ืฉื’ื™ืื”.

ืงืจื™ืื” ืœ- componentDidCatch() ืžืชื‘ืฆืขืช ื‘ืžื”ืœืš ืฉืœื‘ ื”-โ€commitโ€, ืœื›ืŸ side-effects ืžื•ืจืฉื™ื. ืจืฆื•ื™ ืœื”ืฉืชืžืฉ ื‘ื” ืœื“ื‘ืจื™ื ื›ืžื• ืชื™ืขื•ื“ ืฉื’ื™ืื•ืช:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // ืžืขื“ื›ืŸ ืืช ื”-state ื›ื“ื™ ืฉื”ืจื™ื ื“ื•ืจ ื”ื‘ื ื™ืจืื” ืืช ื”-UI ื”ืžื’ื•ื‘ื”.
    return { hasError: true };
  }

  componentDidCatch(error, info) {    // ื“ื•ื’ืžื” ืœ-"componentStack":    //   ื‘-ComponentThatThrows (ื ื•ืฆืจ ืขืœ-ื™ื“ื™ App)    //   ื‘-ErrorBoundary (ื ื•ืฆืจ ืขืœ-ื™ื“ื™ App)    //   ื‘-div (ื ื•ืฆืจ ืขืœ-ื™ื“ื™ App)    //   ื‘-App    logComponentStackToMyService(info.componentStack);  }
  render() {
    if (this.state.hasError) {
      // ื ื™ืชืŸ ืœืจื ื“ืจ ื›ืœ UI ื’ื™ื‘ื•ื™ ืžื•ืชืื.
      return <h1>ืžืฉื”ื• ื”ืฉืชื‘ืฉ.<h1/>;
    }

    return this.props.children;
  }
}

ื‘ื’ืจืกืื•ืช production ื•- development ื™ืฉ ื”ื‘ื“ืœ ืฉื•ืœื™ ื‘ื“ืจืš ืฉื‘ื” componentDidCatch() ืžื˜ืคืœืช ื‘ืฉื’ื™ืื•ืช.

ื‘ืคื™ืชื•ื—, ื”ืฉื’ื™ืื•ืช ื™ื‘ืขื‘ืขื• ืœ-window, ื–ื” ืื•ืžืจ ืฉื›ืœ window.onerror ืื• window.addEventListener('error', callback) ื™ื™ืจื˜ื• ืืช ื”ืฉื’ื™ืื•ืช ืฉื ืชืคืกื• ืขืœ ื™ื“ื™ componentDidCatch().

ื‘-production, ื‘ืžืงื•ื, ื”ืฉื’ื™ืื•ืช ืœื ื™ื‘ืขื‘ืขื• ืžืขืœื”, ืžื” ืฉืื•ืžืจ ืฉื›ืœ error handler ืงื•ื“ื ื™ืงื‘ืœ ืจืง ืฉื’ื™ืื•ืช ืฉืœื ื ืชืคืกื• ื‘ืžืคื•ืจืฉ ืขืœ ื™ื“ื™ componentDidCatch().

ื”ืขืจื”

ื‘ืื™ืจื•ืข ื”ืฉื’ื™ืื”, ื ื™ืชื• ืœืจื ื“ืจ ื’ื™ื‘ื•ื™ UI ืขื componentDidCatch() ืขืœ ื™ื“ื™ ืงืจื™ืื” ืœ- setState, ืื‘ืœ ืชื›ื•ื ื” ื–ื• ืชืฆื ืžืฉื™ืžื•ืฉ ื‘ื’ืจืกื ืขืชื™ื“ื™ืช. ื”ืฉืชืžืฉื• ื‘- static getDerivedStateFromError() ืขืœ ืžื ืช ืœื˜ืคืœ ื‘ืจื™ื ื“ื•ืจ ืžื’ื•ื‘ื” ื‘ืžืงื•ื.


Legacy Lifecycle Methods

ืžืชื•ื“ื•ืช ืžืขื’ืœ-ื”ื—ื™ื™ื ืœื”ืœืŸ ืžืกื•ืžืŸ ื›โ€ื™ืฉื ื•ืชโ€. ื”ืŸ ืขื“ื™ื™ืŸ ื™ืขื‘ื“ื•, ืื‘ืœ ืื ื—ื ื• ืœื ืžืžืœื™ืฆื™ื ืœื”ืฉืชืžืฉ ื‘ื”ื ื‘ืงื•ื“ ื—ื“ืฉ. ืืชื ื™ื›ื•ืœื™ื ืœืœืžื•ื“ ืขื•ื“ ืขืœ ืžืขื‘ืจ ืžืžืชื•ื“ื•ืช ืžืขื’ืœ-ื—ื™ื™ื ื”ืžื•ื’ื“ืจื•ืช ื›โ€ืžื•ืจืฉืชโ€ ื‘-ืคื•ืกื˜ ื”ื–ื”.

UNSAFE_componentWillMount()

UNSAFE_componentWillMount()

ื”ืขืจื”

UNSAFE_componentWillMount() ืžืชื‘ืฆืขืช ืจื’ืข ืœืคื ื™ ืฉื”-mounting ืžืชืจื—ืฉ. ื”ื™ื ื ืงืจืืช ืœืคื ื™ render(), ืœื›ืŸ ืงืจื™ืื” ืœ- setState() ืกื ื›ืจื•ื ื™ืช ื‘ืžืชื•ื“ื” ื”ื–ื• ืœื ืชื™ื™ืฆืจ ืจื™ื ื“ื•ืจ ื ื•ืกืฃ. ื‘ื›ืœืœื™ื•ืช, ืื ื—ื ื• ืžืžืœื™ืฆื™ื ืขืœ ืฉื™ืžื•ืฉ ื‘- constructor() ื‘ืžืงื•ื ื‘ืฉื‘ื™ืœ ืื™ืชื—ื•ืœ state.

ื”ืžื ืขื• ืžื”ื’ื“ืจืช ื›ืœ side-effects ืื• ืžื™ื ื•ื™ื™ื ื‘ืžืชื•ื“ื” ื”ื–ื•. ืœืžืงืจื™ื ื”ืืœื•, ื”ืฉืชืžืฉื• ื‘- componentDidMount() ื‘ืžืงื•ื.

ื–ื• ืžืชื•ื“ืช ืžืขื’ืœ-ื”ื—ื™ื™ื ื”ื™ื—ื™ื“ื” ืฉื ืงืจืืช ื‘ืจื™ื ื“ื•ืจ ืฉืจืช.


UNSAFE_componentWillReceiveProps()

UNSAFE_componentWillReceiveProps(nextProps)

ื”ืขืจื”

ืžืขื’ืœ-ื”ื—ื™ื™ื ื”ื–ื” ื ืงืจื ื‘ืขื‘ืจ componentWillReceiveProps. ื”ืฉื ื”ื–ื” ื™ืžืฉื™ืš ืœืขื‘ื•ื“ ืขื“ ื’ืจืกื 17. ื”ืฉืชืžืฉื• ื‘-rename-unsafe-lifecycles codemod ื›ื“ื™ ืœืขื“ื›ืŸ ืืช ื”ืงื•ืžืคื•ื ื ื˜ื•ืช ืฉืœื›ื ืื•ื˜ื•ืžื˜ื™ืช.

ื”ืขืจื”:

ืฉื™ืžื•ืฉ ื‘ืžืชื•ื“ืช ืžืขื’ืœ-ื”ื—ื™ื™ื ื”ื–ื• ืœืขืชื™ื ืชื›ื•ืคื•ืช ืžื•ื‘ื™ืœ ืœื‘ืื’ื™ื ื•ืœื—ื•ืกืจ ืขืงื‘ื™ื•ืช.

  • ืื ืืชื ืฆืจื™ื›ื™ื ืœื™ืฆื•ืจ side-effect (ืœื“ื•ื’ืžื, ืงื‘ืœืช ืžื™ื“ืข ืื• ื”ื ืคืฉื”) ื›ืชื’ื•ื‘ื” ืœืฉื™ื ื•ื™ ื‘-props, ื”ืฉืชืžืฉื• ื‘-componentDidUpdate ื‘ืžืงื•ื.
  • ืื ื”ืฉืชืžืฉืชื ื‘- componentWillReceiveProps ืขื‘ื•ืจ ื—ื™ืฉื•ื‘ ืžื—ื“ืฉ ืฉืœ ืžื™ื“ืข ื›ืœืฉื”ื• ืจืง ื›ืืฉืจ prop ื”ืฉืชื ื”, ื”ืฉืชืžืฉื• ื‘-memoization helper ื‘ืžืงื•ื.
  • ืื ื”ืฉืชืžืฉืชื ื‘- componentWillReceiveProps ืขืœ ืžื ืช โ€œืœืืคืกโ€ state ื›ืืฉืจ prop ื”ืฉืชื ื”, ืฉื™ืงืœื• ืœื™ืฆื•ืจ ืงื•ืžืคื•ื ื ื˜ื” fully controlled ืื• fully uncontrolled with a key ื‘ืžืงื•ื.

ืœืžืงืจื™ื ืื—ืจื™ื, ืขืงื‘ื• ืื—ืจ ื”ื”ืžืœืฆื•ืช ื‘ืคื•ืกื˜ ื”ื–ื” ืžืชื•ืš ื”ื‘ืœื•ื’ ืขืœ derived state.

UNSAFE_componentWillReceiveProps() ืžืชื‘ืฆืขืช ืœืคื ื™ ืฉืงื•ืžืคื•ื ื ื˜ื” ืฉืขื‘ืจื” mounting ืžืงื‘ืœืช props ื—ื“ืฉื™ื. ืื ืืชื ืฆืจื™ื›ื™ื ืœืขื“ื›ืŸ ืืช ื”-state ื›ืชื’ื•ื‘ื” ืœืฉื™ื ื•ื™ props (ืœื“ื•ื’ืžื, ื›ื“ื™ ืœืืคืก ืื•ืชื•), ืืชื ื™ื›ื•ืœื™ื ืœื”ืฉื•ื•ืช ืืช this.props ื•ืืช nextProps ื•ืœื‘ืฆืข ื—ื™ืœื•ืคื™ state ื‘ืืžืฆืขื•ืช this.setState() ื‘ืžืชื•ื“ื” ื”ื–ื•.

ืฉื™ืžื• ืœื‘ ืฉืื ืงื•ืžืคื•ื ื ื˜ืช ื”ื•ืจื” ื’ื•ืจืžืช ืœืงื•ืžืคื•ื ื ื˜ื” ืฉืœื›ื ืœื”ืชืจื ื“ืจ ืžื—ื“ืฉ, ืชืชื‘ืฆืข ืงืจื™ืื” ืœืžืชื•ื“ื” ื”ื–ื• ืืคื™ืœื• ืื props ืœื ื”ืฉืชื ื•. ื•ื“ืื• ืœื”ืฉื•ื•ืช ืืช ื”ืขืจื›ื™ื ื”ื ื•ื›ื—ื™ื™ื ื•ื”ื‘ืื™ื ืื ืืชื ืจื•ืฆื™ื ืจืง ืœื˜ืคืœ ื‘ืฉื™ื ื•ื™ื™ื.

React ืœื ืงื•ืจืืช ืœ- UNSAFE_componentWillReceiveProps() ืขื props ื”ืชื—ืœืชื™ื™ื ื‘ืžื”ืœืš mounting. ื”ื™ื ืงื•ืจืืช ืœืžืชื•ื“ื” ื”ื–ื• ืจืง ืื ืžืกืคืจ props ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื” ืขืฉื•ื™ื™ื ืœื”ืชืขื“ื›ืŸ. ืงืจื™ืื” ืœ- this.setState() ื‘ื“ืจืš ื›ืœืœ ืœื ืžืขื•ืจืจืช ืงืจื™ืื” ืœ- UNSAFE_componentWillReceiveProps().


UNSAFE_componentWillUpdate()

UNSAFE_componentWillUpdate(nextProps, nextState)

ื”ืขืจื”

ืžืชื•ื“ืช ืžืขื’ืœ-ื”ื—ื™ื™ื ื”ื–ื• ื ืงืจื ื‘ืขื‘ืจ componentWillUpdate. ื”ืฉื ื”ื–ื” ื™ืžืฉื™ืš ืœืขื‘ื•ื“ ืขื“ ืœื’ืจืกื 17. ื”ืฉืชืžืฉื• ื‘-rename-unsafe-lifecycles codemod ืœืขื“ื›ื•ืŸ ืื•ื˜ื•ืžื˜ื™ ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื•ืช ืฉืœื›ื.

UNSAFE_componentWillUpdate() ืžืชื‘ืฆืขืช ืจื’ืข ืœืคื ื™ ืจื™ื ื“ื•ืจ ื›ืชื•ืฆืื” ืžืงื‘ืœืช props ืื• state ื—ื“ืฉื™ื. ื”ืฉืชืžืฉื• ื‘ื” ื›ื”ื–ื“ืžื ื•ืช ืœื‘ืฆืข ื”ื›ื ื•ืช ืœืคื ื™ ืฉืขื“ื›ื•ืŸ ืžืชื‘ืฆืข. ื”ืžืชื•ื“ื” ื”ื–ื• ืœื ื ืงืจืืช ื‘ืจื™ื ื“ื•ืจ ื”ืจืืฉื•ื ื™.

ืฉื™ืžื• ืœื‘ ืฉืืชื ืœื ื™ื›ื•ืœื™ื ืœืงืจื•ื ืœ- this.setState() ื›ืืŸ; ื’ื ืืชื ืœื ืืžื•ืจื™ื ืœืขืฉื•ืช ื“ื‘ืจ ืฉื™ื’ืจื•ื ืœืขื“ื›ื•ืŸ ืงื•ืžืคื•ื ื ื˜ื” ื‘-React ืœืคื ื™ ืฉ- UNSAFE_componentWillUpdate() ื—ื•ื–ืจืช.

ื‘ื“ืจืš ื›ืœืœ, ื”ืžืชื•ื“ื” ื”ื–ื• ื™ื›ื•ืœื” ืœื”ื™ื•ืช ืžื•ื—ืœืคืช ืขืœ-ื™ื“ื™ componentDidUpdate(). ืื ืงืจืืชื ืžื”-DOM ื‘ืžืชื•ื“ื” ื”ื–ื• (ืœื“ื•ื’ืžื, ื›ื“ื™ ืœืฉืžื•ืจ ืžื™ืงื•ื ื’ืœื™ืœื”), ืืชื ื™ื›ื•ืœื™ื ืœื”ืขื‘ื™ืจ ืืช ื”ืœื•ื’ื™ืงื” ื”ื–ื• ืœ-getSnapshotBeforeUpdate().

ื”ืขืจื”

UNSAFE_componentWillUpdate() ืœื ืชืชื‘ืฆืข ืื shouldComponentUpdate() ืžื—ื–ื™ืจื” false.


API-ื™ื ืื—ืจื™ื

ืœื ื›ืžื• ืžืชื•ื“ื•ืช ืžืขื’ืœ-ื”ื—ื™ื™ื ืœืžืขืœื” (ืืฉืจ React ืงื•ืจืืช ืœื”ืŸ ืขื‘ื•ืจื ื•), ื”ืžืชื•ื“ื•ืช ืœื”ืœืŸ ื”ืŸ ืžืชื•ื“ื•ืช ืฉืื ื—ื ื• ื™ื›ื•ืœื™ื ืœืงืจื•ื ืœื”ืŸ ืžื”ืงื•ืžืคื•ื ื ื˜ื•ืช ืฉืื ื• ื™ื•ืฆืจื™ื.

ื™ืฉ ืจืง ืฉื ื™ื™ื ื›ืืœื•: setState() ื•- forceUpdate().

setState()

setState(updater, [callback])

setState() ืžื›ื ื™ืกื” ืœืชื•ืจ ืฉื™ื ื•ื™ื™ื ื‘-state ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื” ื•ืื•ืžืจืช ืœ-React ืฉื”ืงื•ืžืคื•ื ื ื˜ื” ื”ื–ื• ื•ื”ื™ืœื“ื™ื ืฉืœื” ืฆืจื™ื›ื™ื ืœื”ื™ื•ืช ืžืจื•ื ื“ืจื™ื ืžื—ื“ืฉ ืขื ื”-state ื”ืžืขื•ื“ื›ืŸ. ื–ื• ื”ืžืชื•ื“ื” ื”ืจืืฉื™ืช ืฉื‘ื” ืžืฉืชืžืฉื™ื ื›ื“ื™ ืœืขื“ื›ืŸ ืืช ืžืžืฉืง ื”ืžืฉืชืžืฉ ื‘ืชื’ื•ื‘ื” ืœืžื ื”ืœื™ ืื™ืจื•ืขื™ื ื•ืชื’ื•ื‘ื•ืช ืฉืจืช.

<<<<<<< HEAD ื—ื™ืฉื‘ื• ืขืœ setState() ื›ืืœ ื‘ืงืฉื” ืžืืฉืจ ื›ืืœ ืคืงื•ื“ื” ืžื™ื“ื™ืช ืœืขื“ื›ื•ืŸ ื”ืงื•ืžืคื•ื ื ื˜ื”. ืœืžืขืŸ ื‘ื™ืฆื•ืขื™ื ื˜ื•ื‘ื™ื ื™ื•ืชืจ, React ืขืฉื•ื™ื” ืœืขื›ื‘ ืืช ื‘ื™ืฆื•ืขื” ืฉืœ ื”ืคืงื•ื“ื”, ื•ืื– ืœืขื“ื›ืŸ ืžืกืคืจ ืงื•ืžืคื•ื ื ื˜ื•ืช ื‘ืžืขื‘ืจ ืื—ื“. React ืœื ืžื‘ื˜ื™ื—ื” ืฉืฉื™ื ื•ื™ ื”-state ื™ืชื‘ืฆืขื• ืžื™ื“ื™ืช. ======= Think of setState() as a request rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. In the rare case that you need to force the DOM update to be applied synchronously, you may wrap it in flushSync, but this may hurt performance.

84ad3308338e2bb819f4f24fa8e9dfeeffaa970b

setState() ืœื ืชืžื™ื“ ืžืขื“ื›ื ืช ื‘ืื•ืคืŸ ืžื™ื“ื™ ืืช ื”ืงื•ืžืคื•ื ื ื˜ื”. ื”ื™ื ืขืฉื•ื™ื” ืœื“ื—ื•ืช ืืช ื”ืขื™ื“ื›ื•ืŸ ืœืื—ืจ ื›ืš. ื–ื” ื’ื•ืจื ืœื›ืš ืฉืงืจื™ืื” ืž- this.state ื™ืฉืจ ืื—ืจื™ ืงืจื™ืื” ืœ-setState() ืœืžืœื›ื•ื“ืช ืคื•ื˜ื ืฆื™ืืœื™ืช. ื‘ืžืงื•ื, ื”ืฉืชืžืฉื• ื‘- componentDidUpdate ืื• ื‘ืคื•ื ืงืฆื™ืช ื”-callback ื‘-setState (setState(updater, callback)), ื‘ื›ืœ ืื—ื“ ืžื”ืžืงืจื™ื ืžื•ื‘ื˜ื— ื›ื™ ื™ืชื‘ืฆืข ืœืื—ื“ ืฉื”ืขื“ื›ื•ืŸ ื™ืงืจื”. ืื ื™ืฉ ืฆื•ืจืš ืœื”ื’ื“ื™ืจ ืืช ื”-state ื‘ื”ืชื‘ืกืก ืขืœ ื”-state ื”ืงื•ื“ื, ืงืจืื• ืขืœ ื”ืืจื’ื•ืžื ื˜ updater ืžื˜ื”.

setState() ืชืžื™ื“ ื™ื•ื‘ื™ืœ ืœืจื™ื ื“ื•ืจ ืžื—ื“ืฉ ืืœื ืื shouldComponentUpdate() ืชื—ื–ื™ืจ false. ืื ืื•ื‘ื™ื™ืงื˜ื™ื ืฉื ื™ืชื ื™ื ืœืฉื™ื ื•ื™ (mutable) ื ืžืฆืื™ื ื‘ืฉื™ืžื•ืฉ ื•ืœื•ื’ื™ืงืช ืจื™ื ื“ื•ืจ ืžื•ืชื ื” ืœื ื™ื›ื•ืœื” ืœื”ื™ื•ืช ืžืžื•ืžืฉืช ื‘- shouldComponentUpdate(), ืงืจื™ืื” ืœ- setState() ืจืง ื›ืืฉืจ ื”-state ื”ื—ื“ืฉ ืฉื•ื ื” ืžื”ืงื•ื“ื ืชืžื ืข ืจื™ื ื“ื•ืจ ืžื—ื“ืฉ ืžื™ื•ืชืจ.

ื”ืืจื’ื•ืžื ื˜ ื”ืจืืฉื•ืŸ ื”ื•ื ืคื•ื ืงืฆื™ื™ืช updater ืขื ื”ื—ืชื™ืžื”:

(state, props) => stateChange

state ื”ื•ื ื”ืคื ื™ื™ื” ืœ-state ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื” ื‘ื–ืžืŸ ืฉื”ืฉื™ื ื•ื™ ื”ื™ื” ืžื‘ื•ืฆืข. ืœื ืืžื•ืจื™ื ืœื‘ืฆืข ืฉื™ื ื•ื™ื™ื ื™ืฉื™ืจื•ืช. ื‘ืžืงื•ื, ืฉื™ื ื•ื™ื™ื ืฆืจื™ื›ื™ื ืœื”ื™ื•ืช ืžื™ื•ืฆื’ื™ื ืขืœ ื™ื“ื™ ื‘ื ื™ื™ืช ืื•ื‘ื™ืงื˜ ื—ื“ืฉ ื”ืžื‘ื•ืกืก ืขืœ ื”ืงืœื˜ ืž-state ื•-props. ืœืžืฉืœ, ื ื ื™ื— ืฉืจืฆื™ื ื• ืœื”ื’ื“ื™ืœ ืขืจืš ื‘-state ืขืœ-ื™ื“ื™ props.step:

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

ื’ื state ื•ื’ื props ืฉื”ืชืงื‘ืœื• ืขืœ ื™ื“ื™ ืคื•ื ืฆื™ื™ืช ื”ืขื“ื›ื•ืŸ ืžื•ื‘ื˜ื—ื™ื ืœื”ื™ื•ืช ืžืขื•ื“ื›ื ื™ื. ื”ืคืœื˜ ืฉืœ ื”ืขื“ื›ื•ืŸ ืžืชืื—ื“ ื‘ืื•ืคืŸ ืจื“ื•ื“ ืขื state.

ื”ืคืจืžื˜ืจ ื”ืฉื ื™ ืœ- setState() ื”ื•ื ืคื•ื ืงืฆื™ื™ืช callback ืื•ืคืฆื™ื•ื ืœื™ืช ืฉืชืชื‘ืฆืข ื‘ืจื’ืข ืฉ- setState ืชื•ืฉืœื ื•ื”ืงื•ืžืคื•ื ื ื˜ื” ืชืจื•ื ื“ืจ ืžื—ื“ืฉ. ื‘ื›ืœืœื™ื•ืช, ืื ื—ื ื• ืžืžืœื™ืฆื™ื ืขืœ ืฉื™ืžื•ืฉ ื‘- componentDidUpdate() ืœืœื•ื’ื™ืงื•ืช ื›ืืœื•, ื‘ืžืงื•ื.

ืื•ืคืฆื™ื•ื ืœื™ืช, ื ื™ืชืŸ ืœื”ืขื‘ื™ืจ ืื•ื‘ื™ื™ืงื˜ ื›ืืจื’ื•ืžื ื˜ ื”ืจืืฉื•ืŸ ืœ- setState() ื‘ืžืงื•ื ืคื•ื ืงืฆื™ื”:

setState(stateChange[, callback])

ื“ืจืš ื–ื• ืžื‘ืฆืขืช ืื™ื—ื•ื“ ืจื“ื•ื“ ืฉืœ stateChange ืœืชื•ืš ื”-state ื”ื—ื“ืฉ, ืœื“ื•ื’ืžื ื›ื“ื™ ืœืฉื ื•ืช ื›ืžื•ืช ืฉืœ ืคืจื™ื˜ ื‘ืขื’ืœืช ืงื ื™ื•ืช:

this.setState({quantity: 2})

ื”ืฆื•ืจื” ื”ื–ื• ืฉืœ setState() ื”ื™ื ื’ื ืืกื™ื ื›ืจื•ื ื™ืช, ื•ืงืจื™ืื•ืช ืžืจื•ื‘ื•ืช ื‘ืžื”ืœืš ืื•ืชื• ืžืขื’ืœ-ื—ื™ื™ื ืขืœื•ืœื™ื ืœื”ืชื ื’ืฉ. ืœื“ื•ื’ืžื, ืื ื ื ืกื” ืœื”ื’ื“ื™ืœ ื›ืžื•ืช ืฉืœ ืคืจื™ื˜ ื™ื•ืชืจ ืžืคืขื ืื—ืช ื‘ืื•ืชื• ืžืขื’ืœ, ื–ื” ื™ื’ืจื•ื ืœืชื•ืฆืื” ื”ืฉืงื•ืœื” ืœ:

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

ืงืจื™ืื•ืช ืขื•ืงื‘ื•ืช ื™ื’ืจืžื• ืœื“ืจื™ืกื” ืฉืœ ืขืจื›ื™ื ืžืงืจื™ืื•ืช ืงื•ื“ืžื•ืช ื‘ืื•ืชื• ืžืขื’ืœ, ืœื›ืŸ ื”ื›ืžื•ืช ืชื’ื“ืœ ืคืขื ืื—ืช ื‘ืœื‘ื“. ืื ื”-state ื”ื‘ื ืชืœื•ื™ ื‘-state ื”ื ื•ื›ื—ื™, ืื ื—ื ื• ืžืžืœื™ืฆื™ื ืœื”ืฉืชืžืฉ ื‘ืฆื•ืจื” ืฉืœ ืคื•ื ืงืฆื™ื™ืช ืขื“ื›ื•ืŸ, ื‘ืžืงื•ื:

this.setState((state) => {
  return {quantity: state.quantity + 1};
});

ืœืžื™ื“ืข ื ื•ืกืฃ, ืขื™ื™ื ื•:


forceUpdate()

component.forceUpdate(callback)

ื‘ืชื•ืจ ื‘ืจื™ืจืช ืžื—ื“ืœ, ื›ืืฉืจ ื”-state ืื• ื”-props ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื” ืฉืœื›ื ืžืฉืชื ื™ื, ื”ืงื•ืžืคื•ื ื ื˜ื” ืฉืœื›ื ืชืจื•ื ื“ืจ ืžื—ื“ืฉ. ืื ืžืชื•ื“ืช ื”- render() ืฉืœื›ื ืชืœื•ื™ื” ื‘ืžื™ื“ืข ื ื•ืกืฃ ืื—ืจ, ืืชื ื™ื›ื•ืœื™ื ืœื”ื’ื™ื“ ืœ-React ืฉื”ืงื•ืžืคื•ื ื ื˜ื” ื–ืงื•ืงื” ืœืจื™ื ื“ื•ืจ ืžื—ื“ืฉ ืขืœ-ื™ื“ื™ ืงืจื™ืื” ืœ- forceUpdate().

ืงืจื™ืื” ืœ- forceUpdate() ืชื’ืจื•ื ืœื›ืš ืฉืชืชื‘ืฆืข ืงืจื™ืื” ืœ- render() ื‘ืงื•ืžืคื•ื ื ื˜ื”, ืชื•ืš ื›ื“ื™ ื“ื™ืœื•ื’ ืขืœ shouldComponentUpdate(). ื–ื” ื™ืขื•ืจืจ ืชื’ื•ื‘ื” ืฉืœ ืžืชื•ื“ื•ืช ืžืขื’ืœ-ื”ื—ื™ื™ื ื”ืจื’ื™ืœ ืœืงื•ืžืคื•ื ื ื˜ื•ืช ื™ืœื“, ืœืจื‘ื•ืช ืžืชื•ื“ืช ื”- shouldComponentUpdate() ืฉืœ ื›ืœ ื™ืœื“. React ืขื“ื™ื™ืŸ ืจืง ืชืขื“ื›ืŸ ืืช ื”-DOM ื”-markup ื™ืฉืชื ื”.

ื”ื“ืจืš ื”ื ื›ื•ื ื” ื”ื™ื ืœื ืกื•ืช ืœื”ืžื ืข ืžืฉื™ืžื•ืฉ ื‘- forceUpdate() ื•ืจืง ืœืงืจื•ื ืž- this.props ื•- this.state ื‘- render().


Properties ืฉืœ ืžื—ืœืงื•ืช (Class Properties)

defaultProps

defaultProps ื™ื›ื•ืœ ืœื”ื™ื•ืช ืžื•ื’ื“ืจ ื›-property ื‘ืžื—ืœืงืช ื”ืงื•ืžืคื•ื ื ื˜ื” ืขืฆืžื”, ื›ื“ื™ ืœื”ื’ื“ื™ืจ ืืช props ื‘ืจื™ืจืช-ื”ืžื—ื“ืœ ืขื‘ื•ืจ ื”ืžื—ืœืงื”. ื”ืฉื™ืžื•ืฉ ื‘ื–ื” ื”ื•ื ืขื‘ื•ืจ props ืฉื”ื undefined, ืื‘ืœ ืœื ืขื‘ื•ืจ props ืฉื”ื null. ืœื“ื•ื’ืžื:

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

ืื ืื™ืŸ ืขืจืš ืœ-props.color, ืขืจื›ื• ื™ื™ืงื‘ืข ืœืคื™ ื‘ืจื™ืจืช ื”ืžื—ื“ืœ 'blue':

  render() {
    return <CustomButton /> ; // props.color ื™ื™ืงื‘ืข ืœื”ื™ื•ืช ื›ื—ื•ืœ
  }

ืื props.color ืžื•ื’ื“ืจ ืœื”ื™ื•ืช null, ื”ื•ื ื™ื™ืฉืืจ null:

  render() {
    return <CustomButton color={null} /> ; // props.color ื™ืฉืืจ null
  }

displayName

ื”ืžื—ืจื•ื–ืช displayName ื‘ืฉื™ืžื•ืฉ ื‘ื”ื•ื“ืขื•ืช ื“ื™ื‘ืื’ื™ื ื’. ื‘ื“ืจืš ื›ืœืœ, ืื ื—ื ื• ืœื ืฆืจื™ื›ื™ื ืœื”ื’ื“ื™ืจ ืื•ืชื” ื‘ืื•ืคืŸ ืžืคื•ืจืฉ ื‘ื’ืœืœ ืฉื”ืฉื ืฉืœื” ื ื’ื–ืจ ืžื”ืฉื ืฉืœ ื”ืคื•ื ืงืฆื™ื” ืื• ื”ืžื—ืœืงื” ืฉืžื’ื“ื™ืจื” ืืช ื”ืงื•ืžืคื•ื ื ื˜ื”. ื™ื™ืชื›ืŸ ืฉื ืจืฆื” ืœื”ื’ื“ื™ืจ ืื•ืชื” ืžืคื•ืจืฉื•ืช ืื ื ืจืฆื” ืœื”ืฆื™ื’ ืฉื ืื—ืจ ืขื‘ื•ืจ ืžื˜ืจื•ืช ื“ื™ื‘ืื’ื™ื ื’ ืื• ื›ืืฉืจ ื ื™ืฆื•ืจ ืงื•ืžืคื•ื ื ื˜ื” ืžืกื“ืจ ื’ื‘ื•ื” ื™ื•ืชืจ, ืขื™ื™ื ื• ื‘-ืœืขื˜ื•ืฃ ืืช ืฉื ื”ืชืฆื•ื’ื” ืขื‘ื•ืจ ื“ื™ื‘ืื’ื™ื ื’ ืคืฉื•ื˜ ื‘ืฉื‘ื™ืœ ืžื™ื“ืข ื ื•ืกืฃ.


Properties ืฉืœ ืžื•ืคืข (Instance Properties)

props

this.props ืžื›ื™ืŸ ืืช ื”-props ืฉื”ื•ื’ื“ืจื• ืขืœ ื™ื“ื™ ื”ืžืคืขื™ืœ ืฉืœ ื”ืงื•ืžืคื•ื ื ื˜ื” ื”ื–ื•. ืขื™ื™ื ื• ื‘-ืงื•ืžืคื•ื ื ื˜ื•ืช ื•-props ืขื‘ื•ืจ ื”ืงื“ืžื” ืœ-props.

this.props.children ื”ื•ื prop ืžื™ื•ื—ื“, ื‘ื“ืจืš ื›ืœืœ ืžื•ื’ื“ืจ ืขืœ ื™ื“ื™ ื”ื˜ืื’ื™ื ืฉืœ ื”ื™ืœื“ ื‘ื‘ื™ื˜ื•ื™ ื”-JSX ืžืืฉืจ ื‘ื˜ืื’ ืขืฆืžื•.

state

ื”-state ืžื›ื™ืœ ืžื™ื“ืข ืกืคืฆื™ืคื™ ืœืงื•ืžืคื•ื ื ื˜ื” ื”ื–ืืช ืฉืขืฉื•ื™ ืœื”ืฉืชื ื•ืช ื‘ืžื”ืœืš ื”ื–ืžืŸ. ื”-state ืžื•ื’ื“ืจ ืขืœ-ื™ื“ื™ ื”ืžืฉืชืžืฉ, ื•ื”ื•ื ืืžื•ืจ ืœื”ื™ื•ืช ืื•ื‘ื™ืงื˜ JavaScript ืคืฉื•ื˜.

ืื ืขืจืš ื›ืœืฉื”ื• ืœื ื‘ืฉื™ืžื•ืฉ ืขื‘ื•ืจ ืจื™ื ื“ื•ืจ ืื• ืขื‘ื•ืจ ื–ืจื™ืžืช ืžื™ื“ืข (ืœื“ื•ื’ืžื, timer ID), ืื™ืŸ ื—ื•ื‘ื” ืœืฉื™ื ืื•ืชื• ื‘ืชื•ืš ื”-state. ืขืจื›ื™ื ื›ืืœื• ื™ื›ื•ืœื™ื ืœื”ื™ื•ืช ืžื•ื’ื“ืจื™ื ื›ืฉื“ื•ืช ื‘ืงื•ืžืคื•ื ื ื˜ืช ื”ืžื•ืคืข.

ืขื™ื™ื ื• ื‘-State ื•ืžื—ื–ื•ืจ ื—ื™ื™ื ืขื‘ื•ืจ ืžื™ื“ืข ื ื•ืกืฃ ืขืœ ื”-state.

ืœืขื•ืœื ืืœ ืชืฉื ื• ืืช this.state ื™ืฉื™ืจื•ืช, ืžื›ื™ื•ื•ืŸ ืฉืงืจื™ืื” ืœ- setState() ืœืื—ืจ ืžื›ืŸ ืขืœื•ืœื” ืœื”ื—ืœื™ืฃ ืืช ื”ืฉื™ื ื•ื™ ืฉื‘ื™ืฆืขืชื. ื”ืชื™ื™ื—ืกื• ืœ- this.state ื›ืื™ืœื• ื”ื™ื” ืื™ืžื™ื•ื˜ื‘ืœ.