Hook \u662f React 16.8 \u7684\u65b0\u589e\u7279\u6027\u3002\u5b83\u53ef\u4ee5\u8ba9\u4f60\u5728\u4e0d\u7f16\u5199 class \u7684\u60c5\u51b5\u4e0b\u4f7f\u7528 state \u4ee5\u53ca\u5176\u4ed6\u7684 React \u7279\u6027\u3002<\/p>\n
Hook \u662f\u4e00\u4e9b\u53ef\u4ee5\u8ba9\u4f60\u5728\u51fd\u6570\u7ec4\u4ef6\u91cc\u201c\u94a9\u5165\u201d React state \u53ca\u751f\u547d\u5468\u671f\u7b49\u7279\u6027\u7684\u51fd\u6570\u3002Hook \u4e0d\u80fd\u5728 class \u7ec4\u4ef6\u4e2d\u4f7f\u7528 \u2014\u2014 \u8fd9\u4f7f\u5f97\u4f60\u4e0d\u4f7f\u7528 class \u4e5f\u80fd\u4f7f\u7528 React\u3002<\/p>\n
\u53c2\u8003\uff1ahttps:\/\/react.docschina.org\/docs\/hooks-overview.html<\/a><\/p>\n <\/p>\n React 16.8.0 \u662f\u7b2c\u4e00\u4e2a\u652f\u6301 Hook \u7684\u7248\u672c\u3002\u5347\u7ea7\u65f6\uff0c\u8bf7\u6ce8\u610f\u66f4\u65b0\u6240\u6709\u7684 package\uff0c\u5305\u62ec React DOM\u3002React Native \u4ece 0.59 \u7248\u672c\u5f00\u59cb\u652f\u6301 Hook\u3002<\/p>\n<\/blockquote>\n useState \u662f\u6211\u4eec\u8981\u5b66\u4e60\u7684\u7b2c\u4e00\u4e2a \u201cHook\u201d\uff0c\u8fd9\u4e2a\u4f8b\u5b50\u7528\u6765\u663e\u793a\u4e00\u4e2a\u8ba1\u6570\u5668\u3002\u5f53\u4f60\u70b9\u51fb\u6309\u94ae\uff0c\u8ba1\u6570\u5668\u7684\u503c\u5c31\u4f1a\u589e\u52a0\uff1a<\/p>\n \u5728\u8fd9\u91cc\uff0cuseState \u5c31\u662f\u4e00\u4e2a Hook\u3002\u901a\u8fc7\u5728\u51fd\u6570\u7ec4\u4ef6\u91cc\u8c03\u7528\u5b83\u6765\u7ed9\u7ec4\u4ef6\u6dfb\u52a0\u4e00\u4e9b\u5185\u90e8 state\u3002React \u4f1a\u5728\u91cd\u590d\u6e32\u67d3\u65f6\u4fdd\u7559\u8fd9\u4e2a state\u3002useState \u4f1a\u8fd4\u56de\u4e00\u5bf9\u503c\uff1a\u5f53\u524d\u72b6\u6001\u548c\u4e00\u4e2a\u8ba9\u4f60\u66f4\u65b0\u5b83\u7684\u51fd\u6570\uff0c\u4f60\u53ef\u4ee5\u5728\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4e2d\u6216\u5176\u4ed6\u4e00\u4e9b\u5730\u65b9\u8c03\u7528\u8fd9\u4e2a\u51fd\u6570\u3002\u5b83\u7c7b\u4f3c class \u7ec4\u4ef6\u7684 useState \u552f\u4e00\u7684\u53c2\u6570\u5c31\u662f\u521d\u59cb state\u3002\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u7684\u8ba1\u6570\u5668\u662f\u4ece\u96f6\u5f00\u59cb\u7684\uff0c\u6240\u4ee5\u521d\u59cb state \u5c31\u662f 0\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f\uff0c\u4e0d\u540c\u4e8e \u58f0\u660e\u591a\u4e2a state \u53d8\u91cf \u4f7f\u7528 State Hook: https:\/\/react.docschina.org\/docs\/hooks-state.html<\/a><\/p>\n<\/blockquote>\n \u4f60\u4e4b\u524d\u53ef\u80fd\u5df2\u7ecf\u5728 React \u7ec4\u4ef6\u4e2d\u6267\u884c\u8fc7\u6570\u636e\u83b7\u53d6\u3001\u8ba2\u9605\u6216\u8005\u624b\u52a8\u4fee\u6539\u8fc7 DOM\u3002\u6211\u4eec\u7edf\u4e00\u628a\u8fd9\u4e9b\u64cd\u4f5c\u79f0\u4e3a\u201c\u526f\u4f5c\u7528\u201d\uff0c\u6216\u8005\u7b80\u79f0\u4e3a\u201c\u4f5c\u7528\u201d\u3002<\/p>\n useEffect \u5c31\u662f\u4e00\u4e2a Effect Hook\uff0c\u7ed9\u51fd\u6570\u7ec4\u4ef6\u589e\u52a0\u4e86\u64cd\u4f5c\u526f\u4f5c\u7528\u7684\u80fd\u529b\u3002\u5b83\u8ddf class \u7ec4\u4ef6\u4e2d\u7684 \u4f8b\u5982\uff0c\u4e0b\u9762\u8fd9\u4e2a\u7ec4\u4ef6\u5728 React \u66f4\u65b0 DOM \u540e\u4f1a\u8bbe\u7f6e\u4e00\u4e2a\u9875\u9762\u6807\u9898\uff1a<\/p>\n \u5f53\u4f60\u8c03\u7528 useEffect \u65f6\uff0c\u5c31\u662f\u5728\u544a\u8bc9 React \u5728\u5b8c\u6210\u5bf9 DOM \u7684\u66f4\u6539\u540e\u8fd0\u884c\u4f60\u7684\u201c\u526f\u4f5c\u7528\u201d\u51fd\u6570\u3002\u7531\u4e8e\u526f\u4f5c\u7528\u51fd\u6570\u662f\u5728\u7ec4\u4ef6\u5185\u58f0\u660e\u7684\uff0c\u6240\u4ee5\u5b83\u4eec\u53ef\u4ee5\u8bbf\u95ee\u5230\u7ec4\u4ef6\u7684 props \u548c state\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cReact \u4f1a\u5728\u6bcf\u6b21\u6e32\u67d3\u540e\u8c03\u7528\u526f\u4f5c\u7528\u51fd\u6570 \u2014\u2014 \u5305\u62ec\u7b2c\u4e00\u6b21\u6e32\u67d3\u7684\u65f6\u5019\u3002<\/p>\n \u526f\u4f5c\u7528\u51fd\u6570\u8fd8\u53ef\u4ee5\u901a\u8fc7\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570\u6765\u6307\u5b9a\u5982\u4f55\u201c\u6e05\u9664\u201d\u526f\u4f5c\u7528\u3002\u4f8b\u5982\uff0c\u5728\u4e0b\u9762\u7684\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u526f\u4f5c\u7528\u51fd\u6570\u6765\u8ba2\u9605\u597d\u53cb\u7684\u5728\u7ebf\u72b6\u6001\uff0c\u5e76\u901a\u8fc7\u53d6\u6d88\u8ba2\u9605\u6765\u8fdb\u884c\u6e05\u9664\u64cd\u4f5c\uff1a<\/p>\n \u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0cReact \u4f1a\u5728\u7ec4\u4ef6\u9500\u6bc1\u65f6\u53d6\u6d88\u5bf9 ChatAPI \u7684\u8ba2\u9605\uff0c\u7136\u540e\u5728\u540e\u7eed\u6e32\u67d3\u65f6\u91cd\u65b0\u6267\u884c\u526f\u4f5c\u7528\u51fd\u6570\u3002<\/p>\n \u8ddf useState \u4e00\u6837\uff0c\u4f60\u53ef\u4ee5\u5728\u7ec4\u4ef6\u4e2d\u591a\u6b21\u4f7f\u7528 useEffect \uff1a<\/p>\n \u901a\u8fc7\u4f7f\u7528 Hook\uff0c\u4f60\u53ef\u4ee5\u628a\u7ec4\u4ef6\u5185\u76f8\u5173\u7684\u526f\u4f5c\u7528\u7ec4\u7ec7\u5728\u4e00\u8d77\uff08\u4f8b\u5982\u521b\u5efa\u8ba2\u9605\u53ca\u53d6\u6d88\u8ba2\u9605\uff09\uff0c\u800c\u4e0d\u8981\u628a\u5b83\u4eec\u62c6\u5206\u5230\u4e0d\u540c\u7684\u751f\u547d\u5468\u671f\u51fd\u6570\u91cc\u3002<\/p>\n \u4f7f\u7528 Effect Hook: https:\/\/react.docschina.org\/docs\/hooks-effect.html<\/a><\/p>\n<\/blockquote>\n Hook \u5c31\u662f JavaScript \u51fd\u6570\uff0c\u4f46\u662f\u4f7f\u7528\u5b83\u4eec\u4f1a\u6709\u4e24\u4e2a\u989d\u5916\u7684\u89c4\u5219\uff1a<\/p>\n \u540c\u65f6\uff0c\u6211\u4eec\u63d0\u4f9b\u4e86 linter \u63d2\u4ef6<\/a>\u6765\u81ea\u52a8\u6267\u884c\u8fd9\u4e9b\u89c4\u5219\u3002<\/p>\n Hook \u89c4\u5219: https:\/\/react.docschina.org\/docs\/hooks-rules.html<\/a><\/p>\n<\/blockquote>\n \u6709\u65f6\u5019\u6211\u4eec\u4f1a\u60f3\u8981\u5728\u7ec4\u4ef6\u4e4b\u95f4\u91cd\u7528\u4e00\u4e9b\u72b6\u6001\u903b\u8f91\u3002\u76ee\u524d\u4e3a\u6b62\uff0c\u6709\u4e24\u79cd\u4e3b\u6d41\u65b9\u6848\u6765\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\uff1a\u9ad8\u9636\u7ec4\u4ef6<\/a> \u524d\u9762\uff0c\u6211\u4eec\u4ecb\u7ecd\u4e86\u4e00\u4e2a\u53eb FriendStatus \u7684\u7ec4\u4ef6\uff0c\u5b83\u901a\u8fc7\u8c03\u7528 \u9996\u5148\uff0c\u6211\u4eec\u628a\u8fd9\u4e2a\u903b\u8f91\u62bd\u53d6\u5230\u4e00\u4e2a\u53eb\u505a \u5b83\u5c06 \u73b0\u5728\u6211\u4eec\u53ef\u4ee5\u5728\u4e24\u4e2a\u7ec4\u4ef6\u4e2d\u4f7f\u7528\u5b83\uff1a<\/p>\n \u8fd9\u4e24\u4e2a\u7ec4\u4ef6\u7684 state \u662f\u5b8c\u5168\u72ec\u7acb\u7684\u3002Hook \u662f\u4e00\u79cd\u590d\u7528\u72b6\u6001\u903b\u8f91\u7684\u65b9\u5f0f\uff0c\u5b83\u4e0d\u590d\u7528 state \u672c\u8eab\u3002\u4e8b\u5b9e\u4e0a Hook \u7684\u6bcf\u6b21\u8c03\u7528\u90fd\u6709\u4e00\u4e2a\u5b8c\u5168\u72ec\u7acb\u7684 state \u2014\u2014 \u56e0\u6b64\u53ef\u4ee5\u5728\u5355\u4e2a\u7ec4\u4ef6\u4e2d\u591a\u6b21\u8c03\u7528\u540c\u4e00\u4e2a\u81ea\u5b9a\u4e49 Hook\u3002<\/p>\n \u81ea\u5b9a\u4e49 Hook \u66f4\u50cf\u662f\u4e00\u79cd\u7ea6\u5b9a\u800c\u4e0d\u662f\u529f\u80fd\u3002\u5982\u679c\u51fd\u6570\u7684\u540d\u5b57\u4ee5 \u201cuse\u201d \u5f00\u5934\u5e76\u8c03\u7528\u5176\u4ed6 Hook\uff0c\u6211\u4eec\u5c31\u8bf4\u8fd9\u662f\u4e00\u4e2a\u81ea\u5b9a\u4e49 Hook\u3002\n
componentDIdMount<\/code>\uff0ccomponentDidUpdate<\/code>\u548ccomponentWillUnmount<\/code>\u4e09\u4e2a\u751f\u547d\u5468\u671f\u6267\u884c<\/li>\n<\/ul>\n\n
State Hook<\/h2>\n
import React, { useState } from 'react';\n\nfunction Example() {\n \/\/ \u58f0\u660e\u4e00\u4e2a\u65b0\u7684\u53eb\u505a \u201ccount\u201d \u7684 state \u53d8\u91cf\n const [count, setCount] = useState(0);\n\n return (\n <div>\n <p>You clicked {count} times<\/p>\n <button onClick={() => setCount(count + 1)}>\n Click me\n <\/button>\n <\/div>\n );\n}<\/code><\/pre>\nthis.setState<\/code>\uff0c\u4f46\u662f\u5b83\u4e0d\u4f1a\u628a\u65b0\u7684 state \u548c\u65e7\u7684 state \u8fdb\u884c\u5408\u5e76\u3002<\/p>\nthis.state<\/code>\uff0c\u8fd9\u91cc\u7684 state \u4e0d\u4e00\u5b9a\u8981\u662f\u4e00\u4e2a\u5bf9\u8c61 \u2014\u2014 \u5982\u679c\u4f60\u6709\u9700\u8981\uff0c\u5b83\u4e5f\u53ef\u4ee5\u662f\u3002\u8fd9\u4e2a\u521d\u59cb state \u53c2\u6570\u53ea\u6709\u5728\u7b2c\u4e00\u6b21\u6e32\u67d3\u65f6\u4f1a\u88ab\u7528\u5230\u3002<\/p>\n
\n\u4f60\u53ef\u4ee5\u5728\u4e00\u4e2a\u7ec4\u4ef6\u4e2d\u591a\u6b21\u4f7f\u7528 State Hook:<\/p>\nfunction ExampleWithManyStates() {\n \/\/ \u58f0\u660e\u591a\u4e2a state \u53d8\u91cf\uff01\n const [age, setAge] = useState(42);\n const [fruit, setFruit] = useState('banana');\n const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);\n \/\/ ...\n}<\/code><\/pre>\n\n
Effect Hook<\/h2>\n
componentDidMount<\/code>\u3001componentDidUpdate<\/code>\u548ccomponentWillUnmount<\/code>\u5177\u6709\u76f8\u540c\u7684\u7528\u9014\uff0c\u53ea\u4e0d\u8fc7\u88ab\u5408\u5e76\u6210\u4e86\u4e00\u4e2a API\u3002<\/p>\nimport React, { useState, useEffect } from 'react';\n\nfunction Example() {\n const [count, setCount] = useState(0);\n\n \/\/ \u76f8\u5f53\u4e8e componentDidMount \u548c componentDidUpdate:\n useEffect(() => {\n \/\/ \u4f7f\u7528\u6d4f\u89c8\u5668\u7684 API \u66f4\u65b0\u9875\u9762\u6807\u9898\n document.title = `You clicked ${count} times`;\n });\n\n return (\n <div>\n <p>You clicked {count} times<\/p>\n <button onClick={() => setCount(count + 1)}>\n Click me\n <\/button>\n <\/div>\n );\n}<\/code><\/pre>\nimport React, { useState, useEffect } from 'react';\n\nfunction FriendStatus(props) {\n const [isOnline, setIsOnline] = useState(null);\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);\n return () => {\n ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);\n };\n });\n\n if (isOnline === null) {\n return 'Loading...';\n }\n return isOnline ? 'Online' : 'Offline';\n}<\/code><\/pre>\nfunction FriendStatusWithCounter(props) {\n const [count, setCount] = useState(0);\n useEffect(() => {\n document.title = `You clicked ${count} times`;\n });\n\n const [isOnline, setIsOnline] = useState(null);\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);\n return () => {\n ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);\n };\n });\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n \/\/ ...<\/code><\/pre>\n\n
Hook \u4f7f\u7528\u89c4\u5219<\/h2>\n
\n
\n
\u81ea\u5b9a\u4e49 Hook<\/h2>\n
\n\u548c render props<\/a>\u3002\u81ea\u5b9a\u4e49 Hook \u53ef\u4ee5\u8ba9\u4f60\u5728\u4e0d\u589e\u52a0\u7ec4\u4ef6\u7684\u60c5\u51b5\u4e0b\u8fbe\u5230\u540c\u6837\u7684\u76ee\u7684\u3002<\/p>\nuseState<\/code>\u548cuseEffect<\/code>\u7684 Hook \u6765\u8ba2\u9605\u4e00\u4e2a\u597d\u53cb\u7684\u5728\u7ebf\u72b6\u6001\u3002\u5047\u8bbe\u6211\u4eec\u60f3\u5728\u53e6\u4e00\u4e2a\u7ec4\u4ef6\u91cc\u91cd\u7528\u8fd9\u4e2a\u8ba2\u9605\u903b\u8f91\u3002<\/p>\nuseFriendStatus<\/code>\u7684\u81ea\u5b9a\u4e49 Hook \u91cc\uff1a<\/p>\nimport React, { useState, useEffect } from 'react';\n\nfunction useFriendStatus(friendID) {\n const [isOnline, setIsOnline] = useState(null);\n\n function handleStatusChange(status) {\n setIsOnline(status.isOnline);\n }\n\n useEffect(() => {\n ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);\n return () => {\n ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);\n };\n });\n\n return isOnline;\n}<\/code><\/pre>\nfriendID<\/code>\u4f5c\u4e3a\u53c2\u6570\uff0c\u5e76\u8fd4\u56de\u8be5\u597d\u53cb\u662f\u5426\u5728\u7ebf\uff1a<\/p>\nfunction FriendStatus(props) {\n const isOnline = useFriendStatus(props.friend.id);\n\n if (isOnline === null) {\n return 'Loading...';\n }\n return isOnline ? 'Online' : 'Offline';\n}<\/code><\/pre>\nfunction FriendListItem(props) {\n const isOnline = useFriendStatus(props.friend.id);\n\n return (\n <li style={{ color: isOnline ? 'green' : 'black' }}>\n {props.friend.name}\n <\/li>\n );\n}<\/code><\/pre>\nuseSomething<\/code>\u7684\u547d\u540d\u7ea6\u5b9a\u53ef\u4ee5\u8ba9\u6211\u4eec\u7684 linter \u63d2\u4ef6\u5728\u4f7f\u7528 Hook \u7684\u4ee3\u7801\u4e2d\u627e\u5230 bug\u3002<\/p>\n\n