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

Thinking in React

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

ืื—ื“ ืžื”ื™ืชืจื•ื ื•ืช ื”ื‘ื•ืœื˜ื™ื ืฉืœ React ื”ื•ื ืื™ืš ื”ื•ื ื’ื•ืจื ืœืš ืœื—ืฉื•ื‘ ืขืœ ื”ื™ื™ืฉื•ืžื™ื ื‘ื–ืžืŸ ืฉืืชื” ื‘ื•ื ื” ืื•ืชื. ื‘ืžื“ืจื™ืš ื–ื”, ื ืœื•ื•ื” ืื•ืชืš ื‘ืชื”ืœื™ืš ื”ื—ืฉื™ื‘ื” ืฉืœ ื‘ื ื™ื™ืช ื˜ื‘ืœืช ื ื•ืชื ื™ ืžื•ืฆืจื™ื ื‘ืืžืฆืขื•ืช React.

ื ืชื—ื™ืœ ืขื ื“ื•ื’ืžื

ื ื ื™ื— ืฉื™ืฉ ืœื ื• ืžืžืฉืง JSON ืฉื ืจืื” ื›ื›ื”:

Mockup

ื”ืžืžืฉืง ืžื—ื–ื™ืจ ืžื™ื“ืข ื‘ืคื•ืจืžื˜ JSON ืฉื ืจืื” ื›ื›ื”:

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

ื”ืฉืœื‘ ื”ืจืืฉื•ืŸ: ืคื™ืฆื•ืœ ืžืžืฉืง ื”ืžืฉืชืžืฉ ืœื”ื™ืจืจื›ื™ื™ืช ืงื•ืžืคื•ื ื ื˜ื•ืช

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

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

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

ืชืจืฉื™ื ื”ืžืจืื” nesting ืฉืœ ืงื•ืžืคื•ื ื ื˜ื•ืช

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

  1. FilterableProductTable (ื›ืชื•ื): ืžื›ื™ืœ ืืช ื›ืœ ืชื›ื•ืœืช ื”ื“ื•ื’ืžื”
  2. SearchBar (ื›ื—ื•ืœ): ืงืœื˜ ื”ืžืฉืชืžืฉ
  3. ProductTable (ื™ืจื•ืง): ืžืฆื™ื’ ื•ืžืกื ืŸ ืืช ื”ืžื™ื“ืข ืขืœ ืกืžืš ืงืœื˜ ื”ืžืฉืชืžืฉ
  4. ProductCategoryRow (ื˜ื•ืจืงื™ื–): ืžืฆื™ื’ ื›ื•ืชืจืช ืœื›ืœ ืงื˜ื’ื•ืจื™ื”
  5. ProductRow (ืื“ื•ื): ืžืฆื™ื’ ืฉื•ืจื” ืœื›ืœ ืžื•ืฆืจ

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

Step 2: ื‘ื ื™ื™ืช ื’ืจืกื” ืกื˜ื˜ื™ืช ื‘React

See the Pen Thinking In React: Step 2 on CodePen.

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

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

ื ื•ื›ืœ ืœื‘ื ื•ืช ืžืœืžืขืœื” ืœืžื˜ื” ืื• ืžืœืžื˜ื” ืœืžืขืœื”. ืฉื–ื” ืื•ืžืจ ืฉื ื•ื›ืœ ืœื”ืชื—ื™ืœ ืœื‘ื ื•ืช ืืช ื”ืงื•ืžืคื•ื ื ื˜ื•ืช ืžืœืžืขืœื” ื‘ื”ื™ืจื›ื›ื™ื”( ื ืชื—ื™ืœ ืžFilterableProductTable ) ืื• ืžื”ืงื•ืžืคื•ื ื ื˜ื•ืช ื”ืชื—ืชื•ื ื•ืช ื‘ื”ื™ืจืจื›ื™ื”( ProductRow ). ื‘ื“ื•ื’ืžื•ืช ืคืฉื•ื˜ื•ืช ื™ื•ืชืจ, ื–ื” ืงืœ ื™ื•ืชืจ ืœื”ืชื—ื™ืœ ืžืœืžืขืœื” ืœืžื˜ื”, ื•ื‘ืคืจื•ื™ืงื˜ื™ื ื’ื“ื•ืœื™ื, ื–ื” ืงืœ ื™ื•ืชืจ ืœื”ืชื—ื™ืœ ืžืœืžื˜ื” ืœืžืขืœื” ื•ืœื›ืชื•ื‘ tests ื‘ืžืงื‘ื™ืœ ืœื‘ื ื™ื™ื”.

