{"id":315,"date":"2025-08-04T21:58:00","date_gmt":"2025-08-04T13:58:00","guid":{"rendered":"https:\/\/mitongxue.cn\/?p=315"},"modified":"2026-06-10T22:23:03","modified_gmt":"2026-06-10T14:23:03","slug":"hooks","status":"publish","type":"post","link":"https:\/\/mitongxue.cn\/index.php\/2025\/08\/04\/hooks\/","title":{"rendered":"Hooks"},"content":{"rendered":"\n

Hooks<\/em> \u57fa\u672c\u4ecb\u7ecd<\/h2>\n\n\n\n
\n

Hook<\/em> \u662f React 16.8<\/em> \u7684\u65b0\u589e\u7279\u6027\u3002\u5b83\u53ef\u4ee5\u8ba9\u4f60\u5728\u4e0d\u7f16\u5199 class<\/em> \u7684\u60c5\u51b5\u4e0b\u4f7f\u7528 state<\/em> \u4ee5\u53ca\u5176\u4ed6\u7684 React<\/em> \u7279\u6027\u3002<\/p>\n<\/blockquote>\n\n\n\n

Hooks<\/em> \u7684\u51fa\u73b0\uff0c\u9996\u5148\u80fd\u89e3\u51b3\u5982\u4e0b\u7684\u4e00\u4e9b\u95ee\u9898\uff1a<\/p>\n\n\n\n

    \n
  • \u544a\u522b\u4ee4\u4eba\u7591\u60d1\u7684\u751f\u547d\u5468\u671f\n
      \n
    • \u4f8b\u5982\u4e0b\u9762\u7684\u4f8b\u5b50\uff0c\u76f8\u540c\u7684\u4ee3\u7801\u5728\u4e0d\u540c\u7684\u751f\u547d\u5468\u671f\u4e2d\u5b58\u5728\u4e86\u4e24\u4efd<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
      import React from \"react\";
      \u200b
      \/\/ \u7c7b\u7ec4\u4ef6
      class App extends React.Component {
      \u200b
        constructor() {
          super();
          this.state = {
            count : 0
          }
        }
      \u200b
        componentDidMount(){
          document.title = `\u4f60\u70b9\u51fb\u4e86${this.state.count}\u6b21`;
        }
      \u200b
        componentDidUpdate(){
          document.title = `\u4f60\u70b9\u51fb\u4e86${this.state.count}\u6b21`;
        }
      \u200b
        render() {
          return (
            <div>
              <p>You clicked {this.state.count} times<\/p>
              <button onClick={() => this.setState({ count: this.state.count + 1 })}>
                Click me
              <\/button>
            <\/div>
          )
        }
      }
      \u200b
      export default App;
      \u200b<\/code><\/pre>\n\n\n\n
        \n
      • \u544a\u522b\u7c7b\u7ec4\u4ef6\u4e2d\u70e6\u4eba\u7684 this<\/em>\n
          \n
        • \u5728\u7c7b\u7ec4\u4ef6\u4e2d\uff0c\u4f1a\u5b58\u5728 this<\/em> \u7684\u6307\u5411\u95ee\u9898\uff0c\u4f8b\u5982\u5728\u4e8b\u4ef6\u5904\u7406\u51fd\u6570\u4e2d\uff0c\u4e0d\u80fd\u76f4\u63a5\u901a\u8fc7 this<\/em> \u83b7\u53d6\u7ec4\u4ef6\u5b9e\u4f8b\uff0c\u9700\u8981\u4fee\u6539 this<\/em> \u6307\u5411<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • \u544a\u522b\u7e41\u91cd\u7684\u7c7b\u7ec4\u4ef6\uff0c\u56de\u5f52\u524d\u7aef\u7a0b\u5e8f\u5458\u66f4\u52a0\u719f\u6089\u7684\u51fd\u6570<\/li>\n<\/ul>\n\n\n\n
          \u53e6\u5916\uff0cHooks<\/em> \u7684\u51fa\u73b0\uff0c\u8fd8\u6709\u66f4\u52a0\u91cd\u8981\u7684\u4e00\u4e2a\u4fe1\u53f7\uff0c\u90a3\u5c31\u662f\u6574\u4e2a React<\/em> \u601d\u60f3\u4e0a\u9762\u7684\u8f6c\u53d8\uff0c\u4ece\u201c\u9762\u5411\u5bf9\u8c61\u201d\u7684\u601d\u60f3\u5f00\u59cb\u8f6c\u4e3a\u201c\u51fd\u6570\u5f0f\u7f16\u7a0b\u201d\u7684\u601d\u60f3\u3002\u8fd9\u662f\u7f16\u7a0b\u8303\u5f0f\u4e0a\u9762\u7684\u8f6c\u53d8\u3002<\/p>\n\n\n\n
          Hook<\/em> \u5c31\u662f JavaScript<\/em> \u51fd\u6570\uff0c\u4f46\u662f\u4f7f\u7528\u5b83\u4eec\u4f1a\u6709\u4e24\u4e2a\u989d\u5916\u7684\u89c4\u5219\uff1a<\/p>\n\n\n\n
            \n
          • \u53ea\u80fd\u5728\u51fd\u6570\u6700\u5916\u5c42<\/strong>\u8c03\u7528 Hook<\/em>\u3002\u4e0d\u8981\u5728\u5faa\u73af\u3001\u6761\u4ef6\u5224\u65ad\u6216\u8005\u5b50\u51fd\u6570\u4e2d\u8c03\u7528\u3002<\/li>\n\n\n\n
          • \u53ea\u80fd\u5728 React<\/em> \u7684\u51fd\u6570\u7ec4\u4ef6<\/strong>\u4e2d\u8c03\u7528 Hook<\/em>\u3002\u4e0d\u8981\u5728\u5176\u4ed6 JavaScript<\/em> \u51fd\u6570\u4e2d\u8c03\u7528\u3002<\/li>\n<\/ul>\n\n\n\n
            useState<\/em> \u548c useEffect<\/em><\/h2>\n\n\n\n
            useState<\/em> \u5305\u542b\u4ee5\u4e0b\u7684\u77e5\u8bc6\u70b9\uff1a<\/p>\n\n\n\n
              \n
            • \u57fa\u672c\u4f7f\u7528<\/li>\n<\/ul>\n\n\n\n
              import { useState } from 'react';
              \u200b
              function App(props) {
              \u200b
                let [count, setCount] = useState(0);
              \u200b
                function clickhandle(){
                  setCount(++count);
                }
              \u200b
                return (
                  <div>
                    <div>{count}<\/div>
                    <button onClick={clickhandle}>+1<\/button>
                  <\/div>
                );
              }
              \u200b
              export default App;
              \u200b<\/code><\/pre>\n\n\n\n
                \n
              • \u58f0\u660e\u591a\u4e2a state<\/em> \u72b6\u6001<\/li>\n<\/ul>\n\n\n\n
                import { useState } from 'react';
                \u200b
                function App(props) {
                \u200b
                  let [age, setAge] = useState(18);
                  const [fruit, setFruit] = useState('banana');
                  const [todos, setTodos] = useState([{ text: '\u5b66\u4e60 Hook' }]);
                \u200b
                  function clickhandle(){
                    setAge(++age);
                  }
                \u200b
                \u200b
                  return (
                    <div>
                      <div>\u5e74\u9f84\uff1a{age}<\/div>
                      <div>\u6c34\u679c\uff1a{fruit}<\/div>
                      <div>\u5f85\u529e\u4e8b\u9879\uff1a{todos[0].text}<\/div>
                      <button onClick={clickhandle}>+1<\/button>
                    <\/div>
                  );
                }
                \u200b
                export default App;<\/code><\/pre>\n\n\n\n
                useEffect<\/em> \u5305\u542b\u4ee5\u4e0b\u77e5\u8bc6\u70b9\uff1a<\/p>\n\n\n\n
                \u526f\u4f5c\u7528\u7684\u6982\u5ff5<\/p>\n\n\n\n
                  \n
                • \u7eaf\u51fd\u6570\uff1a\u4e00\u4e2a\u786e\u5207\u7684\u53c2\u6570\u5728\u4f60\u7684\u51fd\u6570\u4e2d\u8fd0\u884c\u540e\uff0c\u4e00\u5b9a\u80fd\u5f97\u5230\u4e00\u4e2a\u786e\u5207\u7684\u503c<\/li>\n\n\n\n
                • \u5982\u679c\u4e00\u4e2a\u51fd\u6570\u4e2d\uff0c\u5b58\u5728\u526f\u4f5c\u7528\uff0c\u90a3\u4e48\u6211\u4eec\u5c31\u79f0\u8be5\u51fd\u6570\u4e0d\u662f\u4e00\u4e2a\u7eaf\u51fd\u6570\uff0c\u6240\u8c13\u526f\u4f5c\u7528\uff0c\u5c31\u662f\u6307\u51fd\u6570\u7684\u7ed3\u679c\u662f\u4e0d\u53ef\u63a7\uff0c\u4e0d\u53ef\u9884\u671f\u3002<\/li>\n\n\n\n
                • \u5e38\u89c1\u7684\u526f\u4f5c\u7528\u6709\u53d1\u9001\u7f51\u7edc\u8bf7\u6c42\u3001\u6dfb\u52a0\u4e00\u4e9b\u76d1\u542c\u7684\u6ce8\u518c\u548c\u53d6\u6d88\u6ce8\u518c\uff0c\u624b\u52a8\u4fee\u6539 DOM<\/em>\uff0c\u4ee5\u524d\u6211\u4eec\u662f\u5c06\u8fd9\u4e9b\u526f\u4f5c\u7528\u5199\u5728\u751f\u547d\u5468\u671f\u94a9\u5b50\u51fd\u6570\u91cc\u9762\uff0c\u73b0\u5728\u5c31\u53ef\u4ee5\u4e66\u5199\u5728 useEffect<\/em> \u8fd9\u4e2a Hook<\/em> \u91cc\u9762<\/li>\n<\/ul>\n\n\n\n
                    \n
                  • \u57fa\u672c\u4f7f\u7528<\/li>\n<\/ul>\n\n\n\n
                    import { useState, useEffect } from 'react';
                    \u200b
                    function App() {
                    \u200b
                      let [count, setCount] = useState(0);
                    \u200b
                      useEffect(()=>{
                        \/\/ \u4e66\u5199\u4f60\u8981\u6267\u884c\u7684\u526f\u4f5c\u7528\uff0c\u4f1a\u5728\u7ec4\u4ef6\u6e32\u67d3\u5b8c\u6210\u540e\u6267\u884c
                        document.title = `\u4f60\u70b9\u51fb\u4e86${count}\u6b21`;
                      });
                    \u200b
                    \u200b
                      function clickhandle() {
                        setCount(++count);
                      }
                    \u200b
                      return (
                        <div>
                          <div>\u4f60\u70b9\u51fb\u4e86{count}\u6b21<\/div>
                          <button onClick={clickhandle}>+1<\/button>
                        <\/div>
                      );
                    }
                    \u200b
                    export default App;<\/code><\/pre>\n\n\n\n
                      \n
                    • \u6267\u884c\u6e05\u7406\u5de5\u4f5c<\/li>\n<\/ul>\n\n\n\n
                      import { useState, useEffect } from 'react';
                      \u200b
                      function App() {
                      \u200b
                        let [count, setCount] = useState(0);
                      \u200b
                        useEffect(()=>{
                          \/\/ \u4e66\u5199\u4f60\u8981\u6267\u884c\u7684\u526f\u4f5c\u7528\uff0c\u4f1a\u5728\u7ec4\u4ef6\u6e32\u67d3\u5b8c\u6210\u540e\u6267\u884c
                          const stopTimer = setInterval(()=>{
                            console.log(\"Hello\");
                          },1000)   
                      \u200b
                          \/\/ console.log(\"\u526f\u4f5c\u7528\u51fd\u6570\u6267\u884c\u4e86\");
                          \/\/ \u5728 useEffect \u4e2d\uff0c\u53ef\u4ee5\u8fd4\u56de\u4e00\u4e2a\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u6211\u4eec\u79f0\u4e4b\u4e3a\u6e05\u7406\u51fd\u6570\uff08\u4e00\u822c\u5c31\u662f\u505a\u4e00\u4e9b\u6e05\u7406\u64cd\u4f5c\uff09
                          \/\/ \u8be5\u51fd\u6570\u4f1a\u5728\u4e0b\u4e00\u6b21\u6e32\u67d3\u4e4b\u540e\uff0c\u4f46\u662f\u5728\u6267\u884c\u526f\u4f5c\u7528\u64cd\u4f5c\u4e4b\u524d\u6267\u884c
                          return ()=>{
                            \/\/ console.log(\"\u6e05\u7406\u51fd\u6570\u6267\u884c\u4e86\");
                            clearInterval(stopTimer);
                          }
                        });
                      \u200b
                      \u200b
                        function clickhandle() {
                          setCount(++count);
                        }
                      \u200b
                        return (
                          <div>
                            <div>\u4f60\u70b9\u51fb\u4e86{count}\u6b21<\/div>
                            <button onClick={clickhandle}>+1<\/button>
                          <\/div>
                        );
                      }
                      \u200b
                      export default App;<\/code><\/pre>\n\n\n\n