- \n
- How to create and nest components<\/li>\n\n\n\n
- How to add markup and styles<\/li>\n\n\n\n
- How to display data<\/li>\n\n\n\n
- How to render conditions and lists<\/li>\n\n\n\n
- How to respond to events and update the screen<\/li>\n\n\n\n
- How to share data between components<\/li>\n<\/ul>\n\n\n\n
render \u6e32\u67d3\uff1b respond \u54cd\u5e94\uff1bmarkup \u6807\u7b7e<\/mark><\/em><\/p>\n\n\n\n
Creating and nesting components <\/a><\/h1>\n\n\n\n
\u7b2c\u4e00\u4e2a\u6982\u5ff5\uff1a\u4ec0\u4e48\u662f\u7ec4\u4ef6\uff08component\uff09\uff1f<\/h3>\n\n\n\n
React apps are made out of components<\/em>.<\/strong><\/mark> A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.<\/p>\n\n\n\n
React components are JavaScript functions that return markup\uff08React \u7ec4\u4ef6\u662f\u8fd4\u56de\u6807\u7b7e\u7684 JavaScript \u51fd\u6570<\/strong><\/mark>\uff09:<\/p>\n\n\n\n
function MyButton() {\n return (\n <button>I'm a button<\/button>\n );\n}<\/code><\/pre>\n\n\n\nNow that you\u2019ve declared
MyButton<\/code>, you can nest it into another component\uff08\u7ec4\u4ef6\u53ef\u4ee5\u5d4c\u5957<\/mark><\/strong>\uff09:<\/p>\n\n\n\nexport default function MyApp() {\n return (\n <div>\n <h1>Welcome to my app<\/h1>\n <MyButton \/>\n <\/div>\n );\n}<\/code><\/pre>\n\n\n\nNotice that
<MyButton \/><\/code> starts with a capital letter. That\u2019s how you know it\u2019s a React component. React component names must always start with a capital letter, while HTML tags must be lowercase.\uff08React \u7ec4\u4ef6\u547d\u540d\u5fc5\u987b\u7528\u5927\u5199\u5b57\u6bcd\u5f00\u5934\uff0cHTML \u6807\u7b7e\u547d\u540d\u5fc5\u987b\u7528\u5c0f\u5199\u5b57\u7b26\u5f00\u5934<\/mark><\/strong>\uff09<\/p>\n\n\n\nHave a look at the result :<\/p>\n\n\n\n
function MyButton() {\n return (\n <button>\n I'm a button\n <\/button>\n );\n}\n\nexport default function MyApp() {\n return (\n <div>\n <h1>Welcome to my app<\/h1>\n <MyButton \/>\n <\/div>\n );\n}<\/code><\/pre>\n\n\n\n![\"\"](\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-55.png\")
<\/a><\/figure>\n\n\n\nThe
export default<\/mark><\/strong><\/code> keywords specify the main component in the file\uff08export default<\/mark><\/strong><\/code> \u6307\u5b9a\u4e86\u8be5\u7ec4\u4ef6\u662f\u4e3b\u7ec4\u4ef6\uff09.<\/p>\n\n\n\nWriting markup with JSX <\/a><\/h2>\n\n\n\n
The markup syntax you\u2019ve seen above is called JSX<\/em>. It is optional, but most React projects use JSX for its convenience.\uff08\u4e0a\u9762\u4f8b\u5b50\u4e2d\u7684\u8bed\u6cd5\u53eb\u505a JSX<\/mark><\/strong>\uff09\u3002JSX is stricter than HTML. You have to close tags like
<br \/><\/code>. Your component also can\u2019t return multiple JSX tags<\/mark><\/strong>. You have to wrap them into a shared parent, like a<div>...<\/div><\/code> or an empty<>...<\/><\/code> wrapper\uff08\u91cd\u70b9\uff1a\u4e00\u4e2a\u7ec4\u4ef6\u4e0d\u80fd\u8fd4\u56de\u591a\u4e2a\u6807\u7b7e\uff0c\u5982\u679c\u8981\u8fd4\u56de\u591a\u4e2a\u6807\u7b7e\uff0c\u4f60\u53ef\u4ee5\u7528\u53e6\u5916\u4e00\u4e2a\u6807\u7b7e\u5c06\u5b83\u4eec\u5305\u8d77\u6765\uff0c\u5982\u4e0b\u6240\u793a<\/mark><\/strong>\uff09:<\/p>\n\n\n\nfunction AboutPage() {\n return (\n <>\n <h1>About<\/h1>\n <p>Hello there.<br \/>How do you do?<\/p>\n <\/>\n );\n}<\/code><\/pre>\n\n\n\n\u4e0a\u9762\u7684\u4f8b\u5b50 return \u8fd4\u56de\u7684\u662f\u4e00\u4e2a <> … <\/> \u6807\u7b7e\uff0c\u4e0d\u7528\u5927\u60ca\u5c0f\u602a\uff0c\u5982\u679c\u4f60\u4e0d\u60f3\u5728\u6807\u7b7e\u4e2d\u589e\u52a0\u4e00\u4e2a\u989d\u5916\u7684 <div>\uff0c\u53ef\u4ee5\u7528 <> \u548c <\/> \u5143\u7d20\u6765\u4ee3\u66ff\u3002<\/p>\n\n\n\n
Adding styles <\/a>\uff08\u6837\u5f0f\uff09<\/h2>\n\n\n\n
In React, you specify a CSS class with
className<\/code>. It works the same way as the HTMLclass<\/code><\/a> attribute, You can write the CSS rules for it in a separate CSS file:\uff08\u5728 React \u4e2d\u7ed9\u5143\u7d20\u6307\u5b9a\u6837\u5f0f\u4f7f\u7528 React \u7279\u5b9a\u7684\u5173\u952e\u5b57className<\/code> \uff0c\u4f60\u53ef\u4ee5\u5c06\u6837\u5f0f\u653e\u5728\u5355\u72ec\u7684\u4e00\u4e2a CSS \u6587\u4ef6\u4e2d\uff0c\u7136\u540e\u4f7f\u7528className<\/code> \u5173\u952e\u5b57\u7ed9\u67d0\u4e2a\u5143\u7d20\u6dfb\u52a0\u6837\u5f0f<\/mark><\/strong>\uff09:<\/p>\n\n\n\n\/* In your CSS *\/\n.avatar {\n border-radius: 50%;\n}\n\/* \u4f7f\u7528 className \u5173\u952e\u5b57\u7ed9\u67d0\u4e2a\u5143\u7d20\u6dfb\u52a0\u6837\u5f0f *\/<img className=\"avatar\" \/><\/code><\/pre>\n\n\n\nDisplaying data <\/a>\uff08\u663e\u793a\u6570\u636e\uff09<\/h2>\n\n\n\n
JSX lets you put markup into JavaScript. Curly braces<\/mark> let you \u201cescape back\u201d into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display
user.name<\/code> \uff08JXF \u5141\u8bb8\u4f60\u5c06\u6807\u7b7e\u653e\u5230 JavaScript \u4e2d\u3002\u800c\u5927\u62ec\u53f7\u4f1a\u8ba9\u4f60 \u201c\u56de\u5230\u201d JavaScript \u4e2d\uff0c\u8fd9\u6837\u4f60\u5c31\u53ef\u4ee5\u4ece\u4f60\u7684\u4ee3\u7801\u4e2d\u5d4c\u5165\u4e00\u4e9b\u53d8\u91cf\u5e76\u5c55\u793a\u7ed9\u7528\u6237\u3002==\u300b\u610f\u601d\u4f60\u53ef\u4ee5\u5728 JSF \u8bed\u6cd5\u4e2d\u4f7f\u7528 js\uff0c\u53ea\u9700\u8981\u7528\u5927\u62ec\u53f7\u62ec\u8d77\u6765\u3002\u5982\u4e0b {user.name} \u4f1a\u8bfb\u53d6 js \u4e2d\u7684 user \u53d8\u91cf\u4e2d\u7684 name \u5c5e\u6027\u3002<\/mark><\/strong>\uff09:<\/p>\n\n\n\nreturn (\n <h1>\n {user.name}\n <\/h1>\n);<\/code><\/pre>\n\n\n\nYou can also \u201cescape into JavaScript\u201d from JSX attributes, but you have to use curly braces instead of<\/em> quotes. For example,
className=\"avatar\"<\/code> passes the\"avatar\"<\/code> string as the CSS class, butsrc={user.imageUrl}<\/code> reads the JavaScriptuser.imageUrl<\/code> variable value, and then passes that value as thesrc<\/code> attribute\uff08\u4f60\u8fd8\u53ef\u4ee5\u5c06 JSX \u5c5e\u6027 \u201c\u8f6c\u4e49\u5230 JavaScript\u201d\uff0c\u4f46\u4f60\u5fc5\u987b\u4f7f\u7528\u5927\u62ec\u53f7 \u800c\u975e<\/strong> \u5f15\u53f7\u3002\u4f8b\u5982\uff0cclassName=\"avatar\"<\/code> \u662f\u5c06\"avatar\"<\/code> \u5b57\u7b26\u4e32\u4f20\u9012\u7ed9className<\/code>\uff0c\u4f5c\u4e3a CSS \u7684 class\u3002\u4f46src={user.imageUrl}<\/code> \u4f1a\u8bfb\u53d6 JavaScript \u7684user.imageUrl<\/code> \u53d8\u91cf\uff0c\u7136\u540e\u5c06\u8be5\u503c\u4f5c\u4e3asrc<\/code> \u5c5e\u6027\u4f20\u9012\uff1a<\/mark>\uff09:<\/p>\n\n\n\nreturn (\n <img\n className=\"avatar\"\n src={user.imageUrl}\n \/>\n);<\/code><\/pre>\n\n\n\n\u795e\u5947\u7684\u5927\u62ec\u53f7\uff08Curly brace<\/strong><\/mark>\uff09\uff1a\u4e00\u6247\u8fdb\u5165 JavaScript \u4e16\u754c\u7684\u7a97\u6237<\/strong><\/h3>\n\n\n\n
\u5927\u62ec\u53f7\u5185\u7684\u4efb\u4f55 JavaScript \u8868\u8fbe\u5f0f\u90fd\u80fd\u6b63\u5e38\u8fd0\u884c<\/mark><\/strong>\uff0c\u5305\u62ec\u50cf formatDate() \u8fd9\u6837\u7684\u51fd\u6570\u8c03\u7528\uff1a<\/p>\n\n\n\n
const today = new Date();\n\nfunction formatDate(date) {\n return new Intl.DateTimeFormat(\n 'zh-CN',\n { weekday: 'long' }\n ).format(date);\n}\n\nexport default function TodoList() {\n return (\n <h1>To Do List for {formatDate(today)}<\/h1>\n );\n}<\/code><\/pre>\n\n\n\n\u53ef\u4ee5\u5728\u54ea\u4f7f\u7528\u5927\u62ec\u53f7<\/strong>\uff1f<\/h3>\n\n\n\n
\u5728 JSX \u4e2d\uff0c\u53ea\u80fd\u5728\u4ee5\u4e0b\u4e24\u79cd\u573a\u666f\u4e2d\u4f7f\u7528\u5927\u62ec\u53f7\uff1a<\/p>\n\n\n\n
- \n
- \u7528\u4f5c JSX \u6807\u7b7e\u5185\u7684\u6587\u672c\uff1a{name}’s To Do List \u662f\u6709\u6548\u7684\uff0c\u4f46\u662f <{tag}>Gregorio Y. Zara’s To Do List \u65e0\u6548\u3002<\/li>\n\n\n\n
- \u7528\u4f5c\u7d27\u8ddf\u5728 = \u7b26\u53f7\u540e\u7684 \u5c5e\u6027\uff1asrc={avatar} \u4f1a\u8bfb\u53d6 avatar \u53d8\u91cf\uff0c\u4f46\u662f src=”{avatar}” \u53ea\u4f1a\u4f20\u4e00\u4e2a\u5b57\u7b26\u4e32 {avatar}\u3002<\/li>\n<\/ol>\n\n\n\n
\u4f7f\u7528\u53cc\u5927\u62ec\u53f7<\/h3>\n\n\n\n
\u9664\u4e86\u5b57\u7b26\u4e32\u3001\u6570\u5b57\u548c\u5176\u5b83 JavaScript \u8868\u8fbe\u5f0f\uff0c\u4f60\u751a\u81f3\u53ef\u4ee5\u5728 JSX \u4e2d\u4f20\u9012\u5bf9\u8c61\u3002\u5bf9\u8c61\u4e5f\u7528\u5927\u62ec\u53f7\u8868\u793a\uff0c\u4f8b\u5982 { name: “Hedy Lamarr”, inventions: 5 }\u3002\u56e0\u6b64\uff0c\u4e3a\u4e86\u80fd\u5728 JSX \u4e2d\u4f20\u9012\uff0c\u4f60\u5fc5\u987b\u7528\u53e6\u4e00\u5bf9\u989d\u5916\u7684\u5927\u62ec\u53f7\u5305\u88f9\u5bf9\u8c61\uff1aperson={{ name: “Hedy Lamarr”, inventions: 5 }}\u3002<\/strong><\/mark><\/p>\n\n\n\n
\u6240\u4ee5\u5f53\u4f60\u4e0b\u6b21\u5728 JSX \u4e2d\u770b\u5230 {{ \u548c }}\u65f6\uff0c\u5c31\u77e5\u9053\u5b83\u53ea\u4e0d\u8fc7\u662f\u5305\u5728\u5927\u62ec\u53f7\u91cc\u7684\u4e00\u4e2a\u5bf9\u8c61\u7f62\u4e86\uff01<\/mark><\/strong><\/p>\n\n\n\n
Example:<\/strong><\/p>\n\n\n\n
\/* \u8fd9\u662f\u4e00\u4e2a js \u53d8\u91cf\uff0c\u53ef\u4ee5\u5728 JSF \u4e2d\u901a\u8fc7\u5927\u62ec\u53f7\u5f15\u8d77 js \u53d8\u91cf\u7684\u503c *\/\nconst user = { \n name: 'Hedy Lamarr',\n imageUrl: 'https:\/\/i.imgur.com\/yXOvdOSs.jpg',\n imageSize: 90,\n};\n\nexport default function Profile() {\n return (\n <>\n <h1>{user.name}<\/h1>\n <img\n className=\"avatar\"\n src={user.imageUrl}\n alt={'Photo of ' + user.name}\n style={{\n width: user.imageSize,\n height: user.imageSize\n }}\n \/>\n <\/>\n );\n}<\/code><\/pre>\n\n\n\nConditional rendering <\/a>\uff08\u6761\u4ef6\u6e32\u67d3\uff09<\/h2>\n\n\n\n
In React, there is no special syntax for writing conditions. Instead, you\u2019ll use the same techniques as you use when writing regular JavaScript code. For example, you can use an
if<\/code><\/a> statement to conditionally include JSX\uff08React \u6ca1\u6709\u7279\u6b8a\u7684\u8bed\u6cd5\u6765\u7f16\u5199\u6761\u4ef6\u8bed\u53e5\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 JavaScript \u4e2d\u7684\u6761\u4ef6\u8bed\u53e5\u3002\u4f8b\u5982\u4f7f\u7528if<\/code><\/a> \u8bed\u53e5\u6839\u636e\u6761\u4ef6\u5f15\u5165 JSX\uff1a<\/mark>\uff09:<\/p>\n\n\n\nlet content;\nif (isLoggedIn) {\n content = <AdminPanel \/>;\n} else {\n content = <LoginForm \/>;\n}\nreturn (\n <div>\n {content}\n <\/div>\n);<\/code><\/pre>\n\n\n\n\u2588\u2588<\/mark><\/strong> \u5f3a\u70c8\u6ce8\u610f\u4e24\u70b9 \u2588\u2588\uff1a<\/mark><\/strong>
\uff081\uff09\u4e0a\u9762\u4f8b\u5b50\u4e2d\uff0c\u4f60\u7684\u6761\u4ef6\u8bed\u53e5 if … else … \u662f\u5199\u5728 return ( … ) \u5916\u9762\u7684\uff0c\u5728 return ( … ) \u91cc\u9762\u597d\u50cf\u662f\u6ca1\u6cd5\u4f7f\u7528 if … else … \u6761\u4ef6\u8bed\u53e5\u7684\u3002<\/mark><\/strong>
\uff082\uff09\u4f60\u7684 if … else … \u662f\u5728\u5199\u5728\u5927\u62ec\u53f7\u91cc\u9762\u7684\uff01\uff01\uff01<\/mark><\/strong><\/p>\n\n\n\n<\/p>\n\n\n\n
\u66f4\u591a\u6761\u4ef6\u8bed\u53e5\u5199\u6cd5\u793a\u4f8b\uff1a<\/strong><\/p>\n\n\n\n
If you prefer more compact<\/mark> code, you can use the conditional
?<\/code> operator.<\/a> Unlikeif<\/code>, it works inside JSX:<\/p>\n\n\n\n<div>\n {isLoggedIn ? (\n <AdminPanel \/>\n ) : (\n <LoginForm \/>\n )}\n<\/div><\/code><\/pre>\n\n\n\nWhen you don\u2019t need the
else<\/code> branch, you can also use a shorter logical&&<\/code> syntax<\/a>:<\/p>\n\n\n\n<div>\n {isLoggedIn && <AdminPanel \/>}\n<\/div><\/code><\/pre>\n\n\n\nRendering lists <\/a>\uff08\u6e32\u67d3\u5217\u8868\uff09<\/h2>\n\n\n\n
You will rely<\/mark> on JavaScript features like
for<\/code> loop<\/a> and the arraymap()<\/code> function<\/a> to render lists of components.<\/p>\n\n\n\nFor example, let\u2019s say you have an array of products , you can use the
map()<\/mark><\/strong><\/code> function to transform an array of products into an array of<li><\/code> items :<\/p>\n\n\n\nconst products = [\n { title: 'Cabbage', id: 1 },\n { title: 'Garlic', id: 2 },\n { title: 'Apple', id: 3 },\n];\n\nconst listItems = products.map(product =>\n <li key={product.id}>\n {product.title}\n <\/li>\n);\n\nreturn (\n <ul>{listItems}<\/ul>\n);<\/code><\/pre>\n\n\n\nNotice how
<li><\/code> has akey<\/code> attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items.(\u4e0a\u9762\u4f8b\u5b50\u4f7f\u7528 .map \u904d\u5386\u6570\u7ec4 products \u65f6\uff0c\u4f7f\u7528\u4e86\u4e2a\u53eb key \u7684\u5c5e\u6027\uff0c\u4e3a\u4ec0\u4e48\u4f1a\u6709\u8fd9\u4e2a key \u5c5e\u6027\u5462\uff1f\u662f\u4e3a\u4e86\u7528 key \u6807\u8bb0\u6570\u7ec4\u4e2d\u6bcf\u4e2a\u5143\u7d20\u7684\u552f\u4e00\u6027\uff0c\u6240\u4ee5\u4f60\u5e94\u8be5\u4f7f\u7528\u552f\u4e00\u7684\u3001\u4e0d\u4f1a\u91cd\u590d\u7684\u503c\u4f5c\u4e3a key \u7684\u503c\u3002<\/mark><\/strong>)<\/p>\n\n\n\nResponding to events <\/a>\uff08\u54cd\u5e94\u4e8b\u4ef6\uff09<\/h2>\n\n\n\n
You can respond to events by declaring event handler<\/em> functions inside your components\uff08\u4f60\u53ef\u4ee5\u901a\u8fc7\u5728\u7ec4\u4ef6\u4e2d\u58f0\u660e \u4e8b\u4ef6\u5904\u7406<\/strong> \u51fd\u6570\u6765\u54cd\u5e94\u4e8b\u4ef6<\/mark>\uff09:<\/p>\n\n\n\n
function MyButton() {\n \/* \u4e8b\u4ef6\u5904\u7406\u51fd\u6570 *\/\n function handleClick() {\n alert('You clicked me!');\n }\n\n return (\n <button onClick={handleClick}>\n Click me\n <\/button>\n );\n}<\/code><\/pre>\n\n\n\nNotice how
onClick={handleClick}<\/code> has no parentheses<\/mark><\/strong> at the end! Do not call<\/em> the event handler function: you only need to pass it down<\/em>. React will call your event handler when the user clicks the button.\uff08\u6ce8\u610f\u4e09\u70b9\uff1a\u7b2c\u4e00\uff0conClick={handleClick}<\/code> \u662f\u7528\u5927\u62ec\u53f7\u5305\u4f4f \u7684\u3002\u7b2c\u4e8c\uff0chandleClick<\/code> \u540e\u9762\u6ca1\u6709\u5c0f\u62ec\u53f7\u3002\u7b2c\u4e09\uff0c\u4f60\u4e0d\u9700\u8981\u4e3b\u52a8\u8c03\u7528\u8fd9\u4e2a\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\uff0c\u5f53\u6709\u70b9\u51fb\u4e8b\u4ef6\u65f6\uff0cReact \u4f1a\u81ea\u52a8\u8c03\u7528\u3002<\/mark><\/strong>\uff09<\/p>\n\n\n\nUpdating the screen <\/a>\uff08\u66f4\u65b0\u754c\u9762\uff09<\/h2>\n\n\n\n
Often<\/mark>\uff08\u901a\u5e38\uff09, you\u2019ll want your component to \u201cremember\u201d some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add state<\/strong><\/em> to your component.<\/p>\n\n\n\n
First, import
useState<\/code><\/a> from React:<\/p>\n\n\n\nimport { useState } from 'react';<\/code><\/pre>\n\n\n\nNow you can declare a state variable<\/em> inside your component:<\/p>\n\n\n\n
function MyButton() {\n const [count, setCount] = useState(0);\n \/\/ ...<\/code><\/pre>\n\n\n\nYou\u2019ll get two things from
useState<\/code>: the current state (count<\/code>), and the function that lets you update it (setCount<\/code>). You can give them any names, but the convention is to write[something, setSomething]<\/code>.<\/p>\n\n\n\nThe first time the button is displayed,
count<\/code> will be0<\/code> because you passed0<\/code> touseState()<\/code>. When you want to change state, callsetCount()<\/code> and pass the new value to it. Clicking this button will increment the counter:<\/p>\n\n\n\nfunction MyButton() {\n const [count, setCount] = useState(0);\n\n function handleClick() {\n setCount(count + 1);\n }\n\n return (\n <button onClick={handleClick}>\n Clicked {count} times\n <\/button>\n );\n}<\/code><\/pre>\n\n\n\n\u5982\u4e0a\uff0c
const [count, setCount] = useState(0);<\/code> \u91cc\u9762\u7684 <\/mark><\/strong>count<\/code> <\/mark>\u662f\u4e00\u4e2a\u5c5e\u6027\uff0c\u9ed8\u8ba4\u503c\u7531 <\/mark><\/strong>useState(0)<\/code><\/mark> \u5df2\u7ecf\u6307\u5b9a\u4e86\u662f 0 \uff0c\u800c <\/mark><\/strong>setCount<\/code> <\/mark>\u662f\u4e00\u4e2a\u51fd\u6570\u540d\uff0c\u5982\u679c\u9700\u8981\u66f4\u65b0 <\/mark><\/strong>count<\/code> <\/mark>\u7684\u503c\u9700\u8981\u8c03\u7528\u8fd9\u4e2a <\/mark><\/strong>setCount<\/code> <\/mark>\u51fd\u6570\u3002==\u300b\u8fd9\u79cd\u8bed\u6cd5\u548c\u5199\u6cd5\u521d\u770b\u53ef\u80fd\u89c9\u5f97\u6709\u70b9\u5947\u602a\uff0c\u6162\u6162\u9002\u5e94\u4e86\u5c31\u597d\u4e86\u3002<\/mark><\/strong><\/p>\n\n\n\n\u9700\u8981\u6ce8\u610f\uff1a<\/strong>If you render the same component multiple times, each will get its own state. Click each button separately:<\/p>\n\n\n\n
import { useState } from 'react';\n\nexport default function MyApp() {\n return (\n <div>\n <h1>Counters that update separately<\/h1>\n <MyButton \/>\n <MyButton \/>\n <\/div>\n );\n}\n\nfunction MyButton() {\n const [count, setCount] = useState(0);\n\n function handleClick() {\n setCount(count + 1);\n }\n\n return (\n <button onClick={handleClick}>\n Clicked {count} times\n <\/button>\n );\n}<\/code><\/pre>\n\n\n\nNotice how each button \u201cremembers\u201d its own
count<\/code> state and doesn\u2019t affect other buttons.<\/p>\n\n\n\n\u5982\u4e0a\uff0c<div> \u4e2d\u6709\u4e24\u4e2a <MyButton \/> \u7ec4\u4ef6\u5bf9\u8c61\uff0c\u5219\u6bcf\u4e2a\u7ec4\u4ef6\u5bf9\u8c61\u90fd\u6709\u81ea\u5df1\u7684 count \u503c\u3002<\/mark><\/strong><\/p>\n\n\n\n
Using Hooks <\/a>\uff08\u4f7f\u7528\u94a9\u5b50\uff09<\/h2>\n\n\n\n
Functions starting with
use<\/code> are called Hooks<\/em>.useState<\/code> is a built-in Hook provided by React. You can find other built-in Hooks in the API reference.<\/a> You can also write your own Hooks by combining the existing ones.\uff08