<<<<<<< HEAD ื‘ืกื•ืฃ ื”ืฉืœื‘ ื”ื–ื”, ื™ื”ื™ื” ืœื ื• ืกืคืจื™ื™ื” ืฉืœ ืงื•ืžืคื•ื ื ื˜ื•ืช ืฉืžื™ืฉื•ืช ืฉืžืจื ื“ืจื•ืช ืืช ืžื•ื“ืœ ื”ืžื™ื“ืข. ื”ืงื•ืžืคื•ื ื ื˜ื•ืช ื™ื›ื™ืœื• ืจืง ืžืชื•ื“ื•ืช render() ืžื›ื™ื•ืŸ ืฉื–ื•ื”ื™ ื’ืจืกื” ืกื˜ื˜ื™ืช ืฉืœ ื”ื™ื™ืฉื•ื. ื”ืงื•ืžืคื•ื ื ื˜ื” ื‘ืจืืฉ ื”ื”ื™ืจืจื›ื™ื”(FilterableProductTable) ืชื™ืงื— ืืช ืžื•ื“ืœ ื”ืžื™ื“ืข ื›prop ืฉื™ื•ืขื‘ืจ ืœื”. ืื ื ื‘ืฆืข ืฉื™ื ื•ื™ ืœืžื•ื“ืœ ื”ืžื™ื“ืข ื•ื ืงืจื ืœ ReactDOM.render() ืฉื•ื‘, ืžืžืฉืง ื”ืžืฉืชืžืฉ ื™ืขื•ื“ื›ืŸ. ื–ื” ืคืฉื•ื˜ ืœืจืื•ืช ืื™ืš ืžืžืฉืง ื”ืžืฉืชืžืฉ ืžืขื•ื“ื›ืŸ ื•ื”ื™ื›ืŸ ืœื‘ืฆืข ืฉื™ื ื•ื™ื™ื ืžื›ื™ื•ื•ืŸ ืฉืฉื•ื ื“ื‘ืจ ืžืกื•ื‘ืš ืœื ืžืชื‘ืฆืข. ื”ืขื‘ืจืช ื”ืžื™ื“ืข ื‘ื›ื™ื•ื•ืŸ ืื—ื“ ืฉืœ React ืžืฉืื™ืจื” ื”ื›ืœ ื‘ืฆื•ืจื” ืžื•ื“ื•ืœืจื™ืช ื•ืžื”ื™ืจื”. ======= At the end of this step, youโ€™ll have a library of reusable components that render your data model. The components will only have render() methods since this is a static version of your app. The component at the top of the hierarchy (FilterableProductTable) will take your data model as a prop. If you make a change to your underlying data model and call root.render() again, the UI will be updated. You can see how your UI is updated and where to make changes. Reactโ€™s one-way data flow (also called one-way binding) keeps everything modular and fast.

84ad3308338e2bb819f4f24fa8e9dfeeffaa970b

ืงืจื ืขื•ื“ ื‘ืชื™ืขื•ื“ ืฉืœ ืจื™ืืงื˜ ืื ืชืฆื˜ืจืš ืขื–ืจื” ื‘ื‘ื™ืฆื•ืข ืฉืœื‘ ื–ื”.

ื”ืคื•ื’ื” ืงืฆืจื”: props ื•- state

ื™ืฉ ืฉื ื™ ืกื•ื’ื™ื ืฉืœ โ€˜ืžื•ื“ืœื™โ€™ ืžื™ื“ืข ื‘React : props ื•state. ื–ื” ื—ืฉื•ื‘ ืœื”ื‘ื™ืŸ ืืช ื”ื”ื‘ื“ืœื™ื ื‘ื™ืŸ ื”ืฉื ื™ื™ื. ืงืจื ืขื•ื“ ื‘ืชื™ืขื•ื“ ืฉืœ ืจื™ืืงื˜ ืื ืืชื” ืœื ื‘ื˜ื•ื— ืžื” ื”ื”ื‘ื“ืœ. ืจืื” ื’ื ืฉืืœื•ืช ื ืคื•ืฆื•ืช: ืžื” ื”ื”ื‘ื“ืœ ื‘ื™ืŸ state ื•-props?

