{"id":1214,"date":"2024-07-28T02:25:18","date_gmt":"2024-07-27T18:25:18","guid":{"rendered":"http:\/\/codermr.com\/?p=1214"},"modified":"2024-07-28T02:28:12","modified_gmt":"2024-07-27T18:28:12","slug":"thinking-in-react","status":"publish","type":"post","link":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/","title":{"rendered":"Thinking in React"},"content":{"rendered":"\n<p>React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called <em>components<\/em>. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we\u2019ll guide you through the thought process of building a searchable product data table with React.\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u7b80\u5355\u8bf4\uff0c\u5c31\u662f\u4f60\u4f7f\u7528 React \u65f6\uff0c\u4f1a\u5148\u8003\u8651\u628a\u754c\u9762\u62c6\u6210\u4e00\u4e2a\u4e2a\u788e\u7247\uff0c\u79f0\u4e4b\u4e3a <em>components<\/em>\uff0c\u601d\u8003\u4e0d\u540c <em>components<\/em> \u4e4b\u95f4\u7684\u8054\u7cfb\u548c\u4ea4\u4e92\uff0c\u7136\u540e\u518d\u5c06\u5b83\u4eec\u8fde\u63a5\u8d77\u6765\uff0c\u8ba9\u6570\u636e\u6d41\u7ecf\u8fc7\u5b83\u4eec\u3002<\/mark>\uff09<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"start-with-the-mockup\">Start with the mockup&nbsp;<a href=\"https:\/\/react.dev\/learn\/thinking-in-react#start-with-the-mockup\"><\/a><\/h2>\n\n\n\n<p>Imagine that you already have a JSON API and a mockup from a designer.<\/p>\n\n\n\n<p>The JSON API returns some data that looks like this :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;\n  { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\" },\n  { category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\" },\n  { category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\" },\n  { category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\" },\n  { category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\" },\n  { category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\" }\n]<\/code><\/pre>\n\n\n\n<p>\u5047\u8bbe\u4e0a\u9762\u7684 json \u662f\u9700\u8981\u5c55\u793a\u5728\u9875\u9762\u4e0a\u7684\u6570\u636e\uff0c\u5c55\u793a\u7684\u6548\u679c\u56fe\u5982\u4e0b\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-58.png\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"335\" src=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-58.png\" alt=\"\" class=\"wp-image-1215\" srcset=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-58.png 298w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-58-267x300.png 267w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1-break-the-ui-into-a-component-hierarchy\">Step 1: Break the UI into a component hierarchy\u00a0<a href=\"https:\/\/react.dev\/learn\/thinking-in-react#step-1-break-the-ui-into-a-component-hierarchy\"><\/a>\uff08\u6309\u5c42\u7ea7\u62c6\u5206\u754c\u9762\uff09<\/h2>\n\n\n\n<p>Depending on your background, you can think about splitting up a design into components in different ways:<\/p>\n\n\n\n<ul>\n<li><strong>Programming<\/strong> \u2014 use the same techniques for deciding if you should create a new function or object. One such technique is the\u00a0<a href=\"https:\/\/en.wikipedia.org\/wiki\/Single_responsibility_principle\" target=\"_blank\" rel=\"noreferrer noopener\">single responsibility principle<\/a>\uff08<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u5355\u4e00\u804c\u8d23\u539f\u7406<\/mark><\/strong>\uff09, that is, a component should ideally only do one thing. If it ends up growing, it should be <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">decomposed<\/mark> into smaller subcomponents.<\/li>\n\n\n\n<li><strong>CSS<\/strong> \u2014 consider what you would make class selectors for. (However, components are a bit less granular.)<\/li>\n\n\n\n<li><strong>Design<\/strong> \u2014 consider how you would organize the design\u2019s layers.<\/li>\n<\/ul>\n\n\n\n<p>There are five components on this screen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-59.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1014\" height=\"630\" src=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-59.png\" alt=\"\" class=\"wp-image-1216\" srcset=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-59.png 1014w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-59-300x186.png 300w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-59-768x477.png 768w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-59-922x573.png 922w\" sizes=\"(max-width: 1014px) 100vw, 1014px\" \/><\/a><\/figure>\n\n\n\n<ol>\n<li><code>FilterableProductTable<\/code>\u00a0(grey) contains the entire app.<\/li>\n\n\n\n<li><code>SearchBar<\/code>\u00a0(blue) receives the user input.<\/li>\n\n\n\n<li><code>ProductTable<\/code>\u00a0(lavender) displays and filters the list according to the user input.<\/li>\n\n\n\n<li><code>ProductCategoryRow<\/code>\u00a0(green) displays a heading for each category.<\/li>\n\n\n\n<li><code>ProductRow<\/code>\u00a0(yellow) displays a row for each product.<\/li>\n<\/ol>\n\n\n\n<p>If you look at <code>ProductTable<\/code> (lavender), you\u2019ll see that the table header (containing the \u201cName\u201d and \u201cPrice\u201d labels) isn\u2019t its own component. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">This is a matter of preference\uff08\u8fd9\u662f\u4e2a\u4eba\u559c\u597d\u7684\u95ee\u9898\uff09<\/mark>, and you could go either way. For this example, it is a part of <code>ProductTable<\/code> because it appears inside the <code>ProductTable<\/code>\u2019s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own <code>ProductTableHeader<\/code> component.<\/p>\n\n\n\n<p>Now that you\u2019ve <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">identified <\/mark>the components in the mockup, <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">arrange<\/mark><\/strong> them <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">into<\/mark><\/strong> a hierarchy. Components that appear <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">within<\/mark><\/strong> another component in the mockup should appear as a child in the hierarchy:<\/p>\n\n\n\n<ul>\n<li><code>FilterableProductTable<\/code>\n<ul>\n<li><code>SearchBar<\/code><\/li>\n\n\n\n<li><code>ProductTable<\/code>\n<ul>\n<li><code>ProductCategoryRow<\/code><\/li>\n\n\n\n<li><code>ProductRow<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-build-a-static-version-in-react\">Step 2: Build a static version in React&nbsp;<a href=\"https:\/\/react.dev\/learn\/thinking-in-react#step-2-build-a-static-version-in-react\"><\/a><\/h2>\n\n\n\n<p>Now that you have your component hierarchy, it\u2019s time to <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">implement <\/mark>your app. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity\u2026 yet! It\u2019s often easier to build the static version first and add interactivity later.<\/mark>\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>\u6700\u76f4\u63a5\u7684\u529e\u6cd5\u662f\u6839\u636e\u4f60\u7684\u6570\u636e\u6a21\u578b\uff0c\u6784\u5efa\u4e00\u4e2a\u4e0d\u5e26\u4efb\u4f55\u4ea4\u4e92\u7684 UI \u6e32\u67d3\u4ee3\u7801\u7248\u672c\u2026\u7ecf\u5e38\u662f\u5148\u6784\u5efa\u4e00\u4e2a\u9759\u6001\u7248\u672c\u6bd4\u8f83\u7b80\u5355\uff0c\u7136\u540e\u518d\u4e00\u4e2a\u4e2a\u6dfb\u52a0\u4ea4\u4e92\u3002<\/strong><\/mark>\uff09 Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing.<\/p>\n\n\n\n<p>To build a static version of your app that renders your data model, you\u2019ll want to build <a href=\"https:\/\/react.dev\/learn\/your-first-component\">components<\/a> that reuse other components and pass data using <a href=\"https:\/\/react.dev\/learn\/passing-props-to-a-component\">props.<\/a> <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">Props are a way of passing data from parent to child.<\/mark><\/strong> (If you\u2019re familiar with the concept of <a href=\"https:\/\/react.dev\/learn\/state-a-components-memory\">state<\/a>, <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">don\u2019t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don\u2019t need it.<\/mark><\/strong> <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-amber-color\">\u4e0d\u8981\u5728\u8bbe\u8ba1\u9759\u6001\u9875\u9762\u65f6\u4f7f\u7528 state \uff0c\u56e0\u4e3a state \u662f\u4e3a\u4ea4\u4e92\u4fdd\u7559\u7684\u529f\u80fd\uff0c\u800c\u4ea4\u4e92\u7684\u6570\u636e\u53ef\u80fd\u4f1a\u968f\u65f6\u95f4\u53d8\u5316\u3002<\/mark><\/strong>)<\/p>\n\n\n\n<p>You can either build <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u201ctop down\u201d<\/mark><\/strong>\uff08<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u81ea\u4e0a\u800c\u4e0b<\/mark><\/strong>\uff09 by starting with building the components higher up in the hierarchy (like <code>FilterableProductTable<\/code>) or <strong>\u201cbottom up\u201d<\/strong>\uff08<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u81ea\u4e0b\u800c\u4e0a<\/mark><\/strong>\uff09 by working from components lower down (like <code>ProductRow<\/code>). <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">In simpler examples, it\u2019s usually easier to go top-down, and on larger projects, it\u2019s easier to go bottom-up<\/mark>\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u5728\u7b80\u5355\u7684\u4f8b\u5b50\u4e2d\uff0c\u81ea\u4e0a\u800c\u4e0b\u6784\u5efa\u901a\u5e38\u66f4\u7b80\u5355\uff1b\u800c\u5728\u5927\u578b\u9879\u76ee\u4e2d\uff0c\u81ea\u4e0b\u800c\u4e0a\u6784\u5efa\u66f4\u7b80\u5355\u3002<\/mark>\uff09.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ProductCategoryRow({ category }) {\n  return (\n    &lt;tr>\n      &lt;th colSpan=\"2\">\n        {category}\n      &lt;\/th>\n    &lt;\/tr>\n  );\n}\n\nfunction ProductRow({ product }) {\n  const name = product.stocked ? product.name :\n    &lt;span style={{ color: 'red' }}>\n      {product.name}\n    &lt;\/span>;\n\n  return (\n    &lt;tr>\n      &lt;td>{name}&lt;\/td>\n      &lt;td>{product.price}&lt;\/td>\n    &lt;\/tr>\n  );\n}\n\nfunction ProductTable({ products }) {\n  const rows = &#91;];\n  let lastCategory = null;\n\n  products.forEach((product) => {\n    if (product.category !== lastCategory) {\n      rows.push(\n        &lt;ProductCategoryRow\n          category={product.category}\n          key={product.category} \/>\n      );\n    }\n    rows.push(\n      &lt;ProductRow\n        product={product}\n        key={product.name} \/>\n    );\n    lastCategory = product.category;\n  });\n\n  return (\n    &lt;table>\n      &lt;thead>\n        &lt;tr>\n          &lt;th>Name&lt;\/th>\n          &lt;th>Price&lt;\/th>\n        &lt;\/tr>\n      &lt;\/thead>\n      &lt;tbody>{rows}&lt;\/tbody>\n    &lt;\/table>\n  );\n}\n\nfunction SearchBar() {\n  return (\n    &lt;form>\n      &lt;input type=\"text\" placeholder=\"Search...\" \/>\n      &lt;label>\n        &lt;input type=\"checkbox\" \/>\n        {' '}\n        Only show products in stock\n      &lt;\/label>\n    &lt;\/form>\n  );\n}\n\nfunction FilterableProductTable({ products }) {\n  return (\n    &lt;div>\n      &lt;SearchBar \/>\n      &lt;ProductTable products={products} \/>\n    &lt;\/div>\n  );\n}\n\nconst PRODUCTS = &#91;\n  {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Apple\"},\n  {category: \"Fruits\", price: \"$1\", stocked: true, name: \"Dragonfruit\"},\n  {category: \"Fruits\", price: \"$2\", stocked: false, name: \"Passionfruit\"},\n  {category: \"Vegetables\", price: \"$2\", stocked: true, name: \"Spinach\"},\n  {category: \"Vegetables\", price: \"$4\", stocked: false, name: \"Pumpkin\"},\n  {category: \"Vegetables\", price: \"$1\", stocked: true, name: \"Peas\"}\n];\n\nexport default function App() {\n  return &lt;FilterableProductTable products={PRODUCTS} \/>;\n}\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-61.png\"><img loading=\"lazy\" decoding=\"async\" width=\"518\" height=\"315\" src=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-61.png\" alt=\"\" class=\"wp-image-1220\" srcset=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-61.png 518w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-61-300x182.png 300w\" sizes=\"(max-width: 518px) 100vw, 518px\" \/><\/a><\/figure>\n\n\n\n<p>After building your components, you\u2019ll have a library of <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">reusable\uff08\u53ef\u590d\u7528\uff09<\/mark> components that render your data model. Because this is a static app, the components will only return JSX. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">The component at the top of the hierarchy (<code>FilterableProductTable<\/code>) will take your data model as a prop<\/mark>. <strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">This is called <em>one-way data flow<\/em> because the data flows down from the top-level component to the ones at the bottom of the tree.<\/mark><\/strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">\uff08\u8fd9\u88ab\u79f0\u4e4b\u4e3a <strong>\u5355\u5411\u6570\u636e\u6d41<\/strong>\uff0c\u56e0\u4e3a\u6570\u636e\u4ece\u6811\u7684\u9876\u5c42\u7ec4\u4ef6\u4f20\u9012\u5230\u4e0b\u9762\u7684\u7ec4\u4ef6\u3002\uff09<\/mark><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pitfall<\/h3>\n\n\n\n<p>At this point, you should not be using any state values. That\u2019s for the next step!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-3-find-the-minimal-but-complete-representation-of-ui-state\">Step 3: Find the minimal but complete representation of UI state\u00a0\uff08\u627e\u51fa UI \u6700\u5c0f\u529b\u5ea6\u4e14\u5b8c\u6574\u7684 state \u8868\u793a\uff09<\/h2>\n\n\n\n<p>To make the UI interactive, you need to let users change your underlying data model. You will use <em>state<\/em> for this.<\/p>\n\n\n\n<p>Think of state as the minimal set of changing data that your app needs to remember. The most important principle for structuring state is to keep it <a href=\"https:\/\/en.wikipedia.org\/wiki\/Don%27t_repeat_yourself\" target=\"_blank\" rel=\"noreferrer noopener\">DRY (Don\u2019t Repeat Yourself).<\/a> Figure out the absolute minimal representation of the state your application needs and compute everything else on-demand. For example, if you\u2019re building a shopping list, you can store the items as an array in state. If you want to also display the number of items in the list, don\u2019t store the number of items as another state value\u2014instead, read the length of your array.<\/p>\n\n\n\n<p>Now think of all of the pieces of data in this example application:<\/p>\n\n\n\n<ol>\n<li>The original list of products<\/li>\n\n\n\n<li>The search text the user has entered<\/li>\n\n\n\n<li>The value of the checkbox<\/li>\n\n\n\n<li>The filtered list of products<\/li>\n<\/ol>\n\n\n\n<p>Which of these are state? Identify the ones that are not:<\/p>\n\n\n\n<ul>\n<li>Does it\u00a0<strong>remain unchanged<\/strong>\u00a0over time? If so, it isn\u2019t state.<\/li>\n\n\n\n<li>Is it\u00a0<strong>passed in from a parent<\/strong>\u00a0via props? If so, it isn\u2019t state.<\/li>\n\n\n\n<li><strong>Can you compute it<\/strong>\u00a0based on existing state or props in your component? If so, it\u00a0<em>definitely<\/em>\u00a0isn\u2019t state!<\/li>\n<\/ul>\n\n\n\n<p>What\u2019s left is probably state.<\/p>\n\n\n\n<p>Let\u2019s go through them one by one again:<\/p>\n\n\n\n<ol>\n<li>The original list of products is\u00a0<strong>passed in as props, so it\u2019s not state.<\/strong><\/li>\n\n\n\n<li>The search text seems to be state since it changes over time and can\u2019t be computed from anything.<\/li>\n\n\n\n<li>The value of the checkbox seems to be state since it changes over time and can\u2019t be computed from anything.<\/li>\n\n\n\n<li>The filtered list of products\u00a0<strong>isn\u2019t state because it can be computed<\/strong>\u00a0by taking the original list of products and filtering it according to the search text and value of the checkbox.<\/li>\n<\/ol>\n\n\n\n<p>This means only the search text and the value of the checkbox are state! Nicely done!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Props vs State<\/h2>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>There are two types of \u201cmodel\u201d data in React: props and state. The two are very different:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/react.dev\/learn\/passing-props-to-a-component\"><strong>Props<\/strong>\u00a0are like arguments you pass<\/a>\u00a0to a function. They let a parent component pass data to a child component and customize its appearance. For example, a\u00a0<code>Form<\/code>\u00a0can pass a\u00a0<code>color<\/code>\u00a0prop to a\u00a0<code>Button<\/code>.<\/li>\n\n\n\n<li><a href=\"https:\/\/react.dev\/learn\/state-a-components-memory\"><strong>State<\/strong>\u00a0is like a component\u2019s memory.<\/a>\u00a0It lets a component keep track of some information and change it in response to interactions. For example, a\u00a0<code>Button<\/code>\u00a0might keep track of\u00a0<code>isHovered<\/code>\u00a0state.<\/li>\n<\/ul>\n\n\n\n<p>Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and <em>pass it down<\/em> to child components as their props. It\u2019s okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick!<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>React can change how you think about the designs you lo&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1019,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[56],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Thinking in React - \u7801\u5148\u751f\u7684\u535a\u5ba2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Thinking in React - \u7801\u5148\u751f\u7684\u535a\u5ba2\" \/>\n<meta property=\"og:description\" content=\"React can change how you think about the designs you lo...\" \/>\n<meta property=\"og:url\" content=\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/\" \/>\n<meta property=\"og:site_name\" content=\"\u7801\u5148\u751f\u7684\u535a\u5ba2\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-27T18:25:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-27T18:28:12+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/07\/react-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"\u7801\u5148\u751f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/mrcode2021\" \/>\n<meta name=\"twitter:site\" content=\"@mrcode2021\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u7801\u5148\u751f\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/\"},\"author\":{\"name\":\"\u7801\u5148\u751f\",\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"headline\":\"Thinking in React\",\"datePublished\":\"2024-07-27T18:25:18+00:00\",\"dateModified\":\"2024-07-27T18:28:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/\"},\"wordCount\":1156,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"keywords\":[\"react\"],\"articleSection\":[\"\u524d\u7aef\u6280\u672f\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/\",\"url\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/\",\"name\":\"Thinking in React - \u7801\u5148\u751f\u7684\u535a\u5ba2\",\"isPartOf\":{\"@id\":\"http:\/\/codermr.com\/#website\"},\"datePublished\":\"2024-07-27T18:25:18+00:00\",\"dateModified\":\"2024-07-27T18:28:12+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"http:\/\/codermr.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Thinking in React\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/codermr.com\/#website\",\"url\":\"http:\/\/codermr.com\/\",\"name\":\"\u7801\u5148\u751f\u7684\u535a\u5ba2\",\"description\":\"\u6b22 \u8fce \u4e0b \u8f7d \u6211 \u5f00 \u53d1 \u7684 \u5404 \u7aef \u8f6f \u4ef6 \u548c APP\",\"publisher\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/codermr.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\",\"name\":\"\u7801\u5148\u751f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg\",\"contentUrl\":\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg\",\"width\":400,\"height\":400,\"caption\":\"\u7801\u5148\u751f\"},\"logo\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/codermr.com\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/mrcode2021\"],\"url\":\"http:\/\/codermr.com\/index.php\/author\/coderma\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Thinking in React - \u7801\u5148\u751f\u7684\u535a\u5ba2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/","og_locale":"zh_CN","og_type":"article","og_title":"Thinking in React - \u7801\u5148\u751f\u7684\u535a\u5ba2","og_description":"React can change how you think about the designs you lo...","og_url":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/","og_site_name":"\u7801\u5148\u751f\u7684\u535a\u5ba2","article_published_time":"2024-07-27T18:25:18+00:00","article_modified_time":"2024-07-27T18:28:12+00:00","og_image":[{"width":900,"height":675,"url":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/07\/react-logo.png","type":"image\/png"}],"author":"\u7801\u5148\u751f","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/mrcode2021","twitter_site":"@mrcode2021","twitter_misc":{"\u4f5c\u8005":"\u7801\u5148\u751f","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"9 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/#article","isPartOf":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/"},"author":{"name":"\u7801\u5148\u751f","@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"headline":"Thinking in React","datePublished":"2024-07-27T18:25:18+00:00","dateModified":"2024-07-27T18:28:12+00:00","mainEntityOfPage":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/"},"wordCount":1156,"commentCount":0,"publisher":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"keywords":["react"],"articleSection":["\u524d\u7aef\u6280\u672f"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/","url":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/","name":"Thinking in React - \u7801\u5148\u751f\u7684\u535a\u5ba2","isPartOf":{"@id":"http:\/\/codermr.com\/#website"},"datePublished":"2024-07-27T18:25:18+00:00","dateModified":"2024-07-27T18:28:12+00:00","breadcrumb":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/thinking-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"http:\/\/codermr.com\/"},{"@type":"ListItem","position":2,"name":"Thinking in React"}]},{"@type":"WebSite","@id":"http:\/\/codermr.com\/#website","url":"http:\/\/codermr.com\/","name":"\u7801\u5148\u751f\u7684\u535a\u5ba2","description":"\u6b22 \u8fce \u4e0b \u8f7d \u6211 \u5f00 \u53d1 \u7684 \u5404 \u7aef \u8f6f \u4ef6 \u548c APP","publisher":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/codermr.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf","name":"\u7801\u5148\u751f","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"http:\/\/codermr.com\/#\/schema\/person\/image\/","url":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg","contentUrl":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg","width":400,"height":400,"caption":"\u7801\u5148\u751f"},"logo":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/codermr.com","https:\/\/twitter.com\/https:\/\/twitter.com\/mrcode2021"],"url":"http:\/\/codermr.com\/index.php\/author\/coderma\/"}]}},"_links":{"self":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1214"}],"collection":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/comments?post=1214"}],"version-history":[{"count":3,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1214\/revisions"}],"predecessor-version":[{"id":1221,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1214\/revisions\/1221"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/media\/1019"}],"wp:attachment":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/media?parent=1214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/categories?post=1214"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/tags?post=1214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}