{"id":2871,"date":"2022-02-16T14:17:57","date_gmt":"2022-02-16T06:17:57","guid":{"rendered":"http:\/\/blog.odjbinail.cn\/?p=2871"},"modified":"2023-08-12T17:22:57","modified_gmt":"2023-08-12T09:22:57","slug":"react-js%e5%9f%ba%e7%a1%80%e8%af%ad%e6%b3%95%e4%b8%8e%e6%96%b0%e9%97%bb%e7%bd%91%e7%ab%99","status":"publish","type":"post","link":"https:\/\/blog.odjbinail.cn\/?p=2871","title":{"rendered":"React.js\u57fa\u7840\u8bed\u6cd5\u4e0e\u65b0\u95fb\u7f51\u7ad9"},"content":{"rendered":"<h1>React \u5f00\u53d1\u73af\u5883\u51c6\u5907<\/h1>\n<ul>\n<li>\u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb<br \/>\nnpm install --registry=<a href=\"https:\/\/registry.npm.taobao.org\">https:\/\/registry.npm.taobao.org<\/a><\/li>\n<\/ul>\n<p>nodejs.org \u4e0b\u8f7d\u5de6\u8fb9\u7a33\u5b9a\u7248\u672c<\/p>\n<ul>\n<li>node -v<br \/>\nnpm -v<br \/>\n\u6b63\u5e38\u8f93\u51fa\u7248\u672c\u53f7,\u5c31\u5b89\u88c5\u6210\u529f<\/li>\n<\/ul>\n<p>reactjs.org-&gt;Create a New React App<\/p>\n<ul>\n<li>npx create-react-app my-react<\/li>\n<li>cd my-react<\/li>\n<li>npm start<\/li>\n<\/ul>\n<p>public-&gt;index.html <\/p>\n<pre class=\"prettyprint linenums\" ><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n  &lt;meta charset=&quot;utf-8&quot; \/&gt;\n  &lt;link rel=&quot;icon&quot; href=&quot;%PUBLIC_URL%\/favicon.ico&quot; \/&gt;\n  &lt;title&gt;Odj First React&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n&lt;noscript&gt;You need to enable JavaScript to run this app.&lt;\/noscript&gt;\n&lt;div id=&quot;root&quot;&gt;&lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<ul>\n<li>src-&gt; 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\/\/ &lt;==&gt;\n\/\/ import React from &quot;react&quot;;\n\/\/ const {Component}=React;\n\/\/ &lt;==&gt;\n\/\/ const Component=React.Component;\nclass App extends Component {\n  render () {\n    return (\n      &lt;div&gt;\n        hello world\n      &lt;\/div&gt;\n    );\n  }\n}\nexport default App;\n<\/code><\/pre>\n<ul>\n<li>src-&gt;index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React from &#039;react&#039;;\/\/\u5e2e\u52a9\u6211\u4eec\u53bb\u89e3\u6790 JSX \u8bed\u6cd5\nimport ReactDOM from &#039;react-dom&#039;;\nimport App from &#039;.\/App&#039;;\nReactDOM.render(&lt;App \/&gt;, document.getElementById(&#039;root&#039;));<\/code><\/pre>\n<p><img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022030712205485.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022030712205485.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>JSX \u8bed\u6cd5<\/h2>\n<ul>\n<li>JSX \u8bed\u6cd5\u91cc\u9762,\u6709\u4e24\u7c7b\u578b\u7684\u6807\u7b7e<\/li>\n<li>JSX \u7b2c\u4e00\u79cd\u6807\u7b7e:\u666e\u901a\u7684 html \u6807\u7b7e<\/li>\n<li>JSX \u7b2c\u4e8c\u79cd\u6807\u7b7e:\u7ec4\u4ef6\u6807\u7b7e(\u9996\u5b57\u6bcd\u5927\u5199)<\/li>\n<\/ul>\n<h2>\u4f7f\u7528 React \u7f16\u5199 TodoList \u529f\u80fd<\/h2>\n<pre class=\"prettyprint linenums\" ><code>TodoList.js\nimport React, { Component, Fragment } from &quot;react&quot;;\nclass TodoList extends Component {\n  render () {\n    return (\n      &lt;Fragment&gt;\n        &lt;input \/&gt;\n        &lt;ul&gt;\n          &lt;li&gt;learn React&lt;\/li&gt;\n          &lt;li&gt;learn Component&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/Fragment&gt;\n    );\n  }\n}\nexport default TodoList;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>index.js\nimport React from &quot;react&quot;;\nimport ReactDom from &quot;react-dom&quot;;\nimport TodoList from &#039;.\/TodoList&#039;\nReactDom.render(&lt;TodoList \/&gt;, document.getElementById(&#039;root&#039;)); <\/code><\/pre>\n<h2>React \u4e2d\u6570\u636e\u9a71\u52a8\u7684\u8bbe\u8ba1\u601d\u60f3\u548c\u4e8b\u4ef6\u7ed1\u5b9a<\/h2>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component, Fragment } from &quot;react&quot;;\nclass TodoList extends Component {\n  \/\/ constructor \u5728\u7ec4\u4ef6\u521b\u5efa\u7684\u7b2c\u4e00\u4e2a\u65f6\u523b\u81ea\u52a8\u88ab\u6267\u884c\n  constructor(props) {\n    super(props);\n    \/\/\u5b9a\u4e49\u6570\u636e,\u56fa\u5b9a\u8bed\u6cd5,this.state\n    \/\/\u5728\u7ec4\u4ef6\u4e2d\u521b\u5efa\u4e86\u4e24\u4e2a\u6570\u636e,\u6570\u636e\u4e00\u5b9a\u8981\u5b9a\u4e49\u5728 state \u4e2d\n    this.state = {\n      inputValue: &#039;hello world&#039;,\n      list: []\n    }\n  }\n  handleInputChange (e) {\n    \/\/ console.log(e.target.value);\n    \/\/ console.log(this);\n    \/\/\u6539\u53d8\u6570\u636e setState\n    this.setState({\n      inputValue: e.target.value\n    })\n  }\n  render () {\n    \/\/ \u5982\u679c\u4e00\u4e2a\u5c5e\u6027\u7b49\u4e8e js \u8868\u8fbe\u5f0f\u6216 js \u53d8\u91cf\u7684\u65f6\u5019,\u6700\u5916\u9762\u4e00\u5b9a\u8981\u6709{}\n    \/\/.bind(this) this \u5c31\u4f1a\u6307\u5411\u5f53\u524d\u7ec4\u4ef6\n    return (\n      &lt;Fragment&gt;\n        &lt;input\n          value={this.state.inputValue}\n          onChange={this.handleInputChange.bind(this)}\n        \/&gt;\n        &lt;ul&gt;\n          &lt;li&gt;learn React&lt;\/li&gt;\n          &lt;li&gt;learn Component&lt;\/li&gt;\n        &lt;\/ul&gt;\n      &lt;\/Fragment&gt;\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>import React, { Component, Fragment } from &quot;react&quot;;\nclass TodoList extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      inputValue: &#039;&#039;,\n      list: []\n    }\n  }\n  handleInputChange (e) {\n    this.setState({\n      inputValue: e.target.value\n    })\n  }\n  handleKeyUp (e) {\n    \/\/ console.log(e.keyCode)\n    if (e.keyCode === 13) {\n      \/\/...this.state.list ==&gt; &#039;learn React&#039;, &#039;learn Component&#039;\n      const list = [...this.state.list, this.state.inputValue];\n      this.setState({ list, inputValue: &#039;&#039; })\n    }\n  }\n  handleItemClick (index) {\n    \/\/ alert(index);\n    const list = [...this.state.list];\n    list.splice(index, 1);\n    this.setState({ list })\n  }\n  render () {\n    return (\n      &lt;Fragment&gt;\n        &lt;input\n          value={this.state.inputValue}\n          onChange={this.handleInputChange.bind(this)}\n          onKeyUp={this.handleKeyUp.bind(this)}\n        \/&gt;\n        {\/* \u5faa\u73af\u8f93\u51fa\u7684\u6bcf\u4e00\u9879\u90fd\u8981\u52a0\u4e0a key \u503c *\/}\n        &lt;ul&gt;\n          {this.state.list.map((value, index) =&gt; {\n            return (\n              &lt;li\n                key={index}\n                onClick={this.handleItemClick.bind(this, index)}&gt;\n                {value}\n              &lt;\/li&gt;\n            )\n          })}\n        &lt;\/ul&gt;\n      &lt;\/Fragment&gt;\n    );\n  }\n}\nexport default TodoList;<\/code><\/pre>\n<h2>\u66f4\u591a JSX \u8bed\u6cd5\u7ec6\u8282<\/h2>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component, Fragment } from &quot;react&quot;;\nimport &#039;.\/style.css&#039;\nclass TodoList extends Component {\n  constructor(props) {\n    super(props);\n    this.handleInputChange = this.handleInputChange.bind(this);\n    this.handleKeyUp = this.handleKeyUp.bind(this);\n    this.state = {\n      inputValue: &#039;&#039;,\n      list: []\n    }\n  }\n  handleInputChange (e) {\n    this.setState({\n      inputValue: e.target.value\n    })\n  }\n  handleKeyUp (e) {\n    \/\/ console.log(e.keyCode)\n    if (e.keyCode === 13 &amp;&amp; e.target.value !== &#039;&#039;) {\n      \/\/...this.state.list ==&gt; &#039;learn React&#039;, &#039;learn Component&#039;\n      const list = [...this.state.list, this.state.inputValue];\n      this.setState({ list, inputValue: &#039;&#039; })\n    }\n  }\n  handleItemClick (index) {\n    \/\/ alert(index);\n    const list = [...this.state.list];\n    list.splice(index, 1);\n    this.setState({ list })\n  }\n  getListItems () {\n    return this.state.list.map((value, index) =&gt; {\nreturn (\n        &lt;li\n          key={index}\n        \/\/ dangerouslySetInnerHTML={{ __html: value }}\n        &gt;\n          {value}\n          &lt;input type=&#039;button&#039; value=&#039;\u5220\u9664&#039;\n            onClick={this.handleItemClick.bind(this, index)} \/&gt;\n          {\/* \u4e0d\u8f6c\u8bd1&lt;h1&gt;test&lt;\/h1&gt;\n          { __html: value } js \u5bf9\u8c61\n          =&gt;dangerouslySetInnerHTML={{ __html: value }}*\/}\n        &lt;\/li&gt;\n      )\n    })\n  }\n  render () {\n    return (\n      &lt;Fragment&gt;\n        {\/* \u8f93\u5165\u6846\u5149\u6807\u805a\u7126 *\/}\n        &lt;label htmlFor=&#039;myinput&#039;&gt;\u8bf7\u8f93\u5165\u5185\u5bb9: &lt;\/label&gt;\n        &lt;input\n          id=&quot;myinput&quot;\n          className=&quot;input&quot;\n          value={this.state.inputValue}\n          onChange={this.handleInputChange}\n          onKeyUp={this.handleKeyUp}\n        \/&gt;\n        {\/* \u5faa\u73af\u8f93\u51fa\u7684\u6bcf\u4e00\u9879\u90fd\u8981\u52a0\u4e0a key \u503c *\/}\n        &lt;ul&gt;\n          {this.getListItems()}\n        &lt;\/ul&gt;\n      &lt;\/Fragment&gt;\n    );\n  }\n}\nexport default TodoList;<\/code><\/pre>\n<h1>React \u7ec4\u4ef6\u4e0e\u751f\u547d\u5468\u671f<\/h1>\n<h2>\u7ec4\u4ef6\u62c6\u5206\u4e0e\u7ec4\u4ef6\u4e4b\u95f4\u7684\u4f20\u503c<\/h2>\n<pre class=\"prettyprint linenums\" ><code>TodoList.js\nthis.handleItemClick = this.handleItemClick.bind(this);\n getListItems () {\n    \/\/\u7236\u5b50\u7ec4\u4ef6\u7684\u6982\u5ff5\n    \/\/\u7236\u7ec4\u4ef6\u901a\u8fc7\u5c5e\u6027\u7684\u5f62\u5f0f\u5411\u5b50\u7ec4\u4ef6\u4f20\u503c\n    return this.state.list.map((value, index) =&gt; {\n      return &lt;TodoItem\n        content={value}\n        index={index}\n        key={index}\n        deleteFunction={this.handleItemClick}\n      \/&gt;\n    })\n  }<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>TodoItem.js\nimport React, { Component } from &quot;react&quot;;\nclass TodoItem extends Component {\n  constructor(props) {\n    super(props);\n    this.handleItemClick = this.handleItemClick.bind(this);\n  }\n  handleItemClick () {\n    \/\/\u6539\u53d8\u7236\u7ec4\u4ef6\u4e2d\u7684 list \u6570\u636e\n    \/\/ console.log(this);\n    \/\/\u5b50\u7ec4\u4ef6\u60f3\u8981\u548c\u7236\u7ec4\u4ef6\u901a\u4fe1,\u5b83\u8981\u8c03\u7528\u7236\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684\u65b9\u6cd5\n    \/\/deleteFunction={this.handleItemClick}\n    const { deleteFunction, index } = this.props;\n    deleteFunction(index);\n  }\n  render () {\n    \/\/\u5b50\u7ec4\u4ef6\u901a\u8fc7 this.props \u7684\u5c5e\u6027,\u4ece\u7236\u7ec4\u4ef6\u63a5\u6536\u4f20\u9012\u8fc7\u6765\u7684\u503c\n    const { content } = this.props;\n    return &lt;li onClick={this.handleItemClick}&gt;{content}&lt;\/li&gt;\n  }\n}\nexport default TodoItem;<\/code><\/pre>\n<h2>React \u7684\u6838\u5fc3\u7279\u6027\u603b\u7ed3<\/h2>\n<ul>\n<li>\u58f0\u660e\u5f0f\u5f00\u53d1<\/li>\n<li>\u53ef\u4ee5\u4e0e\u5176\u4ed6\u6846\u67b6\u5e76\u5b58<\/li>\n<li>\u7ec4\u4ef6\u5316<\/li>\n<li>\u5355\u5411\u6570\u636e\u6d41<\/li>\n<li>\u51fd\u6570\u5f0f\u7f16\u7a0b<\/li>\n<\/ul>\n<h2>Props,State,\u4e0e render \u51fd\u6570<\/h2>\n<pre class=\"prettyprint linenums\" ><code>index.js\nimport Counter from &#039;.\/counter&#039;;\nReactDom.render(&lt;Counter \/&gt;, document.getElementById(&#039;root&#039;)); <\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>Child.js\nimport React, { Component } from &quot;react&quot;;\nclass Child extends Component {\n  render () {\n    console.log(&#039;child render&#039;)\n    return (\n      &lt;div&gt;{this.props.number}&lt;\/div&gt;\n    )\n  }\n}\nexport default Child;<\/code><\/pre>\n<pre class=\"prettyprint linenums\" ><code>Counter.js\nimport React, { Component, Fragment } from &quot;react&quot;;\nimport Child from &#039;.\/child&#039;\nclass Counter extends Component {\nconstructor(props){\n  super(props); this.handleBtnClick=this.handleBtnClick.bind(this);\n  this.state={\n    counter:1\n  }\n}\nhandleBtnClick(){\n  const newCounter=this.state.counter+1;\n  this.setState({\n    counter:newCounter\n  })\n}\n  render () {\n    \/\/ console.log(&#039;render&#039;);\n    \/\/\u5f53\u7ec4\u4ef6\u521d\u6b21\u521b\u5efa\u7684\u65f6\u5019,render \u51fd\u6570\u4f1a\u88ab\u6267\u884c\u4e00\u6b21\n    \/\/\u5f53 state \u6570\u636e\u53d1\u751f\u53d8\u66f4\u7684\u65f6\u5019,render \u51fd\u6570\u4f1a\u88ab\u91cd\u65b0\u6267\u884c\n    \/\/\u5f53 props \u6570\u636e\u53d1\u751f\u53d8\u66f4\u7684\u65f6\u5019,render \u51fd\u6570\u4f1a\u88ab\u91cd\u65b0\u6267\u884c\n    return (\n      &lt;Fragment&gt;\n        &lt;button onClick={this.handleBtnClick}&gt;\u589e\u52a0&lt;\/button&gt;\n        &lt;Child number={this.state.counter}\/&gt;\n      &lt;\/Fragment&gt;\n    )\n  }\n}\nexport default Counter;<\/code><\/pre>\n<h2>React \u4e2d ref \u7684\u4f7f\u7528<\/h2>\n<ul>\n<li>ref \u5199\u548b html \u6807\u7b7e\u4e0a,\u83b7\u53d6\u7684\u662f dom \u8282\u70b9  <\/li>\n<li>ref={(button) =&gt; { this.buttonElem = button }}  <\/li>\n<li>handleBtnClick () {<br \/>\nconsole.log(this.buttonElem.clientTop);<\/li>\n<li>ref \u5199\u5728\u7ec4\u4ef6\u6807\u7b7e\u4e0a,\u83b7\u53d6\u7684\u662f\u7ec4\u4ef6\u7684 js \u5b9e\u4f8b<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>Counter.js\nimport React, { Component, Fragment } from &quot;react&quot;;\nclass Counter extends Component {\n ...\n  handleBtnClick () {\n    const newCounter = this.state.counter + 1;\n    console.log(this.divElem.innerHTML);\n    \/\/setState \u662f\u5f02\u6b65\u7684\n    this.setState(() =&gt; {\n      return {\n        counter: newCounter\n      }\n    }, () =&gt; {\n      console.log(this.divElem.innerHTML);\n    })\n  }\n  render () {\n    return (\n      &lt;Fragment&gt;\n        &lt;button onClick={this.handleBtnClick}&gt;\u589e\u52a0&lt;\/button&gt;\n        &lt;div ref={(div) =&gt; { this.divElem = div }}&gt;{this.state.counter}&lt;\/div&gt;\n      &lt;\/Fragment&gt;\n    )\n  }\n}\nexport default Counter;<\/code><\/pre>\n<h2>React \u4e2d\u7684\u751f\u547d\u5468\u671f\u51fd\u6570<\/h2>\n<ul>\n<li>\n<p>\u5728 React \u4e2d, \u751f\u547d\u5468\u671f\u51fd\u6570\u6307\u7684\u662f\u7ec4\u4ef6\u5728\u67d0\u4e00\u65f6\u523b\u4f1a\u81ea\u52a8\u6267\u884c\u7684\u51fd\u6570<\/p>\n<\/li>\n<li>\n<p>\u5f53\u6570\u636e\u53d1\u751f\u53d8\u5316\u65f6,render \u51fd\u6570 [\u751f\u547d\u5468\u671f\u51fd\u6570] \u4f1a\u88ab\u81ea\u52a8\u6267\u884c<br \/>\n<img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/202203101459314.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/202203101459314.png\" alt=\"\" \/><\/p><\/noscript>\n<\/li>\n<li>\n<p>counter.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component, Fragment } from &quot;react&quot;;\nimport Number from &quot;.\/number&quot;;\nclass Counter extends Component {\n  handleClick () {\n    const newNumber = this.state.number + 1;\n    this.setState({\n      number: newNumber\n    })\n  }\n  constructor(props) {\n    console.log(&#039;constructor&#039;)\n    super(props);\n    this.handleClick = this.handleClick.bind(this);\n    this.state = {\n      number: 1\n    }\n  }\n  \/\/\u6302\u8f7d\u524d\u81ea\u52a8\u6267\u884c\n  componentWillMount () {\n    console.log(&#039;componentWillMount&#039;);\n  }\n  \/\/\u6e32\u67d3\u65f6\u81ea\u52a8\u6267\u884c\n  \/\/\u7ec4\u4ef6\u66f4\u65b0\u524d componentWillUpdate \u4e4b\u540e  \u81ea\u52a8\u6267\u884c\n  render () {\n    console.log(&#039;render&#039;)\n    return (\n      &lt;div&gt;\n        &lt;div onClick={this.handleClick}&gt;hello world&lt;\/div&gt;\n        &lt;Number count={this.state.number} \/&gt;\n      &lt;\/div&gt;\n    )\n  }\n  \/\/\u6302\u8f7d\u540e\u81ea\u52a8\u6267\u884c\n  componentDidMount () {\n    console.log(&#039;componentDidMount&#039;);\n  }\n  \/\/\u66f4\u65b0\u524d\u81ea\u52a8\u6267\u884c\n  shouldComponentUpdate () {\n    console.log(&#039;shouldComponentUpdate&#039;);\n    return true;\/\/\u63d0\u5347\u7ec4\u4ef6\u66f4\u65b0\u7684\u6027\u80fd\n  }\n  \/\/\u7ec4\u4ef6\u66f4\u65b0\u524d shouldComponentUpdate \u4e4b\u540e  \u81ea\u52a8\u6267\u884c\n  componentWillUpdate () {\n    console.log(&#039;componentWillUpdate&#039;);\n  }\n  \/\/\u7ec4\u4ef6\u66f4\u65b0\u524d render \u81ea\u52a8\u6267\u884c\n  componentDidUpdate () {\n    console.log(&#039;componentDidUpdate&#039;);\n  }\n  \/\/\u7ec4\u4ef6\u4ece\u9875\u9762\u4e2d\u79fb\u9664\u524d \u81ea\u52a8\u6267\u884c\n  componentWillUnmount () {\n    console.log(&#039;componentWillUnmount&#039;);\n  }\n}\nexport default Counter;<\/code><\/pre>\n<ul>\n<li>number.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component } from &quot;react&quot;;\nclass Number extends Component {\n  componentWillReceiveProps(){\n    console.log(&#039;child componentWillReceiveProps ------------&#039;)\n  }\n  shouldComponentUpdate(){\n    console.log(&#039;child shouldComponentUpdate&#039;)\n    return true\n  }\n  componentWillMount () {\n    console.log(&#039;child componentWillMount&#039;)\n  }\n  render () {\n    console.log(&#039;child render&#039;)\n    return &lt;div&gt;{this.props.count}&lt;\/div&gt;\n  }\n  componentDidMount () {\n    console.log(&#039;child componentDidMount&#039;)\n  }\n}\nexport default Number;<\/code><\/pre>\n<h2>\u751f\u547d\u5468\u671f\u51fd\u6570\u4f7f\u7528\u5b9e\u4f8b<\/h2>\n<ul>\n<li>(1)<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component } from &quot;react&quot;;\nclass Counter extends Component {\n  render () {\n    return (\n      &lt;div&gt;Hello world&lt;\/div&gt;\n    )\n  }\n  \/\/\u9875\u9762\u4e00\u52a0\u8f7d\u7684\u65f6\u5019,\u5c31\u4f1a\u7ed9\u5168\u5c40\u5bf9\u8c61\u7ed1\u5b9a\u4e8b\u4ef6\n  componentDidMount () {\n    window.addEventListener(&#039;click&#039;, () =&gt; {\n      console.log(&#039;window click&#039;);\n    })\n  }\n}\nexport default Counter;<\/code><\/pre>\n<ul>\n<li>(2)<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component } from &quot;react&quot;;\nclass Counter extends Component {\n  handleClick(){\n    console.log(&#039;window click&#039;);\n  }\n  componentWillMount(){\n    window.addEventListener(&#039;click&#039;,this.handleClick)\n  }\n  render () {\n    return (\n      &lt;div&gt;Hello world&lt;\/div&gt;\n    )\n  }\n\/\/\u79fb\u9664\u6389,\u4e0d\u4f1a\u5f71\u54cd\u5176\u4ed6\u7ec4\u4ef6\n  componentWillUnmount(){\n    window.removeEventListener(&#039;click&#039;,this.handleClick)\n  }\n}\nexport default Counter;<\/code><\/pre>\n<ul>\n<li>(3)\u5f53\u6211\u4eec\u83b7\u53d6 ajax \u6570\u636e\u7684\u65f6\u5019,\u4f7f\u7528\u751f\u547d\u5468\u671f\u51fd\u6570<br \/>\nnpm install axios --save<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component } from &quot;react&quot;;\nimport axios from &#039;axios&#039;;\nclass Counter extends Component {\n  render () {\n    return (\n      &lt;div&gt;Hello world&lt;\/div&gt;\n    )\n  }\n  componentDidMount () {\n    const promise = axios.get(&#039;http:\/\/www.dell-lee.com\/react\/api\/demo.json&#039;)\n    promise.then((res) =&gt; {\n      console.log(res);\n    })\n  }\n}\nexport default Counter;<\/code><\/pre>\n<h2>3-1 Ant Design \u7ec4\u4ef6\u5e93\u7684\u4f7f\u7528<\/h2>\n<p>npm install antd --save<br \/>\n&quot;antd&quot;: &quot;^3.10.9&quot;,<\/p>\n<ul>\n<li>index.js<br \/>\nimport 'antd\/dist\/antd.css'; <\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component } from &quot;react&quot;;\nimport { List } from &#039;antd&#039;;\nconst data = [\n  &#039;Racing car sprays.&#039;,\n  &#039;Japanese princess.&#039;,\n];\nclass Counter extends Component {\n  render () {\n    return (\n      &lt;List\n        style={{\n          marginLeft: 20,\n          marginRight: 20,\n          marginTop: 20\n        }}\n        header={&lt;div&gt;Header&lt;\/div&gt;}\n        footer={&lt;div&gt;Footer&lt;\/div&gt;}\n        bordered\n        dataSource={data}\n        renderItem={item =&gt; (&lt;List.Item&gt;{item}&lt;\/List.Item&gt;)}\n      \/&gt;\n    )\n  }\n}\nexport default Counter; <\/code><\/pre>\n<p><img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022031120324481.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022031120324481.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>React \u4e2d\u7684\u524d\u7aef\u8def\u7531<\/h2>\n<p>npm install react-router-dom --save<br \/>\n&quot;react-router-dom&quot;: &quot;^4.3.1&quot;,<\/p>\n<ul>\n<li>newButton.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component } from &quot;react&quot;;\nimport { Button } from &#039;antd&#039;;\nimport { Link } from &#039;react-router-dom&#039;\nclass NewButton extends Component {\n  render () {\n    return (\n      &lt;Link to=&quot;\/list\/123&quot;&gt; &lt;Button type=&quot;primary&quot;&gt;\u6309\u94ae&lt;\/Button&gt;&lt;\/Link&gt;\n    )\n  }\n}\nexport default NewButton; <\/code><\/pre>\n<ul>\n<li>newList.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>\nimport React, { Component } from &quot;react&quot;;\nimport { List } from &#039;antd&#039;;\nconst data = [\n  &#039;Racing car sprays.&#039;,\n  &#039;Japanese princess.&#039;,\n];\nclass NewList extends Component {\n  render () {\n    console.log(this.props.match.params.id)\n    return (\n      &lt;List\n        style={{\n          marginLeft: 20,\n          marginRight: 20,\n          marginTop: 20\n        }}\n        header={&lt;div&gt;Header&lt;\/div&gt;}\n        footer={&lt;div&gt;Footer&lt;\/div&gt;}\n        bordered\n        dataSource={data}\n        renderItem={item =&gt; (&lt;List.Item&gt;{item}&lt;\/List.Item&gt;)}\n      \/&gt;\n    )\n  }\n}\nexport default NewList; <\/code><\/pre>\n<ul>\n<li>index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component } from &quot;react&quot;;\nimport ReactDom from &quot;react-dom&quot;;\nimport { BrowserRouter, Route } from &quot;react-router-dom&quot;;\nimport NewList from &#039;.\/newList&#039;;\nimport NewButton from &#039;.\/newButton&#039;;\n\/\/ import &#039;antd\/dist\/antd.css&#039;;\nclass Entry extends Component {\n  render () {\n    return (\n      &lt;BrowserRouter&gt;\n        &lt;div&gt;\n          &lt;Route path=&#039;\/list\/:id&#039; component={ NewList } \/&gt;\n          &lt;Route path=&#039;\/button&#039; component={ NewButton } \/&gt;\n        &lt;\/div&gt;\n      &lt;\/BrowserRouter&gt;\n    )\n  }\n}\nReactDom.render(&lt;Entry \/&gt;, document.getElementById(&#039;root&#039;)); <\/code><\/pre>\n<h1>\u9879\u76ee\uff1aReact \u5b9e\u73b0\u65b0\u95fb\u7f51\u7ad9<\/h1>\n<pre class=\"prettyprint linenums\" ><code>   &quot;antd&quot;: &quot;^3.10.9&quot;,\n    &quot;axios&quot;: &quot;^0.18.0&quot;,\n    &quot;react&quot;: &quot;^16.6.3&quot;,\n    &quot;react-dom&quot;: &quot;^16.6.3&quot;,\n    &quot;react-router-dom&quot;: &quot;^4.3.1&quot;,\n    &quot;react-scripts&quot;: &quot;2.1.1&quot;,\n    &quot;web-vitals&quot;: &quot;^2.1.4&quot;<\/code><\/pre>\n<h2>Header \u7ec4\u4ef6\u62c6\u5206\u53ca\u6837\u5f0f\u5e03\u5c40<\/h2>\n<h2>Ajax \u83b7\u53d6 Header \u7ec4\u4ef6\u6570\u636e<\/h2>\n<ul>\n<li>components-&gt;Header-&gt;index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component, Fragment } from &quot;react&quot;;\nimport { Menu, Icon } from &#039;antd&#039;;\nimport axios from &quot;axios&quot;;\nimport logo from &#039;.\/logo.png&#039;\nimport &#039;.\/style.css&#039;;\nclass AppHeader extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      list: []\n    }\n  }\n  getMenuItems () {\n    return this.state.list.map(item =&gt; {\n      return (\n        &lt;Menu.Item key={item.id}&gt;\n          &lt;Icon type={item.icon} \/&gt;{item.title}\n        &lt;\/Menu.Item&gt;\n      )\n    })\n  }\n  componentDidMount(){\n    axios.get(&#039;http:\/\/www.dell-lee.com\/react\/api\/header.json&#039;)\n    .then((res)=&gt;{\n      this.setState({\n        list:res.data.data\n      })\n    })\n  }\n  render () {\n    return (\n      &lt;Fragment&gt;\n        &lt;img src={logo} className=&#039;app-header-logo&#039; alt=&quot;&quot; \/&gt;\n        &lt;Menu mode=&quot;horizontal&quot; className=&quot;app-header-menu&quot;&gt;\n          {this.getMenuItems()}\n        &lt;\/Menu&gt;\n      &lt;\/Fragment&gt;\n    )\n  }\n}\nexport default AppHeader;<\/code><\/pre>\n<p><img data-original=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022031219234127.png\"  alt=\"\" \/><\/p>\n<noscript><img decoding=\"async\" src=\"http:\/\/djblog.odjbinail.cn\/wp-content\/uploads\/2022\/02\/2022031219234127.png\" alt=\"\" \/><\/p><\/noscript>\n<h2>\u5217\u8868\u9875\u9762\u7684\u5236\u4f5c\u53ca\u8def\u7531\u914d\u7f6e<\/h2>\n<ul>\n<li>src-&gt;index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import { BrowserRouter, Route, Switch } from &quot;react-router-dom&quot;;\nimport List from &#039;.\/containers\/List\/&#039;;\nimport Detail from &#039;.\/containers\/Detail\/&#039;;\n&lt;Content className=&quot;content&quot;&gt;\n          &lt;BrowserRouter&gt;\n            &lt;Switch&gt;\n              &lt;Route path=&#039;\/detail&#039; component={Detail} \/&gt;\n              &lt;Route path=&#039;\/&#039; component={List} \/&gt;\n            &lt;\/Switch&gt;\n          &lt;\/BrowserRouter&gt;\n        &lt;\/Content&gt;<\/code><\/pre>\n<ul>\n<li>src-&gt;containers-&gt;Detail-&gt;index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React,{ Component } from &quot;react&quot;;\nclass Detail extends Component{\n  render(){\n    return &lt;div&gt;Detail&lt;\/div&gt;\n  }\n}\nexport default Detail;<\/code><\/pre>\n<h2>\u4f7f\u7528\u52a8\u6001\u8def\u7531\u83b7\u53d6\u4e0d\u540c\u5217\u8868\u5185\u5bb9<\/h2>\n<ul>\n<li>\n<p>src-&gt;index.js<\/p>\n<p>\/\/ <appHeader \/>\u5982\u679c\u8981\u7528 Link \u8df3\u8f6c,\u5219\u5fc5\u987b\u5728 Router \u91cc\u9762<\/p>\n<p><browserRouter><br \/>\n  <layout><\/layout><br \/>\n  <\/browserRouter>\n<\/li>\n<li>\n<p>components-&gt;Header-&gt;index.js<\/p>\n<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import { Link } from &quot;react-router-dom&quot;;\ngetMenuItems () {\n    return this.state.list.map(item =&gt; {\n      return (\n        &lt;Menu.Item key={item.id}&gt;\n          &lt;Link to={`\/${item.id}`}&gt;\n            &lt; Icon type={item.icon} \/&gt;{item.title}\n          &lt;\/Link&gt;\n        &lt;\/Menu.Item &gt;\n      )\n    })\n  }<\/code><\/pre>\n<ul>\n<li>src-&gt;containers-&gt;List-&gt;index.js<\/li>\n<\/ul>\n<pre class=\"prettyprint linenums\" ><code>import React, { Component, Fragment } from &quot;react&quot;;\nimport { List, message } from &#039;antd&#039;;\nimport axios from &quot;axios&quot;;\nclass PageList extends Component {\n  componentWillReceiveProps (nextProps) {\n    const id = nextProps.match.params.id;\n    axios.get(&#039;http:\/\/www.dell-lee.com\/react\/api\/list.json?id=&#039; + id)\n      .then((res) =&gt; {\n        \/\/ console.log(res.data.data);\n        if (res.data.success) {\n          let list = res.data.data\n          if (list.length &gt; 0) {\n            this.setState({\n              data: list\n            });\n          } else {\n            message.info(&quot;\u67e5\u8be2\u7ed3\u679c\u4e3a\u7a7a!&quot;)\n          }\n        } else {\n          message.error(&quot;\u8bf7\u6c42\u5931\u8d25!&quot;)\n        }\n      })\n  }\n  constructor(props) {\n    super(props);\n    this.state = {\n      data: []\n    }\n  }\n  render () {\n    console.log(this.props.match.params.id);\n    return (\n      &lt;List\n        style={{ background: &#039;#fff&#039; }}\n        bordered\n        dataSource={this.state.data}\n        renderItem={(item) =&gt; (\n          &lt;Fragment&gt;\n            &lt;List.Item&gt; {item.title}\n            &lt;\/List.Item&gt;\n          &lt;\/Fragment&gt;\n        )}\n      \/&gt;\n    )\n  }\n  componentDidMount () {\n   let url=&#039;http:\/\/www.dell-lee.com\/react\/api\/list.json&#039;;\n    const id = this.props.match.params.id;\n    if(id){\n      url=url+&#039;?id=&#039;+id;\n    }\n    axios.get(url)\n      .then((res) =&gt; {\n        \/\/ console.log(res.data.data);\n        if (res.data.success) {\n          let list = res.data.data\n          if (list.length &gt; 0) {\n            this.setState({\n              data: list\n            });\n          } else {\n            message.info(&quot;\u67e5\u8be2\u7ed3\u679c\u4e3a\u7a7a!&quot;)\n          }\n        } else {\n          message.error(&quot;\u8bf7\u6c42\u5931\u8d25!&quot;)\n        }\n      })\n  }\n}\nexport default PageList;<\/code><\/pre>\n<h2>\u8be6\u60c5\u9875\u9762\u7684\u5236\u4f5c<\/h2>\n","protected":false},"excerpt":{"rendered":"<p>React \u5f00\u53d1\u73af\u5883\u51c6\u5907 \u4e0b\u8f7d\u4f9d\u8d56\u901f\u5ea6\u5feb npm install &#8211;registry=https:\/\/reg [&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-2871","post","type-post","status-publish","format-standard","hentry","category-web"],"_links":{"self":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2871","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=2871"}],"version-history":[{"count":2,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2871\/revisions"}],"predecessor-version":[{"id":4336,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=\/wp\/v2\/posts\/2871\/revisions\/4336"}],"wp:attachment":[{"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.odjbinail.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}