ืฉืœื‘ ืฉืœื™ืฉื™: ื–ื™ื”ื•ื™ ื”ื™ื™ืฆื•ื’ ื”ืžื™ื ื™ืžืœื™( ืืš ืžืœื ) ืฉืœ ื”state ืฉืœ ืžืžืฉืง ื”ืžืฉืชืžืฉ

ืขืœ ืžื ืช ืฉืžืžืฉืง ื”ืžืฉืชืžืฉ ื™ื”ื™ื” ืื™ื ื˜ืจืืงื˜ื™ื‘ื™, ื ืฆื˜ืจืš ืฉื™ื”ื™ื” ืœื ื• ืืช ื”ื™ื›ื•ืœืช ืœืฉื ื•ืช ืืช ืžื•ื“ืœ ื”ืžื™ื“ืข ืฉืœื ื•. React ืขื•ืฉื” ื–ืืช ืขื state.

ื›ื“ื™ ืœื‘ื ื•ืช ืืช ื”ื™ื™ืฉื•ื ื‘ืฆื•ืจื” ื ื›ื•ื ื”, ืฆืจื™ืš ืœื—ืฉื•ื‘ ืชื—ื™ืœื” ืขืœ ื”ื›ืžื•ืช ื”ืžื™ื ื™ืžืœื™ืช ืฉืœ state ืฉื”ื™ื™ืฉื•ื ื“ื•ืจืฉ. ื”ืžืคืชื— ืคื” ื”ื•ื DRY: Donโ€™t Repeat Yourself ืฉืื•ืžืจ โ€˜ืืœ ืชืžื—ื–ืจ ืงื•ื“โ€™. ื ื—ืฉื•ื‘ ืขืœ ื”ื›ืžื•ืช ื”ืžื™ื ื™ืžืœื™ืช ื‘ื™ื•ืชืจ ืฉืœ state ืฉื”ื™ื™ืฉื•ื ืฆืจื™ืš ื•ื ื—ืฉื‘ ื›ืœ ื“ื‘ืจ ืื—ืจ ืฉื”ื™ื™ืฉื•ื ืฆืจื™ืš ืœืคื™ ื“ืจื™ืฉื”. ืœื“ื•ื’ืžื”, ืื ืื ื• ื‘ื•ื ื™ื ื™ื™ืฉื•ื ืฉืœ ืจืฉื™ืžืช ืžื˜ืœื•ืช, ื™ื”ื™ื” ืœื ื• ืžืขืจืš ืฉืœ ืžื˜ืœื•ืช; ืœื ื ืฉืื™ืจ ืžืฉืชื ื” ื‘state ื‘ืฉื‘ื™ืœ ื”ื›ืžื•ืช ืžื˜ืœื•ืช. ื‘ืžืงื•ื ื–ื”, ื›ืฉื ืจืฆื” ืœืจื ื“ืจ ืืช ืžืกืคืจ ื”ืžื˜ืœื•ืช, ืคืฉื•ื˜ ื ื™ืงื— ืืช ืื•ืจืš ื”ืžืขืจืš ื•ื ืฆื™ื’ ืื•ืชื•.

ื ืจืื” ืืช ืคื™ืกื•ืช ื”ืžื™ื“ืข ื‘ื™ื™ืฉื•ื ืฉืœื ื•, ื™ืฉ ืœื ื• ืืช:

  • ื”ืจืฉื™ืžื” ื”ืžืงื•ืจื™ืช ืฉืœ ื”ืžื•ืฆืจื™ื
  • ืžื™ืœื•ืช ื”ื—ื™ืคื•ืฉ ืฉื”ืžืฉืชืžืฉ ื”ืงืœื™ื“
  • ืขืจืš ืชื™ื‘ืช ื”ืกื™ืžื•ืŸ
  • ื”ืจืฉื™ืžื” ื”ืžืกื•ื ื ืช ืฉืœ ื”ืžื•ืฆืจื™ื

