{"id":3340,"date":"2022-05-12T16:28:16","date_gmt":"2022-05-12T08:28:16","guid":{"rendered":"https:\/\/djblog.odjbinail.cn\/?p=3340"},"modified":"2024-10-31T15:26:23","modified_gmt":"2024-10-31T07:26:23","slug":"%e5%b7%a9%e5%9b%ba-react%e5%bc%80%e5%8f%91%e7%ae%80%e4%b9%a6%e9%a1%b9%e7%9b%ae","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=3340","title":{"rendered":"React\u5f00\u53d1\u7b80\u4e66\u9879\u76ee"},"content":{"rendered":"<h1>2.React \u521d\u6df1<\/h1>\n<h2>React \u5f00\u53d1\u73af\u5883\u51c6\u5907<\/h2>\n<ul>\n<li>\n<p><a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html\">https:\/\/reactjs.org\/docs\/create-a-new-react-app.html<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"http:\/\/nodejs.cn\/download\/\">http:\/\/nodejs.cn\/download\/<\/a><\/p>\n<\/li>\n<li>\n<p>npm install -g create-react-app<\/p>\n<\/li>\n<li>\n<p>create-react-app my-app<\/p>\n<\/li>\n<li>\n<p>cd my-app<\/p>\n<\/li>\n<li>\n<p>npm run start<\/p>\n<\/li>\n<\/ul>\n<h2>\u5de5\u7a0b\u76ee\u5f55\u6587\u4ef6\u7b80\u4ecb<\/h2>\n<ul>\n<li>App.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React,{Component} from &quot;react&quot;;\n\/\/ import {Component} from &#039;react&#039;\n\/\/ \/\/ \u7b49\u4ef7\u4e8e\n\/\/ import React from &quot;react&quot;;\n\/\/ const Component=React.Component\n\nclass App extends Component{\n  render(){\n    return(\n      &lt;div&gt;\n        hell world\n      &lt;\/div&gt;\n    )\n  }\n}\n\nexport default App;<\/code><\/pre>\n<ul>\n<li>index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React from &#039;react&#039;;\nimport ReactDOM from &#039;react-dom&#039;;\nimport App from &#039;.\/App&#039;;\n\nReactDOM.render(&lt;App \/&gt;,document.getElementById(&#039;root&#039;));<\/code><\/pre>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022050617325635.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022050617325635.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>React \u4e2d\u6700\u57fa\u7840\u7684 JSX \u8bed\u6cd5<\/h2>\n<ul>\n<li>JSX \u8bed\u6cd5\u4e2d,\u5982\u679c\u6211\u4eec\u8981\u4f7f\u7528\u81ea\u5df1\u521b\u5efa\u7684\u7ec4\u4ef6,\u7ec4\u4ef6\u5f00\u5934\u5fc5\u987b\u662f\u5927\u5199\u5f00\u5934<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>class App extends Component{\n render(){\n    \/\/JSX \u8bed\u6cd5:\u4e0d\u9700\u8981\u52a0&#039;&lt;div&gt;xx&lt;\/div&gt;&#039; \u5f15\u53f7\n    return &lt;div&gt;hello world&lt;\/div&gt;;   \n  }\n }<\/code><\/pre>\n<h1>3. React \u57fa\u7840\u7cbe\u8bb2<\/h1>\n<h2>\u4f7f\u7528 React \u7f16\u5199 TodoList \u529f\u80fd<\/h2>\n<ul>\n<li>src-TodoList.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React,{Component,Fragment} from &quot;react&quot;;\n\nclass TodoList extends Component{\n  render(){\n    return(\n      \/\/\u5728 JSX \u8bed\u6cd5\u4e2d\u8981\u6c42\u4e00\u4e2a\u7ec4\u4ef6 render \u51fd\u6570\u8fd4\u56de\u7684\u5185\u5bb9,\u5916\u5c42\u5fc5\u987b\u6709\u4e2a\u5305\u88f9\u5143\u7d20\n      \/\/\u6700\u5916\u5c42\u5fc5\u987b\u6574\u4f53\u5305\u542b\u5728\u4e00\u4e2a\u5927\u7684\u5143\u7d20\u4e2d Fragment:\u5360\u4f4d\u7b26\n      &lt;Fragment&gt;\n      &lt;div&gt;&lt;input\/&gt;&lt;button&gt;\u63d0\u4ea4&lt;\/button&gt;  &lt;\/div&gt;\n      &lt;ul&gt;\n        &lt;li&gt;\u5b66\u82f1\u8bed&lt;\/li&gt;\n        &lt;li&gt;Learn English&lt;\/li&gt;\n      &lt;\/ul&gt;\n      &lt;\/Fragment&gt;\n    )\n  }\n}\nexport default TodoList;<\/code><\/pre>\n<h2>React \u4e2d\u7684\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u601d\u60f3\u548c\u4e8b\u4ef6\u7ed1\u5b9a<\/h2>\n<ul>\n<li>src-TodoList.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React,{Component,Fragment} from &quot;react&quot;;\n\nclass TodoList extends Component{\n\n  constructor(props){\n    super(props);\n    this.state={\n      inputValue:&#039;&#039;,\n      list:[]\n    }\n  }\n\n  render(){\n    return(\n      &lt;Fragment&gt;\n      &lt;div&gt;\n        &lt;input \n          value={this.state.inputValue}\n          onChange={this.handleInputChange.bind(this)}\n        \/&gt;\n        &lt;button&gt;\u63d0\u4ea4&lt;\/button&gt;  \n      &lt;\/div&gt;\n      &lt;ul&gt;\n        &lt;li&gt;\u5b66\u82f1\u8bed&lt;\/li&gt;\n        &lt;li&gt;Learn English&lt;\/li&gt;\n      &lt;\/ul&gt;\n      &lt;\/Fragment&gt;\n    )\n  }\n  handleInputChange(e){\n    \/\/this \u6307\u5411\u6709\u95ee\u9898 undefined \u2191\u2191\u2191 .bind(this)\n    this.setState({\n      inputValue:e.target.value\n    })\n  }\n}\nexport default TodoList;<\/code><\/pre>\n<h2>\u5b9e\u73b0 TodoList \u65b0\u589e\u5220\u9664\u529f\u80fd<\/h2>\n<pre class=\"prettyprint linenums\" ><code> &lt;ul&gt;\n        {\n          this.state.list.map((item,index)=&gt;{\n            return &lt;li \n              key={index} \n              onClick={this.handleItemDelete.bind(this,index)}\n              &gt;{item}\n            &lt;\/li&gt;\n          })\n        }\n      &lt;\/ul&gt;\n=============================\n  \/\/\u65b0\u589e\n  handleBthClick(){\n    this.setState({\n      list:[...this.state.list,this.state.inputValue],\n      inputValue:&#039;&#039;\n    })\n  }\n  \/\/\u5220\u9664\n  handleItemDelete(index){\n    \/\/immutable: state \u4e0d\u5141\u8bb8\u6211\u4eec\u505a\u4efb\u4f55\u7684\u6539\u53d8\u00d7\u00d7[this.state.list.splice(index,1)]\u00d7\u00d7\n    const list=[...this.state.list];\n    list.splice(index,1);\n\n    this.setState({\n      list:list\n    })\n  }<\/code><\/pre>\n<h2>JSX \u8bed\u6cd5\u7ec6\u8282\u8865\u5145<\/h2>\n<ul>\n<li>1.\u6ce8\u91ca\u5199\u6cd5:\n<ul>\n<li>{\/<em> \u6ce8\u91ca <\/em>\/}<\/li>\n<li>\u5355\u884c\u6ce8\u91ca<br \/>\n{<br \/>\n\/\/\u6ce8\u91ca<br \/>\n}<\/li>\n<\/ul>\n<\/li>\n<li>2.\u7f16\u8bd1 html \u6807\u7b7e<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>             &lt;li \n              key={index} \n              onClick={this.handleItemDelete.bind(this,index)}\n              dangerouslySetInnerHTML={{__html:item}}\n              &gt;&lt;\/li&gt;<\/code><\/pre>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022050621332973.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022050621332973.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\u70b9\u8f93\u5165\u5185\u5bb9,,\u5149\u6807\u4f1a\u805a\u7126<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> &lt;label htmlFor=&quot;insertArea&quot;&gt;\u8f93\u5165\u5185\u5bb9&lt;\/label&gt;\n        &lt;input \n          id=&quot;insertArea&quot;\n          \/&gt;<\/code><\/pre>\n<h2>\u62c6\u5206\u7ec4\u4ef6\u4e0e\u7ec4\u4ef6\u4e4b\u95f4\u7684\u4f20\u503c<\/h2>\n<ul>\n<li>\u7236\u7ec4\u4ef6\u5411\u5b50\u7ec4\u4ef6\u4f20\u9012\u5185\u5bb9,\u901a\u8fc7\u5c5e\u6027\u6765\u4f20\u9012<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>TodoList.js\n&lt;ul&gt;\n        {\n          this.state.list.map((item,index)=&gt;{\n            return (\n            &lt;div&gt;\n              &lt;TodoItem content={item}\/&gt;\n            &lt;\/div&gt;\n            )\n          })\n        }\n      &lt;\/ul&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>TodoItem.js\nimport React,{Component} from &quot;react&quot;;\n\nclass TodoItem extends Component{\n  render(){\n    return &lt;div&gt;{this.props.content}&lt;\/div&gt;\n  }\n}\nexport default TodoItem;<\/code><\/pre>\n<ul>\n<li>\u5b50\u7ec4\u4ef6\u5982\u4f55\u5411\u7236\u7ec4\u4ef6\u4f20\u9012\u6570\u636e [\u5220\u9664]<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>TodoList.js\n &lt;TodoItem \n                content={item} \n                index={index}\n                deleteItem={this.handleItemDelete.bind(this)}\n              \/&gt;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>TodoItem.js\nimport React,{Component} from &quot;react&quot;;\n\nclass TodoItem extends Component{\n  \/\/\u7ec4\u4ef6\u521b\u5efa\u7684\u65f6\u5019,\u7b2c\u4e00\u4e2a\u6267\u884c\u7684\u6784\u9020\u51fd\u6570\n  constructor(props){\n    super(props);\n    this.handleClick=this.handleClick.bind(this);\n  }\n\n  render(){\n    return (\n    &lt;div onClick={this.handleClick}&gt;\n      {this.props.content}\n    &lt;\/div&gt;\n    )\n  }\n\n  handleClick(){\n    this.props.deleteItem(this.props.index)\n  }\n}\nexport default TodoItem;<\/code><\/pre>\n<h2>TodoList \u4ee3\u7801\u4f18\u5316<\/h2>\n<pre class=\"prettyprint linenums\" ><code>TodoItem.js\n  handleClick(){\n    const {deleteItem,index} =this.props;\n    deleteItem(index)\n    \/\/ this.props.deleteItem(this.props.index)\n  }<\/code><\/pre>\n<ul>\n<li>\u5f15\u5165\u6837\u5f0f\u5728\u7ec4\u4ef6\u540e\u9762<\/li>\n<li>this.handleBthClick=this.handleBthClick.bind(this)<\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022050623114966.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022050623114966.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\u5f02\u6b65<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> handleInputChange(e){\n    const value=e.target.value\n    this.setState(()=&gt;({\n        inputValue:value\n    }))\n  }\n\n  \/\/\u65b0\u589e\n  handleBthClick(){\n    this.setState((prevState)=&gt;({\n      list:[...prevState.list,prevState.inputValue],\n      inputValue:&#039;&#039;\n    }))\n  }\n\n   \/\/\u5220\u9664\n  handleItemDelete(index){\n    this.setState((prevState)=&gt;{\n      const list=[...prevState.list]\n      list.splice(index,1);\n      return {list}\n    });\n  }<\/code><\/pre>\n<h2>\u56f4\u7ed5 React \u884d\u751f\u51fa\u7684\u601d\u8003<\/h2>\n<ul>\n<li>\u58f0\u540d\u5f0f\u5f00\u53d1<\/li>\n<li>\u53ef\u4ee5\u4e0e\u5176\u4ed6\u6846\u67b6\u5e76\u5b58<\/li>\n<li>\u7ec4\u4ef6\u5316\u5f00\u53d1<\/li>\n<li>\u5355\u5411\u6570\u636e\u6d41<\/li>\n<li>\u89c6\u56fe\u5c42\u6846\u67b6<\/li>\n<\/ul>\n<h1>4.React \u9ad8\u7ea7\u5185\u5bb9<\/h1>\n<h2>Reactdevelopertools \u5b89\u88c5\u53ca\u4f7f\u7528<\/h2>\n<ul>\n<li>git clone -b v3 <a href=\"https:\/\/github.com\/facebook\/react-devtools\">https:\/\/github.com\/facebook\/react-devtools<\/a><\/li>\n<li>npm install<\/li>\n<li>npm run build:extension:chrome<\/li>\n<li>\u6b65\u9aa4\uff1a\u66f4\u591a\u5de5\u4f5c-&gt; \u6269\u5c55\u7a0b\u5e8f-&gt; \u5f00\u542f\u5f00\u53d1\u8005\u6a21\u5f0f-&gt; \u70b9\u51fb\u52a0\u8f7d\u5df2\u89e3\u538b\u7684\u6269\u5c55\u7a0b\u5e8f<\/li>\n<li>\u7136\u540e\u9009\u62e9\u5b58\u653e\u63d2\u4ef6\u7684\u6587\u4ef6\uff1a\u4f9d\u6b21\u9009\u62e9 react-devtools-&gt;shells-&gt;chrome-&gt;build-&gt;unpacked<\/li>\n<li>\u6ce8\uff1a\u5b89\u88c5\u63d2\u4ef6\u540e\u5237\u65b0\u9875\u9762\u56fe\u6807\u5c31\u4f1a\u6b63\u5e38\u4eae\u8d77<\/li>\n<\/ul>\n<h2>PropTypes \u4e0e DefaultProps \u7684\u5e94\u7528<\/h2>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html\">https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html<\/a><\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import PropTypes from &#039;prop-types&#039;;\n render(){\n    const {content,test} =this.props;\n    return (\n    &lt;div onClick={this.handleClick}&gt;\n      {test}-{content}\n    &lt;\/div&gt;\n    )\n  }\n\nTodoItem.propTypes={\n  test:PropTypes.string.isRequired,\n  \/\/arrayOf : \u53ef\u4ee5\u63d0\u4f9b\u4e00\u4e2a\u6216\u8005\u7684\u8bed\u6cd5\n  content:PropTypes.arrayOf(PropTypes.number,PropTypes.string),\n  deleteItem:PropTypes.func,\n  \/\/number-&gt;string : \u9650\u5236\u8981\u6c42\u7236\u7ec4\u4ef6\u7ed9\u6211\u8fd9\u4e2a\u5b50\u7ec4\u4ef6\u4f20\u503c\u7684\u65f6\u5019\u4f20\u503c\u7c7b\u578b\u662f\u4ec0\u4e48\u7c7b\u578b\u7684\n  index:PropTypes.number\n}\nTodoItem.defaultProps={\n  test:&#039;hello world&#039;\n}<\/code><\/pre>\n<h2>props\uff0cstate \u4e0e render \u51fd\u6570\u7684\u5173\u7cfb<\/h2>\n<pre class=\"prettyprint linenums\" ><code>Test.js\nimport React,{Component} from &quot;react&quot;;\n\nclass Test extends Component{\n  \/\/\u5f53\u7236\u7ec4\u4ef6\u7684 render \u51fd\u6570\u88ab\u8fd0\u884c\u65f6,\u5b83\u7684\u5b50\u7ec4\u4ef6\u7684 render \u90fd\u5c06\u88ab\u91cd\u65b0\u8fd0\u884c\u4e00\u6b21\n  render(){\n    console.log(&#039;Test render&#039;);\n    return &lt;div&gt;{this.props.content}&lt;\/div&gt;\n  }\n}\nexport default Test;\n\nTodoList.js:\n  constructor(props){\n    super(props);\n    \/\/\u5f53\u7ec4\u4ef6\u7684 state \u6216\u8005 props \u53d1\u751f\u6539\u53d8\u7684\u65f6\u5019,render \u51fd\u6570\u5c31\u4f1a\u91cd\u65b0\u6267\u884c<\/code><\/pre>\n<h2>React \u4e2d\u7684\u865a\u62df DOM<\/h2>\n<ul>\n<li>\n<p>\u4ec0\u4e48\u662f\u865a\u62df DOM?<\/p>\n<\/li>\n<li>\n<p>(1)<br \/>\n1.state \u6570\u636e<br \/>\n2.JSX \u6a21\u677f<br \/>\n3.\u6570\u636e+\u6a21\u677f \u7ed3\u5408,\u751f\u6210\u771f\u5b9e\u7684 DOM,\u6765\u663e\u793a<br \/>\n4.state \u53d1\u751f\u6539\u53d8<br \/>\n5.\u6570\u636e+\u6a21\u677f\u7ed3\u5408,\u751f\u6210\u771f\u5b9e\u7684 DOM,\u66ff\u6362\u539f\u59cb\u7684 DOM<\/p>\n<p><strong>\u7f3a\u9677:<\/strong><br \/>\n\u7b2c\u4e00\u6b21\u751f\u6210\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684 DOM \u7247\u6bb5<br \/>\n\u7b2c\u4e8c\u6b21\u751f\u6210\u4e86\u4e00\u4e2a\u5b8c\u6574\u7684 DOM \u7247\u6bb5<br \/>\n\u7b2c\u4e8c\u6b21\u7684 DOM \u66ff\u6362\u7b2c\u4e00\u6b21\u7684 DOM,\u975e\u5e38\u8017\u6027\u80fd<\/p>\n<\/li>\n<li>\n<p>(2)<br \/>\n1.state \u6570\u636e<br \/>\n2.JSX \u6a21\u677f<br \/>\n3.\u6570\u636e+\u6a21\u677f \u7ed3\u5408,\u751f\u6210\u771f\u5b9e\u7684 DOM,\u6765\u663e\u793a<br \/>\n4.state \u53d1\u751f\u6539\u53d8<br \/>\n5.\u6570\u636e+\u6a21\u677f\u7ed3\u5408,\u751f\u6210\u771f\u5b9e\u7684 DOM,\u5e76\u4e0d\u76f4\u63a5\u66ff\u6362\u539f\u59cb\u7684 DOM<br \/>\n6.\u65b0\u7684 DOM (DocumentFragment) \u548c\u539f\u59cb\u7684 DOM \u505a\u6bd4\u5bf9,\u627e\u5dee\u5f02<br \/>\n7.\u627e\u51fa input \u6846\u53d1\u751f\u4e86\u53d8\u5316<br \/>\n8.\u53ea\u7528\u65b0\u7684 DOM \u4e2d\u7684 input \u5143\u7d20,\u66ff\u6362\u6389\u8001\u7684 DOM \u4e2d\u7684 input \u5143\u7d20<br \/>\n<strong>\u7f3a\u9677:<\/strong><br \/>\n\u6027\u80fd\u7684\u63d0\u793a\u5e76\u4e0d\u660e\u663e<\/p>\n<\/li>\n<li>\n<p>(3)<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>1.state \u6570\u636e\n2.JSX \u6a21\u677f\n\n3.\u6570\u636e+\u6a21\u677f \u751f\u6210\u865a\u62df DOM (\u865a\u62df DOM \u5c31\u662f\u4e00\u4e2a JS \u5bf9\u8c61,\u7528\u5b83\u6765\u63cf\u8ff0\u771f\u5b9e DOM) (\u635f\u8017\u4e86\u6027\u80fd)\n    [&#039;div&#039; , {id: &#039;abc&#039; }, [&#039;span &#039; , { }, &#039;hello world&#039;]]\n\n4. \u7528\u865a\u62df DOM \u7684\u7ed3\u6784\u751f\u6210\u771f\u5b9e\u7684 DOM,\u6765\u663e\u793a\n    &lt;div id=&#039;abc&#039;&gt;&lt;span&gt;hello world&lt;\/span&gt;\/div&gt;\n\n5.state \u53d1\u751f\u53d8\u5316\n\n6.\u6570\u636e + \u6a21\u677f \u751f\u6210\u65b0\u7684\u865a\u62df DOM (\u6781\u5927\u7684\u63d0\u5347\u4e86\u6027\u80fd)\n    [&#039;div&#039; , {id: &#039;abc&#039; }, [&#039;span&#039; , { }, &#039;bye bye&#039;]]\n\n7. \u6bd4\u8f83\u539f\u59cb\u865a\u62df DOM \u548c\u65b0\u7684\u865a\u62df DOM \u7684\u533a\u522b,\u627e\u5230\u533a\u522b\u662f span \u4e2d\u5185\u5bb9 (\u6781\u5927\u7684\u63d0\u5347\u4e86\u6027\u80fd)\n\n8.\u76f4\u63a5\u64cd\u4f5c DOM, \u6539\u53d8 span \u4e2d\u7684\u5185\u5bb9<\/code><\/pre>\n<ul>\n<li>\u9762\u8bd5,\u865a\u62df DOM \u662f\u4ec0\u4e48<br \/>\n\u672c\u8d28\u4e0a\u5c31\u662f JS \u5bf9\u8c61,\u4e4b\u6240\u4ee5\u80fd\u63d0\u9ad8\u6027\u80fd\u672c\u8d28\u4e0a\u662f\u4e1a\u52a1\u4ec0\u4e48\u5462? js \u5bf9\u8c61\u4e0d\u600e\u4e48\u8017\u6027\u80fd,\u6bd4\u8f83\u771f\u5b9e\u7684 DOM \u4f1a\u5f88\u8017\u6027\u80fd<\/li>\n<\/ul>\n<h2>\u6df1\u5165\u4e86\u89e3\u865a\u62df DOM<\/h2>\n<p>\u4f18\u70b9:<br \/>\n1.\u6027\u80fd\u63d0\u5347\u4e86<br \/>\n2.\u5b83\u4f7f\u5f97\u8de8\u7aef\u5e94\u7528\u5f97\u4ee5\u5b9e\u73b0  React Native<\/p>\n<h2>\u865a\u62df DOM \u4e2d\u7684 Diff \u7b97\u6cd5<\/h2>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/202205091303181.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/202205091303181.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>setState \u662f\u5f02\u6b65\u7684, \u672c\u8d28\u4e0a\u662f \u63d0\u5347 react \u5e95\u5c42\u7684\u6027\u80fd<\/li>\n<li>Diff \u7b97\u6cd5 : <\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022050913075542.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022050913075542.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\u7b97\u6cd5\u7b80\u5355\u6240\u5e26\u6765\u7684\u597d\u5904 : \u6bd4\u5bf9\u901f\u5ea6\u975e\u5e38\u5feb,\u53ef\u80fd\u4f1a\u9020\u6210 dom \u91cd\u65b0\u6e32\u67d3\u7684\u6d6a\u8d39,\u5927\u5927\u7684\u51cf\u5c11\u4e24\u4e2a\u865a\u62df dom \u4e4b\u95f4\u6bd4\u5bf9\u7684\u7b97\u6cd5\u4e0a\u7684\u6027\u80fd\u6d88\u8017,\u6240\u4ee5<strong>react<\/strong>\u91c7\u7528\u4e86\u4e00\u4e2a<strong>\u540c\u5c42\u7684\u865a\u62df dom \u7684\u6bd4\u5bf9<\/strong>\u7b97\u6cd5<\/li>\n<\/ul>\n<h2>React \u4e2d ref \u7684\u4f7f\u7528<\/h2>\n<ul>\n<li>\u5c3d\u91cf\u4e0d\u8981\u64cd\u4f5c DOM<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> render(){\n    return(\n      &lt;Fragment&gt;\n      &lt;div&gt;\n        &lt;label htmlFor=&quot;insertArea&quot;&gt;\u8f93\u5165\u5185\u5bb9&lt;\/label&gt;\n        &lt;input \n          id=&quot;insertArea&quot;\n          className=&quot;input&quot;\n          value={this.state.inputValue}\n          onChange={this.handleInputChange}\n          ref={(input)=&gt;{this.input=input}}\n        \/&gt;\n        &lt;button onClick={this.handleBthClick}&gt;\u63d0\u4ea4&lt;\/button&gt;  \n      &lt;\/div&gt;\n      &lt;ul ref={(ul)=&gt;{this.ul=ul}}&gt;\n        {this.getTodoItem()}\n      &lt;\/ul&gt;\n      &lt;\/Fragment&gt;\n    )\n  }\n\n   \/\/ \u83b7\u53d6 inputvalue \u503c\n  handleInputChange(){\n    const value=this.input.value\n    this.setState(()=&gt;({\n        inputValue:value\n    }));\n  }\n\n  \/\/\u65b0\u589e\n  handleBthClick(){\n    \/\/setState : \u5f02\u6b65\u51fd\u6570,\u4e0d\u4f1a\u7acb\u5373\u88ab\u6267\u884c\n    this.setState((prevState)=&gt;({\n      list:[...prevState.list,prevState.inputValue],\n      inputValue:&#039;&#039;\n    }));\n    \/\/console.log \u6bd4 setState \u5e95\u5c42\u8fd0\u884c\u4e4b\u524d\u5148\u6267\u884c\n    console.log(this.ul.querySelectorAll(&#039;div&#039;).length)\n  }<\/code><\/pre>\n<ul>\n<li>\u6709\u65f6\u5019\u5982\u679c setState \u662f\u4e00\u4e2a\u5f02\u6b65\u51fd\u6570,\u5c31\u6ca1\u529e\u6cd5\u6b63\u786e\u8f93\u51fa\u6570\u636e\u53d8\u66f4\u540e\u9875\u9762 DOM \u7684\u60c5\u51b5,,[\u5c31\u4e0d\u592a\u5408\u7406]<\/li>\n<li>\u4e00\u65e6\u4f60\u5e0c\u671b setState \u6267\u884c\u6210\u529f\u540e,\u9875\u9762\u66f4\u65b0\u4e4b\u540e\u53bb\u83b7\u53d6\u9875\u9762\u7684 DOM,,\u6b63\u786e\u7684\u505a\u6cd5\u662f : <\/li>\n<li>\u5f53\u51fd\u6570\u6267\u884c\u7684\u65f6\u5019,\u9875\u9762\u5df2\u7ecf\u88ab\u5b8c\u6574\u7684\u66f4\u65b0\u5b8c\u4e86,,\u83b7\u53d6\u9875\u9762\u7684 DOM,\u662f\u6ca1\u9519\u7684<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  \/\/\u65b0\u589e\n  handleBthClick(){\n    \/\/setState : \u5f02\u6b65\u51fd\u6570,\u4e0d\u4f1a\u7acb\u5373\u88ab\u6267\u884c\n    this.setState((prevState)=&gt;({\n      list:[...prevState.list,prevState.inputValue],\n      inputValue:&#039;&#039;\n    }),()=&gt;{\n      console.log(this.ul.querySelectorAll(&#039;div&#039;).length)\n    });\n  }<\/code><\/pre>\n<ul>\n<li>ref : \u5e2e\u52a9\u6211\u4eec\u5728 react \u76f4\u63a5\u83b7\u53d6 DOM \u5143\u7d20\u7684\u65f6\u5019\u6765\u4f7f\u7528\u7684,,\u4e00\u822c\u60c5\u51b5\u4e0b,\u5c3d\u91cf\u4e0d\u8981\u7528 ref, \u6709\u7684\u65f6\u5019\u5728\u505a\u673a\u5668\u590d\u6742\u7684\u4e1a\u52a1,\u6bd4\u5982\u8bf4\u4e00\u4e9b\u52a8\u753b\u7684\u65f6\u5019,\u4e0d\u53ef\u907f\u514d\u8fd8\u662f\u8981\u7528\u5230 ref \u4e2d\u7684 DOM \u6807\u7b7e,,\u7528 ref \u6765\u83b7\u53d6<\/li>\n<\/ul>\n<h2>React \u7684\u751f\u547d\u5468\u671f\u51fd\u6570<\/h2>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051214010930.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051214010930.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\u751f\u547d\u5468\u671f\u51fd\u6570\u6307\u5728\u67d0\u4e00\u4e2a\u65f6\u523b\u7ec4\u4ef6\u4f1a\u81ea\u52a8\u8c03\u7528\u6267\u884c\u7684\u51fd\u6570<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u5728\u7ec4\u4ef6\u5373\u5c06\u88ab\u6302\u8f7d\u5230\u9875\u9762\u7684\u65f6\u5019\u81ea\u52a8\u6267\u884c\n  componentWillMount(){\n    console.log(&#039;componentWillMount&#039;);\n  }\n\n  render(){}\n\n \/\/\u7ec4\u4ef6\u88ab\u6302\u8f7d\u5230\u9875\u9762\u4e4b\u540e,\u81ea\u52a8\u88ab\u6267\u884c\n  componentDidMount(){\n    console.log(&#039;componentDidMount&#039;);\n  }\n\n\/\/\u7ec4\u4ef6\u88ab\u66f4\u65b0\u4e4b\u524d,\u4ed6\u4f1a\u81ea\u52a8\u88ab\u6267\u884c\n  shouldComponentUpdate(){\n    console.log(&#039;shouldComponentUpdate&#039;);\n    return true\n  }\n\n \/\/\u7ec4\u4ef6\u88ab\u66f4\u65b0\u4e4b\u524d,\u4ed6\u4f1a\u81ea\u52a8\u88ab\u6267\u884c,\u4f46\u662f\u4ed6\u5728 shouldComponentUpdate \u4e4b\u540e\u88ab\u6267\u884c\n  \/\/\u5982\u679c shouldComponentUpdate \u8fd4\u56de true,\u5b83\u624d\u6267\u884c;\u8fd4\u56de false,\u8fd9\u4e2a\u51fd\u6570\u5c31\u4e0d\u4f1a\u88ab\u6267\u884c\u4e86\n  componentWillUpdate(){\n    console.log(&#039;componentWillUpdate&#039;);\n  }\n\n  \/\/\u7ec4\u4ef6\u66f4\u65b0\u5b8c\u6210\u4e4b\u540e,\u5b83\u4f1a\u88ab\u6267\u884c\n  componentDidUpdate(){\n    console.log(&#039;componentDidUpdate&#039;);\n  }<\/code><\/pre>\n<ul>\n<li>TodoItem.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> \/\/ \u4e00\u4e2a\u7ec4\u4ef6\u8981\u4ece\u7236\u7ec4\u4ef6\u63a5\u53d7\u53c2\u6570\n  \/\/ \u5982\u679c\u8fd9\u4e2a\u7ec4\u4ef6\u7b2c\u4e00\u6b21\u5b58\u5728\u4e8e\u7236\u7ec4\u4ef6\u4e2d,\u4e0d\u4f1a\u6267\u884c\n  \/\/ \u5982\u679c\u8fd9\u4e2a\u7ec4\u4ef6\u4e4b\u524d\u5df2\u7ecf\u5b58\u5728\u4e8e\u7236\u7ec4\u4ef6\u4e2d,\u624d\u4f1a\u6267\u884c\n  componentWillReceiveProps(){\n    console.log(&#039;child componentWillReceiveProps&#039;);\n  }\n\n  \/\/ \u5f53\u8fd9\u4e2a\u7ec4\u4ef6\u5373\u5c06\u88ab\u4ece\u9875\u9762\u4e2d\u5254\u9664\u7684\u65f6\u5019,\u4f1a\u88ab\u6267\u884c\n  componentWillUnmount(){\n    console.log(&#039;child componentWillUnmount&#039;);\n  }<\/code><\/pre>\n<h2>React \u751f\u547d\u5468\u671f\u51fd\u6570\u7684\u4f7f\u7528\u573a\u666f<\/h2>\n<ul>\n<li>\u964d\u4f4e\u6027\u80fd:\n<ul>\n<li>this.handleClick=this.handleClick.bind(this);<\/li>\n<li>react \u7684\u5e95\u5c42 setState \u662f\u4e00\u4e2a\u5f02\u6b65\u51fd\u6570, \u53ef\u4ee5\u628a\u591a\u6b21\u6570\u636e\u6539\u53d8,\u7ed3\u5408\u6210\u4e00\u6b21\u6765\u505a,,\u964d\u4f4e\u865a\u62df DOM \u7684\u6bd4\u5bf9\u9891\u7387<\/li>\n<li>\u53ef\u4ee5\u907f\u514d\u65e0\u8c13\u7684\u7ec4\u4ef6\u7684 render \u51fd\u6570\u7684\u8fd0\u884c<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>TodoItem.js shouldComponentUpdate(nextProps,nextState){\n    if(nextProps.content!==this.props.content){\n      return true;\n    }else{\n      return false;\n    }\n  }<\/code><\/pre>\n<ul>\n<li>npm i axios <\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>TodoList.js\nimport axios from &quot;axios&quot;;\nrender(){}\n   \/\/\u53ea\u6267\u884c\u4e00\u6b21: \u5728\u7ec4\u4ef6\u88ab\u6302\u8f7d\u5230\u9875\u9762\u7684\u65f6\u5019,\u4f1a\u88ab\u6267\u884c\u4e00\u6b21,\u4e4b\u540e\u5c31\u4e0d\u4f1a\u88ab\u91cd\u65b0\u91cd\u590d\u6267\u884c\u4e86\n  \/\/ \u5c06 ajax \u8bf7\u6c42 \u5c31\u653e\u5230\u8fd9\u91cc,\u6c38\u8fdc\u4e0d\u4f1a\u6709\u95ee\u9898\n componentDidMount(){\n    axios.get(&#039;\/api\/todolist&#039;)\n    .then(()=&gt;{\n      alert(&#039;succ&#039;)\n    }).catch(()=&gt;{\n      alert(&#039;error&#039;)\n    })\n  }<\/code><\/pre>\n<h2>\u4f7f\u7528 Charles \u8fdb\u884c\u63a5\u53e3\u6570\u636e\u6a21\u62df<\/h2>\n<ul>\n<li>\u4e0b\u8f7d Charles :  <a href=\"https:\/\/www.charlesproxy.com\/download\">https:\/\/www.charlesproxy.com\/download<\/a><\/li>\n<li>localhost - &gt;  localhost.charlesproxy.com<\/li>\n<li>Tools -&gt; Map Local Settings -&gt; add \u5730\u5740<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>TodoList.js\n componentDidMount(){\n    axios.get(&#039;\/api\/todolist&#039;)\n    .then((res)=&gt;{\n     this.setState(()=&gt;({\n       list:[...res.data]\n     }))\n    }).catch(()=&gt;{\n      alert(&#039;error&#039;)\n    })\n  }<\/code><\/pre>\n<h2>React \u7684 CSS \u8fc7\u6e21\u52a8\u753b<\/h2>\n<pre class=\"prettyprint linenums\" ><code>App.js\nimport React, { Component, Fragment } from &quot;react&quot;;\nimport &#039;.\/style.css&#039;;\n\nclass App extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      show: true\n    }\n    this.handleToggole = this.handleToggole.bind(this)\n  }\n\n  render () {\n    return (\n      &lt;Fragment&gt;\n        &lt;div className={this.state.show ? &#039;show&#039; : &#039;hide&#039;}&gt;hello&lt;\/div&gt;\n        &lt;button onClick={this.handleToggole}&gt;toggole&lt;\/button&gt;\n      &lt;\/Fragment&gt;\n    )\n  }\n\n  handleToggole () {\n    this.setState({\n      show: this.state.show ? false : true\n    })\n  }\n}\nexport default App;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>style.css\n .show {\n   opacity: 1;\n   transition: all 1s ease-in;\n }\n\n .hide {\n   opacity: 0;\n   transition: all 1s ease-in;\n }<\/code><\/pre>\n<h2>React \u4e2d\u4f7f\u7528 CSS \u52a8\u753b\u6548\u679c<\/h2>\n<pre class=\"prettyprint linenums\" ><code> .hide {\n  \/* forwards : \u52a8\u753b\u7ed3\u675f\u4e4b\u540e,\u4fdd\u5b58\u52a8\u753b\u6700\u540e\u4e00\u5e27\u7684 CSS \u6837\u5f0f *\/\n   animation: hide-item 2s ease-in forwards;\n }\n\n @keyframes hide-item {\n   0% {\n     opacity: 1;\n     color: red;\n   }\n\n   50% {\n     opacity: 0.5;\n     color: green;\n   }\n\n   100% {\n     opacity: 0;\n     color: blue;\n   }\n }<\/code><\/pre>\n<ul>\n<li>\u6e10\u53d8\u52a8\u753b<\/li>\n<\/ul>\n<h2>\u4f7f\u7528 react-transition-group \u5b9e\u73b0\u52a8\u753b(1)<\/h2>\n<ul>\n<li>\n<p><a href=\"https:\/\/reactcommunity.org\/react-transition-group\/css-transition\">https:\/\/reactcommunity.org\/react-transition-group\/css-transition<\/a><\/p>\n<\/li>\n<li>\n<p>App.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component, Fragment } from &quot;react&quot;;\nimport { CSSTransition } from &#039;react-transition-group&#039;;\nimport &#039;.\/style.css&#039;;\n\nclass App extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      show: true\n    }\n    this.handleToggole = this.handleToggole.bind(this)\n  }\n\n  render () {\n    return (\n      &lt;Fragment&gt;\n        &lt;CSSTransition\n          in={this.state.show}\n          timeout={1000}\n          classNames=&#039;fade&#039;\n          unmountOnExit\n          onEntered={(el)=&gt;{el.style.color=&#039;blue&#039;}}\n          appear={true}\n        &gt;\n          &lt;div&gt;hello&lt;\/div&gt;\n        &lt;\/CSSTransition&gt;\n        &lt;button onClick={this.handleToggole}&gt;toggole&lt;\/button&gt;\n      &lt;\/Fragment&gt;\n    )\n  }\n\n  handleToggole () {\n    this.setState({\n      show: this.state.show ? false : true\n    })\n  }\n}\nexport default App;<\/code><\/pre>\n<ul>\n<li>style.css<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>.fade-enter , .fade-appear{\n  opacity: 0;\n}\n\n.fade-enter-active, .fade-appear-active {\n  opacity: 1;\n  transition: opacity 1s ease-in;\n}\n\n.fade-enter-done {\n  opacity: 1;\n}\n\n.fade-exit {\n  opacity: 1;\n}\n\n.fade-exit-active {\n  opacity: 0;\n  transition: opacity 1s ease-in;\n}\n\n.fade-exit-done {\n  opacity: 0;\n}<\/code><\/pre>\n<h2>\u4f7f\u7528 react-transition-group \u7684\u4f7f\u7528(2)<\/h2>\n<ul>\n<li>\u591a\u4e2a dom \u5143\u7d20\u7684\u52a8\u753b<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component, Fragment } from &quot;react&quot;;\nimport { CSSTransition, TransitionGroup } from &#039;react-transition-group&#039;;\nimport &#039;.\/style.css&#039;;\n\nclass App extends Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      list: []\n    }\n    this.handleAddItem = this.handleAddItem.bind(this)\n  }\n\n  render () {\n    return (\n      &lt;Fragment&gt;\n        &lt;TransitionGroup&gt;\n          {\n\n            this.state.list.map((item, index) =&gt; {\n              return (\n                &lt;CSSTransition\n                  timeout={1000}\n                  classNames=&#039;fade&#039;\n                  unmountOnExit\n                  onEntered={(el) =&gt; { el.style.color = &#039;blue&#039; }}\n                  appear={true}\n                  key={index}\n                &gt;\n                  &lt;div&gt;{item}&lt;\/div&gt;\n                &lt;\/CSSTransition&gt;\n              )\n            })\n          }\n        &lt;\/TransitionGroup&gt;\n        &lt;button onClick={this.handleAddItem}&gt;toggole&lt;\/button&gt;\n      &lt;\/Fragment&gt;\n    )\n  }\n\n  handleAddItem () {\n    this.setState((prevState) =&gt; {\n      return {\n        list: [...prevState.list, &#039;item&#039;]\n      }\n    })\n  }\n}\nexport default App;<\/code><\/pre>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051321435770.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051321435770.png\" alt=\"\" \/><\/p><\/noscript>\n<h1>5.Redux \u5165\u95e8<\/h1>\n<h2>Redux \u6982\u5ff5\u7b80\u8ff0<\/h2>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051321481167.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051321481167.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>Redux = Reducer + Flux<\/li>\n<\/ul>\n<h2>Redux \u7684\u5de5\u4f5c\u6d41\u7a0b<\/h2>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051511253377.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051511253377.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u4f7f\u7528 Antd \u5b9e\u73b0 TodoList \u9875\u9762\u5e03\u5c40<\/h2>\n<ul>\n<li><a href=\"https:\/\/ant.design\/docs\/react\/introduce-cn\">https:\/\/ant.design\/docs\/react\/introduce-cn<\/a><\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component } from &#039;react&#039;;\nimport &#039;antd\/dist\/antd.css&#039;;\nimport { Input, Button,List } from &#039;antd&#039;;\n\nconst data = [\n  &#039;Racing car sprays burning fuel into crowd.&#039;,\n  &#039;Japanese princess to wed commoner.&#039;,\n  &#039;Australian walks 100km after outback crash.&#039;,\n  &#039;Man charged over missing wedding girl.&#039;,\n  &#039;Los Angeles battles huge wildfires.&#039;,\n];\n\nclass TodoList extends Component {\n  render () {\n    return (\n      &lt;div style={{marginTop:&#039;10px&#039;,marginLeft:&#039;10px&#039;}}&gt;\n        &lt;div&gt;\n          &lt;Input placeholder=&#039;todo info&#039; style={{width:&#039;300px&#039;,marginRight:&#039;10px&#039;}}\/&gt;\n          &lt;Button type=&quot;primary&quot;&gt;\u63d0\u4ea4&lt;\/Button&gt;\n        &lt;\/div&gt;\n        &lt;List\n          style={{marginTop:&#039;10px&#039;,width:&#039;300px&#039;}}\n          bordered\n          dataSource={data}\n          renderItem={item =&gt; &lt;List.Item&gt;{item}&lt;\/List.Item&gt;}\n        \/&gt;\n      &lt;\/div&gt;\n    )\n  }\n}\n\nexport default TodoList;<\/code><\/pre>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051520151641.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051520151641.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>5-4 \u521b\u5efa redux \u4e2d\u7684 store_x264<\/h2>\n<ul>\n<li>\n<p>npm i redux<\/p>\n<\/li>\n<li>\n<p>src -&gt; store -&gt; index.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import { createStore } from &quot;redux&quot;;\n\/\/ \u7b14\u8bb0\u672c \u4f20\u7ed9 store \u7ba1\u7406\u5458\nimport reducer from &quot;.\/reducer&quot;;\n\nconst store=createStore(reducer);\nexport default store;<\/code><\/pre>\n<ul>\n<li>src -&gt; store -&gt; reducer.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const defaultState={\n  inputValue:&#039;&#039;,\n  list:[]\n}\n\/\/ reducer \u662f\u7b14\u8bb0\u672c\n\/\/ state:\u5b58\u653e\u7684\u662f\u6574\u4e2a\u56fe\u4e66\u9986\u6240\u6709\u4e66\u7c4d\u7684\u4fe1\u606f\n\/\/ eslint-disable-next-line import\/no-anonymous-default-export\nexport default (state = defaultState,action)=&gt;{\n  return state;\n}<\/code><\/pre>\n<ul>\n<li>TodoList.js<\/li>\n<\/ul>\n<p>\u62a5\u9519<br \/>\nFailed to parse source map: 'webpack:\/\/antd\/.\/components\/time-picker\/style\/i<br \/>\nimport 'antd\/dist\/antd.css'; -&gt; import 'antd\/dist\/antd.min.css';<\/p>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component } from &#039;react&#039;;\nimport &#039;antd\/dist\/antd.css&#039;;\nimport { Input, Button,List } from &#039;antd&#039;;\n\/\/ \u7ec4\u4ef6\u7684\u6570\u636e\u4ece store \u4e2d\u53d6\nimport store from &#039;.\/store\/index&#039;;\n\nclass TodoList extends Component {\n\n  constructor(props){\n    super(props);\n    this.state=store.getState();\n  }\n\n  render () {\n    return (\n      &lt;div style={{marginTop:&#039;10px&#039;,marginLeft:&#039;10px&#039;}}&gt;\n        &lt;div&gt;\n          &lt;Input value={this.state.inputValue} placeholder=&#039;todo info&#039; style={{width:&#039;300px&#039;,marginRight:&#039;10px&#039;}}\/&gt;\n          &lt;Button type=&quot;primary&quot;&gt;\u63d0\u4ea4&lt;\/Button&gt;\n        &lt;\/div&gt;\n        &lt;List\n          style={{marginTop:&#039;10px&#039;,width:&#039;300px&#039;}}\n          bordered\n          dataSource={this.state.list}\n          renderItem={item =&gt; &lt;List.Item&gt;{item}&lt;\/List.Item&gt;}\n        \/&gt;\n      &lt;\/div&gt;\n    )\n  }\n}\n\nexport default TodoList;<\/code><\/pre>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051521031892.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022051521031892.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>5-5Action \u548c Reducer \u7684\u7f16\u5199<\/h2>\n<ul>\n<li>\n<p>redux devtools \u65e0\u6cd5\u8fdb\u884c\u8c03\u8bd5,\u52a0\u8f7d\u51fa\u6570\u636e<br \/>\n\u89e3\u51b3: <a href=\"https:\/\/blog.csdn.net\/qq_42419603\/article\/details\/120907216\">https:\/\/blog.csdn.net\/qq_42419603\/article\/details\/120907216<\/a><\/p>\n<\/li>\n<li>\n<p>\u62a5\u9519 :<br \/>\nreact-dom.development.js:86 Warning: ReactDOM.render is no longer supported<\/p>\n<ul>\n<li>\u89e3\u51b3\u65b9\u6cd5:<br \/>\nnpm install react@17.0.2 react-dom@17.0.2 --save<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022072221021638.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022072221021638.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>src -&gt; store -&gt; index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import { createStore } from &quot;redux&quot;;\n\/\/ \u7b14\u8bb0\u672c \u4f20\u7ed9 store \u7ba1\u7406\u5458\nimport reducer from &quot;.\/reducer&quot;;\n\/\/ \u5f15\u5165 redux-devtools \u9700\u8981\u7528\u5230\u7684\u4f9d\u8d56\u5305\nimport { composeWithDevTools } from &#039;redux-devtools-extension&#039;\n\nconst store=createStore(reducer,composeWithDevTools());\n\nexport default store;<\/code><\/pre>\n<ul>\n<li>src -&gt; store -&gt; reducer.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const defaultState = {\n    inputValue: &#039;123&#039;,\n    list: [1, 2]\n}\n\/\/ reducer \u662f\u7b14\u8bb0\u672c\n\/\/ state:\u5b58\u653e\u7684\u662f\u6574\u4e2a\u56fe\u4e66\u9986\u6240\u6709\u4e66\u7c4d\u7684\u4fe1\u606f\n\/\/reducer \u53ef\u4ee5\u63a5\u6536 state,\u4f46\u662f\u7edd\u4e0d\u80fd\u4fee\u6539 state\n\/\/ eslint-disable-next-line import\/no-anonymous-default-export\nexport default (state = defaultState, action) =&gt; {\n    \/\/\u7ed3\u5408\u4e4b\u524d\u7684\u6570\u636e\u548c\u5f53\u524d\u7528\u6237\u7684\u64cd\u4f5c\u544a\u8bc9 store,\u73b0\u5728\u65b0\u7684\u6570\u636e\u5e94\u8be5\u53d8\u6210\u4ec0\u4e48\u6837\n    if (action.type === &#039;change_input_value&#039;) {\n        const newState = JSON.parse(JSON.stringify(state));\n        newState.inputValue = action.value;\n        return newState;\n    }\n    if (action.type===&#039;add_todo_item&#039;){\n        const newState = JSON.parse(JSON.stringify(state));\n        newState.list.push(newState.inputValue)\n        newState.inputValue=&#039;&#039;\n        return newState;\n    }\n    console.log(state, action);\n    return state;\n}<\/code><\/pre>\n<ul>\n<li>TodoList.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, {Component} from &#039;react&#039;;\nimport &#039;antd\/dist\/antd.min.css&#039;;\nimport {Button, Input, List} from &#039;antd&#039;;\n\/\/ \u7ec4\u4ef6\u7684\u6570\u636e\u4ece store \u4e2d\u53d6\nimport store from &#039;.\/store\/index.js&#039;;\n\nclass TodoList extends Component {\n\n    constructor(props) {\n        super(props);\n        this.state = store.getState();\n        this.handleInputChange = this.handleInputChange.bind(this)\n        this.handleStoreChange = this.handleStoreChange.bind(this)\n        this.handleBtnClick = this.handleBtnClick.bind(this)\n        store.subscribe(this.handleStoreChange);\n    }\n\n    render() {\n        return (\n            &lt;div style={{marginTop: &#039;10px&#039;, marginLeft: &#039;10px&#039;}}&gt;\n                &lt;div&gt;\n                    &lt;Input value={this.state.inputValue} placeholder=&#039;todo info&#039;\n                           style={{width: &#039;300px&#039;, marginRight: &#039;10px&#039;}}\n                           onChange={this.handleInputChange}\n                    \/&gt;\n                    &lt;Button type=&quot;primary&quot; onClick={this.handleBtnClick}&gt;\u63d0\u4ea4&lt;\/Button&gt;\n                &lt;\/div&gt;\n                &lt;List\n                    style={{marginTop: &#039;10px&#039;, width: &#039;300px&#039;}}\n                    bordered\n                    dataSource={this.state.list}\n                    renderItem={item =&gt; &lt;List.Item&gt;{item}&lt;\/List.Item&gt;}\n                \/&gt;\n            &lt;\/div&gt;\n        )\n    }\n\n    handleInputChange(e) {\n        const action = {\n            type: &#039;change_input_value&#039;,\n            value: e.target.value\n        }\n        store.dispatch(action)\n    }\n\n    handleStoreChange() {\n        this.setState(store.getState());\n    }\n\n    handleBtnClick() {\n        const aciton = {\n            type: &#039;add_todo_item&#039;\n        };\n     store.dispatch(aciton);\n    }\n}\nexport default TodoList;<\/code><\/pre>\n<h2>5-6 \u4f7f\u7528 Redux \u5b8c\u6210 TodoList \u5220\u9664\u529f\u80fd<\/h2>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/202207231827026.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/202207231827026.png\" alt=\"\" \/><\/p><\/noscript>\n<pre class=\"prettyprint linenums\" ><code>  handleItemDelete(index){\n        const action={\n            type:&#039;delete_todo_item&#039;,\n            index\n        }\n        store.dispatch(action);\n    }<\/code><\/pre>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022072318275721.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022072318275721.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>5-7ActionTypes \u7684\u62c6\u5206<\/h2>\n<ul>\n<li>\u9632\u6b62\u4e00\u4e9b\u62fc\u5199\u95ee\u9898,,\u5e38\u91cf\u548c\u53d8\u91cf\u7cfb\u7edf\u4f1a\u62a5\u9519,,\u6709\u5229\u4e8e\u627e\u9519<\/li>\n<li>store -&gt; actionTypes.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>export const CHANGE_INPUT_VALUE = &#039;change_input_value&#039;\nexport const ADD_TODO_ITEM = &#039;add_todo_item&#039;\nexport const DELETE_TODO_ITEM = &#039;delete_todo_item&#039;\n\nimport {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM } from &#039;.\/actionTypes&#039;<\/code><\/pre>\n<h2>5-8 \u4f7f\u7528 actionCreator \u7edf\u4e00\u521b\u5efa action<\/h2>\n<ul>\n<li>\n<p>\u5229\u4e8e\u7ba1\u7406\u548c\u6d4b\u8bd5,,\u524d\u7aef\u6709\u81ea\u52a8\u5316\u53ef\u6d4b\u8bd5\u5de5\u5177, ,\u5229\u4e8e\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027<\/p>\n<\/li>\n<li>\n<p>actionCreator.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import {ADD_TODO_ITEM, CHANGE_INPUT_VALUE, DELETE_TODO_ITEM} from &quot;.\/actionTypes&quot;;\n\nexport const getInputChangeAction=(value)=&gt;({\n    type:CHANGE_INPUT_VALUE,\n    value\n})\nexport const getAddItemAction=()=&gt;({\n    type:ADD_TODO_ITEM,\n})\nexport const getDeleteItemAction=(index)=&gt;({\n    type:DELETE_TODO_ITEM,\n    index\n})\n<\/code><\/pre>\n<ul>\n<li>Todolist.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>handleInputChange(e) {\n        const action=getInputChangeAction(e.target.value)\n        store.dispatch(action)\n    }<\/code><\/pre>\n<h2>5-9Redux \u77e5\u8bc6\u70b9\u590d\u4e60\u8865\u5145<\/h2>\n<ul>\n<li>\n<p>\u5229\u4e8e\u7ba1\u7406\u548c\u6d4b\u8bd5,,\u524d\u7aef\u6709\u81ea\u52a8\u5316\u53ef\u6d4b\u8bd5\u5de5\u5177, ,\u5229\u4e8e\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027<\/p>\n<\/li>\n<li>\n<p>actionCreator.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import {ADD_TODO_ITEM, CHANGE_INPUT_VALUE, DELETE_TODO_ITEM} from &quot;.\/actionTypes&quot;;\n\nexport const getInputChangeAction=(value)=&gt;({\n    type:CHANGE_INPUT_VALUE,\n    value\n})\nexport const getAddItemAction=()=&gt;({\n    type:ADD_TODO_ITEM,\n})\nexport const getDeleteItemAction=(index)=&gt;({\n    type:DELETE_TODO_ITEM,\n    index\n})\n<\/code><\/pre>\n<ul>\n<li>Todolist.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>handleInputChange(e) {\n        const action=getInputChangeAction(e.target.value)\n        store.dispatch(action)\n    }<\/code><\/pre>\n<h2>5-9Redux \u77e5\u8bc6\u70b9\u590d\u4e60\u8865\u5145<\/h2>\n<ul>\n<li>store \u662f\u552f\u4e00\u7684<\/li>\n<li>\u53ea\u6709 store \u80fd\u591f\u6539\u53d8\u81ea\u5df1\u7684\u5185\u5bb9<\/li>\n<li>\n<p>Reducer \u5fc5\u987b\u662f\u7eaf\u51fd\u6570<\/p>\n<ul>\n<li>\u7eaf\u51fd\u6570 : \u7ed9\u5b9a\u56fa\u5b9a\u7684\u8f93\u5165,\u5c31\u4e00\u5b9a\u4f1a\u6709\u56fa\u5b9a\u7684\u8f93\u51fa,\u800c\u4e14\u4e0d\u4f1a\u6709\u4efb\u4f55\u526f\u4f5c\u7528<\/li>\n<li>\u6ce8:<br \/>\n\u2460\u4e00\u65e6\u6709 setTimeout,\u65e5\u671f\u76f8\u5173\u5185\u5bb9,ajax \u8bf7\u6c42\u5b58\u5728\u7684,\u4e0d\u518d\u662f\u7eaf\u51fd\u6570,\u4e0d\u80fd\u6709\u5f02\u6b65\u64cd\u4f5c,\u4e0d\u80fd\u6709\u8ddf\u65f6\u95f4\u76f8\u5173\u7684\u64cd\u4f5c<\/li>\n<\/ul>\n<p><img data-original=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022072321524139.png\"  alt=\"\" \/><br \/>\n<noscript><img decoding=\"async\" src=\"http:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022072321524139.png\" alt=\"\" \/><br \/><\/noscript>\n\u2461\u8fd9\u5c31\u662f\u6709\u526f\u4f5c\u7528\u7684\u4ee3\u7801,,\u5bf9\u63a5\u6536\u7684\u53c2\u6570\u505a\u4e86\u4fee\u6539,\u4e0d\u662f\u7eaf\u51fd\u6570\u4e86<\/p>\n<\/li>\n<\/ul>\n<h3>Redux \u7684\u6838\u5fc3 API<\/h3>\n<ul>\n<li>createStore : \u5e2e\u52a9\u6211\u4eec\u521b\u5efa store<\/li>\n<li>store.dispatch : \u5e2e\u52a9\u6211\u4eec\u6d3e\u53d1 action,\u8fd9\u4e2a action \u4f1a\u4f20\u9012\u7ed9 store<\/li>\n<li>store.getState : \u5e2e\u52a9\u6211\u4eec\u83b7\u53d6\u5230 store \u4e2d\u6240\u6709\u7684\u6570\u636e\u5185\u5bb9<\/li>\n<li>store.subscribe : \u5e2e\u52a9\u6211\u4eec\u8ba2\u9605 store \u7684\u6539\u53d8,\u4e00\u65e6\u6539\u53d8,\u8fd9\u63a5\u6536\u7684\u56de\u8c03\u51fd\u6570\u5c31\u4f1a\u88ab\u6267\u884c<br \/>\n<h1>6.Redux \u8fdb\u9636<\/h1>\n<h2>6-01UI \u7ec4\u4ef6(\u50bb\u74dc\u7ec4\u4ef6)\u548c\u5bb9\u5668\u7ec4\u4ef6<\/h2>\n<\/li>\n<li>TodoListUI.js \u9875\u9762\u6e32\u67d3<\/li>\n<li>\u5bb9\u5668\u7ec4\u4ef6 TodoList.js  \u4e1a\u52a1\u903b\u8f91\u4ee3\u7801,\u8d1f\u8d23\u529f\u80fd\u5b9e\u73b0<br \/>\n<h2>Redux \u4e2d\u53d1\u9001\u5f02\u6b65\u8bf7\u6c42\u83b7\u53d6\u6570\u636e<\/h2>\n<\/li>\n<li>\u5728 charles-&gt;tools-&gt;Map Local...-&gt;Add-&gt; <\/li>\n<\/ul>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022090521365835.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022090521365835.png\" alt=\"\" \/><\/p><\/noscript>\n<ul>\n<li>\n<p>\u8bbf\u95ee: <a href=\"http:\/\/localhost.charlesproxy.com:3000\/\">http:\/\/localhost.charlesproxy.com:3000\/<\/a><\/p>\n<\/li>\n<li>\n<p>\u684c\u9762\u65b0\u5efa list.json<br \/>\n[&quot;hello&quot;, &quot;dell&quot;, &quot;lee&quot;]<\/p>\n<\/li>\n<li>\n<p>actionCreators.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>export const initListAction=(data)=&gt;({\n    type:INIT_LIST_ACTION,\n    data\n})<\/code><\/pre>\n<ul>\n<li>actionTypes.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>export const INIT_LIST_ACTION = &#039;init_list_action&#039;<\/code><\/pre>\n<ul>\n<li>Todolist.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import axios from &#039;axios&#039;\n componentDidMount() {\n    axios.get(&#039;\/list.json&#039;).then((res) =&gt; {\n      const data=res.data;\n      const action=initListAction(data);\n      store.dispatch(action)\n    })\n  }<\/code><\/pre>\n<h2>\u4f7f\u7528 Redux-thunk \u4e2d\u95f4\u4ef6\u8fdb\u884c ajax \u8bf7\u6c42\u53d1\u9001<\/h2>\n<ul>\n<li>\n<p>\u6559\u7a0b: <a href=\"https:\/\/github.com\/reduxjs\/redux-thunk\">https:\/\/github.com\/reduxjs\/redux-thunk<\/a><\/p>\n<\/li>\n<li>\n<p>\u62a5\u9519: npm install \u62a5 ENOENT: no such file or directory, open<\/p>\n<ul>\n<li>npm init -y<\/li>\n<li>npm install<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>src\/store\/index.js  [\u5b89\u88c5\u4f7f\u7528 redux-thunk \u548c\u2193] <a href=\"https:\/\/github.com\/zalmoxisus\/redux-devtools-extension\">https:\/\/github.com\/zalmoxisus\/redux-devtools-extension<\/a><\/p>\n<\/li>\n<li>\n<p>src\/store\/actionCreators.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>export const getTodolist = () =&gt; {\n  return (dispatch) =&gt; {\/\/return \u4e00\u4e2a\u51fd\u6570,\u53ef\u4ee5\u505a\u5f02\u6b65\u64cd\u4f5c\n    axios.get(&#039;\/list.json&#039;).then((res) =&gt; {\n      const data = res.data;\n      const action = initListAction(data);\n      dispatch(action)\n    })\n  }\n}<\/code><\/pre>\n<ul>\n<li>src\/TodoList.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\/\/\u5efa\u8bae\u5c06\u5f02\u6b65\u51fd\u6570\u548c\u590d\u6742\u903b\u8f91\u62c6\u5206\u5230,\u501f\u52a9 redux-thunk\n  componentDidMount() {\n    const action=getTodolist()\/\/\u51fd\u6570\n    \/\/\u5f53\u4f60\u8c03\u7528 store.dispatch,\u628a action \u53d1\u7ed9 store \u7684\u65f6\u5019,action \u5c31\u4f1a\u88ab\u81ea\u52a8\u6267\u884c\n    store.dispatch(action);\n  }<\/code><\/pre>\n<h2>\u4ec0\u4e48\u662f Redux \u7684\u4e2d\u95f4\u4ef6<\/h2>\n<p><img data-original=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022090523104710.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"https:\/\/blog.odjbinail.cn\/wp-content\/uploads\/2022\/05\/2022090523104710.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>Redux-saga \u4e2d\u95f4\u4ef6\u4f7f\u7528\u5165\u95e8<\/h2>\n<ul>\n<li>\u6559\u7a0b: <a href=\"https:\/\/github.com\/redux-saga\/redux-saga\">https:\/\/github.com\/redux-saga\/redux-saga<\/a><\/li>\n<\/ul>\n<h2>\u5982\u4f55\u4f7f\u7528 React-redux<\/h2>\n<h1>7.\u9879\u76ee\u5b9e\u6218: Header \u7ec4\u4ef6\u5f00\u53d1<\/h1>\n<h2>\u4f7f\u7528 styled-components \u5b8c\u6210 Header \u7ec4\u4ef6\u5e03\u5c40<\/h2>\n<ul>\n<li>background-size\uff1a contain \u4e0e cover \u7684\u533a\u522b\uff1a<\/li>\n<li>\u5728 no-repeat \u60c5\u51b5\u4e0b\uff0c\u5982\u679c\u5bb9\u5668\u5bbd\u9ad8\u6bd4\u4e0e\u56fe\u7247\u5bbd\u9ad8\u6bd4\u4e0d\u540c\uff0c<\/li>\n<li>cover\uff1a\u56fe\u7247\u5bbd\u9ad8\u6bd4\u4e0d\u53d8\u3001\u94fa\u6ee1\u6574\u4e2a\u5bb9\u5668\u7684\u5bbd\u9ad8\uff0c\u800c\u56fe\u7247\u591a\u51fa\u7684\u90e8\u5206\u5219\u4f1a\u88ab\u622a\u6389\uff1b<\/li>\n<li>contain:\u56fe\u7247\u81ea\u8eab\u7684\u5bbd\u9ad8\u6bd4\u4e0d\u53d8\uff0c\u7f29\u653e\u81f3\u56fe\u7247\u81ea\u8eab\u80fd\u5b8c\u5168\u663e\u793a\u51fa\u6765\uff0c\u6240\u4ee5\u5bb9\u5668\u4f1a\u6709\u7559\u767d\u533a\u57df\uff1b<\/li>\n<li>PS:\u5176\u5b9e\uff0c\u4ece\u82f1\u6587\u7684\u610f\u601d\u6765\u8bf4\uff1acover \u610f\u5473\u7740\u201c\u906e\u7f69\u3001\u906e\u76d6\u201d---\u6b64\u5904\u7406\u89e3\u4e3a\u201c\u585e\u6ee1\u201d\u8f83\u6070\u5f53\uff0ccontain \u610f\u4e3a\u201c\u5305\u542b\u201d--\u4e5f\u5c31\u662f\uff1a\u6211\u56fe\u7247\u867d\u7136\u7f29\u653e\u4e86\uff0c\u4f46\u662f\u6574\u4e2a\u56fe\u662f\u88ab\u201c\u5305\u542b\u201d\u5728\u4f60\u91cc\u9762\u7684\uff0c\u4f60\u5fc5\u987b\u628a\u6211\u663e\u793a\u5b8c\u6574\u3001\u4e0d\u80fd\u88c1\u526a\u6211\u4e00\u4e1d\u4e00\u6beb~<\/li>\n<li>\u5728 repeat \u60c5\u51b5\u4e0b\uff1acover:\u4e0e\u4e0a\u8ff0\u76f8\u540c\uff1bcontain:\u5bb9\u5668\u5185\u81f3\u5c11\u6709\u4e00\u5f20\u5b8c\u6574\u7684\u56fe\uff0c\u5bb9\u5668\u7559\u767d\u533a\u57df\u5219\u5e73\u94fa\u80cc\u666f\u56fe\uff0c\u94fa\u4e0d\u4e0b\u7684\u518d\u88c1\u6389\u3002<\/li>\n<\/ul>\n<h2>\u4f7f\u7528 React-Redux \u8fdb\u884c\u5e94\u7528\u6570\u636e\u7684\u7ba1\u7406????????[\u6570\u636e\u7ed5]<\/h2>\n<h2>ajax \u83b7\u53d6\u63a8\u8350\u6570\u636e<\/h2>\n<ul>\n<li>store\/actionCreators.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import {fromJS} from &quot;immutable&quot;;\nimport axios from &quot;axios&quot;;\nconst changeList=(data)=&gt;({\n  type:constants.CHANGE_LIST,\n  data:fromJS(data)\n})\n\nexport const getList=()=&gt;{\n return (dispatch)=&gt;{\n   axios.get(&#039;\/api\/headerList.json&#039;).then((res)=&gt;{\n    const data=res.data\n     dispatch(changeList(data.data))\n   }).catch(()=&gt;{\n     console.log(&#039;error&#039;)\n   })\n}\n}<\/code><\/pre>\n<ul>\n<li>store\/reducer.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import {fromJS} from &quot;immutable&quot;;\nconst defaultState=fromJS({\n  list:[]\n});\n\n  case constants.CHANGE_LIST:\n      return state.set(&#039;list&#039;, action.data)<\/code><\/pre>\n<ul>\n<li>header\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> &lt;SearchInfoList&gt;\n            {\n              this.props.list.map((item) =&gt; {\n                return &lt;SearchInfoItem key={item}&gt;{item}&lt;\/SearchInfoItem&gt;\n              })\n            }\n &lt;\/SearchInfoList&gt;<\/code><\/pre>\n<h2>\u70ed\u95e8\u641c\u7d22\u6362\u9875\u529f\u80fd\u5b9e\u73b0<\/h2>\n<ul>\n<li>reducer.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const defaultState = fromJS({\n  page:1,\n  totalPage:1\n});\ncase constants.CHANGE_LIST:\n      return state.merge({\n        list: action.data,\n        totalPage: action.totalPage\n      });<\/code><\/pre>\n<ul>\n<li>actionCreators.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const changeList=(data)=&gt;({\n  totalPage:Math.ceil(data.length \/ 10)\n})<\/code><\/pre>\n<h2>\u907f\u514d\u65e0\u610f\u4e49\u7684\u8bf7\u6c42\u53d1\u9001\uff0c\u63d0\u5347\u7ec4\u4ef6\u6027\u80fd<\/h2>\n<ul>\n<li>header\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>  const {list} = this.props;\nreturn(\n  &lt;NavSearch className={focused ? &#039;focused&#039; : &#039;&#039;}\n                         onFocus={() =&gt; handleInputFocus(list)}\n              \/&gt;\n     )\nhandleInputFocus(list) {\n      (list.size ===0) &amp;&amp; dispatch(actionCreators.getList())\n      dispatch(actionCreators.searchFocus());\n    },<\/code><\/pre>\n<h1>8.\u9879\u76ee\u5b9e\u6218: \u9996\u9875\u5f00\u53d1<\/h1>\n<h2>\u5982\u4f55\u5728 React \u4e2d\u4f7f\u7528\u8def\u7531\u529f\u80fd<\/h2>\n<ul>\n<li>App.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import {BrowserRouter, Route} from &quot;react-router-dom&quot;;\n   &lt;Provider store={store}&gt;\n        &lt;div&gt;\n          &lt;Header\/&gt;\n          &lt;BrowserRouter&gt;\n            &lt;div&gt;\n              {\/*exact \u5b8c\u5168\u8ddf path \u76f8\u7b49\u7684*\/}\n              &lt;Route path=&#039;\/&#039; exact render={() =&gt; &lt;div&gt;home&lt;\/div&gt;}\/&gt;\n              &lt;Route path=&#039;\/detail&#039; exact render={() =&gt; &lt;div&gt;detail&lt;\/div&gt;}\/&gt;\n            &lt;\/div&gt;\n          &lt;\/BrowserRouter&gt;\n        &lt;\/div&gt;\n     &lt;\/Provider&gt;<\/code><\/pre>\n<h2>\u5f02\u6b65\u64cd\u4f5c\u4ee3\u7801\u62c6\u5206\u4f18\u5316<\/h2>\n<ul>\n<li>src\/pages\/home\/store\/constants.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>export const CHANGE_HOME_DATA=&#039;\/home\/CHANGE_HOME_DATA&#039;<\/code><\/pre>\n<ul>\n<li>src\/pages\/home\/store\/actionCreators.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import axios from &quot;axios&quot;;\nimport * as constants from &#039;.\/constants&#039;\n\nconst changeHomeData=(result)=&gt;({\n  type: constants.CHANGE_HOME_DATA,\n  topicList: result.topicList,\n  articleList: result.articleList,\n  recommendList: result.recommendList\n})\n\nexport const getHomeInfo=()=&gt;{\n  return (dispatch)=&gt;{\n    axios.get(&quot;\/api\/home.json&quot;).then(res =&gt; {\n      const result = res.data.data;\n      dispatch(changeHomeData(result));\n    });\n  }\n}<\/code><\/pre>\n<ul>\n<li>src\/pages\/home\/store\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import reducer from &quot;.\/reducer&quot;;\nimport * as actionCreators from &#039;.\/actionCreators&#039;\nexport {reducer,actionCreators}\n<\/code><\/pre>\n<ul>\n<li>src\/pages\/home\/index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import {connect} from &quot;react-redux&quot;;\nimport {actionCreators} from &quot;.\/store&quot;;\nclass Home extends Component {\ncomponentDidMount() {\n    this.props.changeHomeData();\n  }\n}\n\nconst mapDispatch = (dispatch) =&gt; ({\n  changeHomeData() {\n    const action = actionCreators.getHomeInfo();\n    dispatch(action);\n  }\n});\n\nexport default connect(null, mapDispatch)(Home);<\/code><\/pre>\n<h2>\u5b9e\u73b0\u52a0\u8f7d\u66f4\u591a\u529f\u80fd<\/h2>\n<ul>\n<li>src\/pages\/home\/components\/List.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> &lt;LoadMore onClick={getMoreList}&gt;\u66f4\u591a\u6587\u5b57&lt;\/LoadMore&gt;\nconst mapDispatch = (dispatch) =&gt; ({\n  getMoreList() {\n    dispatch(actionCreators.getMoreList());\n  }\n});\nexport default connect(mapState, mapDispatch)(List);<\/code><\/pre>\n<ul>\n<li>src\/pages\/home\/store\/actionCreators.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import {fromJS} from &quot;immutable&quot;;\n\nconst addHomeList=(list)=&gt;({\n  type: constants.ADD_ARTICLE_LIST,\n  list:fromJS(list)\/\/fromJS,\u4f1a\u628a\u5916\u5c42\u7684\u6570\u7ec4\u548c\u6570\u7ec4\u5185\u90e8\u5bf9\u8c61\u90fd\u8f6c\u6362\u4e3a immutable \u7c7b\u578b\n})\n\nexport const getMoreList = () =&gt; {\n  return (dispatch) =&gt; {\n    axios.get(&quot;\/api\/homeList.json&quot;).then(res =&gt; {\n      const result = res.data.data;\n      console.log(result);\n      dispatch(addHomeList(result));\n    });\n  };\n};<\/code><\/pre>\n<ul>\n<li>src\/pages\/home\/store\/reducer.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> case constants.ADD_ARTICLE_LIST:\n      return state.set(&#039;articleList&#039;,state.get(&#039;articleList&#039;).concat(action.list))<\/code><\/pre>\n<h3>\u52a0\u8f7d\u66f4\u591a,\u6839\u636e\u540e\u7aef\u4f20\u503c\u9875\u7801\u4e0d\u540c\u5185\u5bb9\u4e0d\u540c<\/h3>\n<ul>\n<li>src\/pages\/home\/components\/List.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> &lt;LoadMore onClick={()=&gt;getMoreList(page)}&gt;\u66f4\u591a\u6587\u5b57&lt;\/LoadMore&gt;\n const mapState = (state) =&gt; ({\n  list: state.getIn([&quot;home&quot;, &quot;articleList&quot;]),\n  page:state.getIn([&quot;home&quot;,&quot;articlePage&quot;])\n});\nconst mapDispatch = (dispatch) =&gt; ({\n  getMoreList(page) {\n    dispatch(actionCreators.getMoreList(page));\n  }\n});<\/code><\/pre>\n<ul>\n<li>src\/pages\/home\/store\/actionCreators.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const addHomeList=(list,nextPage)=&gt;({\n  type: constants.ADD_ARTICLE_LIST,\n  list:fromJS(list),\n  nextPage\n})\nexport const getMoreList = (page) =&gt; {\n  return (dispatch) =&gt; {\n    axios.get(&quot;\/api\/homeList.json?page=&quot;+page).then(res =&gt; {\n      const result = res.data.data;\n      dispatch(addHomeList(result,page+1));\n    });\n  };\n};<\/code><\/pre>\n<ul>\n<li>src\/pages\/home\/store\/reducer.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>const defaultState = fromJS({\n  articlePage:1\n});\n case constants.ADD_ARTICLE_LIST:\n      return state.merge({\n        &#039;articleList&#039;:state.get(&#039;articleList&#039;).concat(action.list),\n        &#039;articlePage&#039;:action.nextPage\n      })<\/code><\/pre>\n<h2>\u9996\u9875\u6027\u80fd\u4f18\u5316<\/h2>\n<ul>\n<li>\u9996\u9875\u7684\u6bcf\u4e00\u4e2a\u7ec4\u4ef6\u57fa\u672c\u4e0a\u6bcf\u4e2a\u90fd\u8c03\u7528\u7684 connect \u65b9\u6cd5\u548c store \u4f5c\u4e86\u8fde\u63a5,\u53ea\u8981 store \u53d1\u751f\u4e86\u6539\u53d8,\u90a3\u4e48\u6bcf\u4e2a\u7ec4\u4ef6\u90fd\u4f1a\u88ab\u91cd\u73b0\u6e32\u67d3,\u6bcf\u4e2a\u7ec4\u4ef6\u7684 render \u51fd\u6570\u90fd\u4f1a\u88ab\u91cd\u65b0\u6267\u884c<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code> \/\/\u5224\u65ad\u53ea\u6709\u548c\u8fd9\u7ec4\u4ef6\u76f8\u5173\u7684\u6570\u636e\u53d1\u751f\u6539\u53d8\u7684\u65f6\u5019,\u6211\u624d\u8ba9\u7ec4\u4ef6\u7684 render \u51fd\u6570\u6267\u884c,\n  \/\/ \u5426\u5219\u5c31 return false,\u6765\u907f\u514d\u865a\u62df dom \u7684\u6bd4\u5bf9,\u6765\u63d0\u9ad8\u6027\u80fd,\u5728\u6bcf\u4e2a\u7ec4\u4ef6\u90fd\u5199\u8fd9\u4e2a,\u592a\u9ebb\u70e6\u4e86\n  \/\/PureComponent \u7eaf\u7ec4\u4ef6,\u5185\u5728\u5e95\u5c42\u5b9e\u73b0\u4e86\u4e00\u4e2a shouldComponentUpdate,\u6240\u4ee5\u4e0d\u9700\u8981\u624b\u5199\u6765\u505a\u6027\u80fd\u4f18\u5316\u4e86\n  shouldComponentUpdate() { }<\/code><\/pre>\n<h1>9.\u9879\u76ee\u5b9e\u6218\uff1a\u8be6\u60c5\u9875\u9762\u548c\u767b\u5f55\u529f\u80fd\u5f00\u53d1<\/h1>\n<h2>\u8be6\u60c5\u9875\u9762\u5e03\u5c40<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>2.React \u521d\u6df1 React \u5f00\u53d1\u73af\u5883\u51c6\u5907 https:\/\/reactjs.org\/docs\/create [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-3340","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3340"}],"version-history":[{"count":145,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3340\/revisions"}],"predecessor-version":[{"id":4787,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/3340\/revisions\/4787"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}