ื ืขื‘ื•ืจ ืขืœ ื›ืœ ืื—ื“ ื•ื ื—ืฉื•ื‘ ืื™ื–ื” ืคื™ืกืช ืžื™ื“ืข ื”ื™ื ื”state. ื ืขืฉื” ื–ืืช ื‘ืืžืฆืขื•ืช ืฉืื™ืœืช 3 ืฉืืœื•ืช ืขืœ ื›ืœ ืคื™ืกืช ืžื™ื“ืข:

  1. ื”ืื ื”ืžื™ื“ืข ืขื•ื‘ืจ ืžื”ื•ืจื” ื‘ืืžืฆืขื•ืช props? ืื ื›ืŸ, ื–ื” ืœื state.
  2. ื”ืื ื–ื” ื ืฉืืจ ืงื‘ื•ืข ืœืื•ืจืš ื–ืžืŸ? ืื ื›ืŸ, ื–ื” ืœื state.
  3. ื”ืื ืืคืฉืจ ืœื—ืฉื‘ ืืช ื–ื” ืœืคื™ state ืื—ืจ ืื• props ื‘ืงื•ืžืคื•ื ื ื˜ื” ืฉืœื ื•? ืื ื›ืŸ, ื–ื” ืœื state.

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

ืื– ื”ื’ืขื ื• ืœืžืกืงื ื” ืฉื”state ืฉืœื ื• ื”ื•ื:

  • ื˜ืงืกื˜ ื”ื—ื™ืคื•ืฉ ืฉื”ืžืฉืชืžืฉ ื”ืงืœื™ื“
  • ืขืจืš ืชื™ื‘ืช ื”ืกื™ืžื•ืŸ

ืฉืœื‘ ืจื‘ื™ืขื™: ื–ื™ื”ื•ื™ ื”ืžื™ืงื•ื ื”ืžืชืื™ื ืœstate

See the Pen Thinking In React: Step 4 on CodePen.

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

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

ืœื›ืœ ืคื™ืกืช state ื‘ื™ื™ืฉื•ื:

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

ื ืฉืชืžืฉ ื‘ืฉืœื‘ื™ื ืืœื” ื‘ื™ื™ืฉื•ื:

  • ProductTable ืฆืจื™ื›ื” ืœืกื ืŸ ืืช ืจืฉื™ืžืช ื”ืžื•ืฆืจื™ื ืœืคื™ ื”state ื•SearchBar ืฆืจื™ืš ืœื”ืฆื™ื’ ืืช ื˜ืงืกื˜ ื”ื—ื™ืคื•ืฉ ื•ืชื™ื‘ืช ื”ืกื™ืžื•ืŸ.
  • ื”ืงื•ืžืคื•ื ื ื˜ื” ื”ืฉื ื™ื™ื” ืฉืขื•ืฉื” ืฉื™ืžื•ืฉ ื‘state ื”ื™ื FilterableProductTable.
  • ื‘ืื•ืคืŸ ืขืงืจื•ื ื™ ื–ื” ื”ื’ื™ื•ื ื™ ืฉื”ื˜ืงืกื˜ ื”ืžืกื•ื ืŸ ื•ื”ืขืจืš ื”ืžืกื•ืžืŸ โ€˜ื™ื—ื™ื•โ€™ ื‘ืชื•ืš FilterableProductTable.

ืื– ื”ื—ืœื˜ื ื• ืฉื”state โ€˜ื—ื™โ€™ ื‘ืชื•ืš FilterableProductTable. ืจืืฉื™ืช, ื ื•ืกื™ืฃ ืื•ื‘ื™ื™ืงื˜ this.state = {filterText: โ€, inStockOnly: false} ืœFilterableProductTable ืงื•ื ืกื˜ืจืงื˜ื•ืจ ืฉืœื• ืขืœ ืžื ืช ืœืฉืงืฃ ืืช ื”state ื”ืจืืฉื•ื ื™ ืฉืœ ื”ื™ื™ืฉื•ื. ืื—ืจื™ ื–ื”, ื ืขื‘ื™ืจ ืืช filterText ื•inStockOnly ืœProductTable ื• SearchBar ื›prop. ืœื‘ืกื•ืฃ, ื ืฉืชืžืฉ ื‘props ื”ืืœื” ืขืœ ืžื ืช ืœืกื ืŸ ืืช ื”ืฉื•ืจื•ืช ื‘ProductTable ื•ืœื”ื’ื“ื™ืจ ืืช ื”ืขืจื›ื™ื ืฉืœ ื”ืฉื“ื•ืช ื‘ื˜ื•ืคืก ื‘SearchBar.

ืืคืฉืจ ื›ื‘ืจ ืœื”ืชื—ื™ืœ ืœืจืื•ืช ืื™ืš ื”ื™ื™ืฉื•ื ืฉืœื ื• ื™ืชื ื”ื’: ื ื’ื“ื™ืจ ืืช filterText ืœโ€ื›ื“ื•ืจโ€ ื•ื ืจืขื ืŸ ืืช ื”ื™ื™ืฉื•ื. ื ืจืื” ืฉื˜ื‘ืœืช ื”ืžื™ื“ืข ืžืชืขื“ื›ื ืช ืขื ื”ืขืจืš ื”ื ื›ื•ืŸ.

ืฉืœื‘ ื—ืžื™ืฉื™: ื”ื•ืกืคืช ื–ืจื™ืžืช ืžื™ื“ืข ื”ืคื•ื›ื”

See the Pen Thinking In React: Step 5 on CodePen.

ืขื“ ื›ื”, ื‘ื ื™ื ื• ื™ื™ืฉื•ื ืฉืžืจื ื“ืจ ื›ืคื•ื ืงืฆื™ื” ืฉืœ props ื•state ืœืžื˜ื” ื‘ื”ื™ืจืจื›ื™ื”. ืขื›ืฉื™ื• ื–ื” ื”ื–ืžืŸ ืœื”ื•ืกื™ืฃ ืืžืฆืขื™ ืœื–ืจื™ืžื” ื”ืคื•ื›ื” ืฉืœ ืžื™ื“ืข: ืงื•ืžืคื•ื ื ื˜ื•ืช ื”ื˜ื•ืคืก ืขืžื•ืง ื‘ื”ื™ืจื›ื›ื™ื” ืฆืจื™ื›ื•ืช ืœืขื“ื›ืŸ ืืช ื”state ื‘FilterableProductTable.

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

ืื ื ื ืกื” ืœื›ืชื•ื‘ ืื• ืœืกืžืŸ ืืช ื”ืงื•ืคืกื” ื‘ื’ืจืกื” ื”ืงื•ื“ืžืช ืฉืœ ื”ื“ื•ื’ืžื ืฉืœื ื• (ืฉืœื‘ 4), ื ืจืื” ืฉReact ืžืชืขืœื ืžื”ืงืœื˜ ืฉืœื ื•. ื–ื” ื ืขืฉื” ื‘ื›ื•ื•ื ื”, ืžื›ื™ื•ื•ืŸ ืฉืื ื—ื ื• ื”ื’ื“ืจื ื• ืืช ืขืจืš ื”prop ืฉืœ ื”ืงืœื˜ ืœื”ื™ื•ืช ืชืžื™ื“ ืฉื•ื•ื” ืœstate ืฉืžื•ืขื‘ืจ ืžFilterableProductTable.

ื ื—ืฉื•ื‘ ืœืจื’ืข ืขืœ ืžื” ืื ื—ื ื• ืจื•ืฆื™ื ืฉื™ืงืจื”. ืื ื—ื ื• ืจื•ืฆื™ื ืœื”ื™ื•ืช ื‘ื˜ื•ื—ื™ื ืฉื›ืฉื”ืžืฉืชืžืฉ ืžืฉื ื” ืืช ื”ื˜ื•ืคืก, ืื ื—ื ื• ืžืขื“ื›ื ื™ื ืืช ื”state ืฉื™ืฉืงืฃ ืืช ืงืœื˜ ื”ืžืฉืชืžืฉ. ืžื›ื™ื•ื•ืŸ ืฉืจืฆื•ื™ ืฉืงื•ืžืคื•ื ื ื˜ื•ืช ื™ืขื“ื›ื ื• ืืช ื”state ืฉืœื”ืŸ ื‘ืœื‘ื“, FilterableProductTable ื™ืขื‘ื™ืจ callbacks ืœSearchBar ืฉื™ื•ืคืขืœื• ื›ืฉื”state ื™ืชืขื“ื›ืŸ. ืื ื—ื ื• ื™ื›ื•ืœื™ื ืœื”ืฉืชืžืฉ ื‘onChange event ืขืœ ื”ืงืœื˜ื™ื. ื”callbacks ืฉืขื•ื‘ืจื™ื ื“ืจืš FilterableProductTable ื™ืงืจืื• ืœืžืชื•ื“ืช setState(), ื•ื”ื™ื™ืฉื•ื ื™ืชืขื“ื›ืŸ.

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

ื•ื–ื”ื•!

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