This commit is contained in:
2021-07-05 00:33:50 +08:00
parent 5e687e86cf
commit 07337a28ce
26 changed files with 231 additions and 35 deletions
+1
View File
@@ -0,0 +1 @@
高阶组件-轮播图
+1 -1
View File
@@ -45,7 +45,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8000;
const HOST = process.env.HOST || '0.0.0.0';
if (process.env.HOST) {
+29 -23
View File
@@ -1,25 +1,31 @@
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
import React from 'react'
import Swiper from './components/index'
import './components/app.css'
class App extends React.Component{
constructor(){
super()
this.state={
images:[]
}
}
componentDidMount(){
setTimeout(()=>{
let images=[
{src:"https://img.alicdn.com/tps/TB1QyGZLVXXXXa9XVXXXXXXXXXX-1130-500.jpg_q100.jpg_.webp",url:"https://pages.tmall.com/wow/a/act/tmall/tmc/23759/wupr?spm=875.7931836/B.2016006.d6.66144265aPX4zF&trackInfo=20160815100101;64866506034;287638;587431337429;3;287638_587431337429;1007.14152.68669.100200300000000;92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5;3;0;10000002&item_id=587431337429&pvid=92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5&pos=3&activity_id=287638&wh_pid=industry-170400&acm=07055.1003.1.2519102&scm=1003.1.20160815.OTHER_0_6801489"},
{src:"https://img.alicdn.com/tps/i4/i3/6000000003435/O1CN01fS1G4M1bFHA2rvIwi_!!6000000003435-0-ald.jpg_q100.jpg_.webp",url:"https://pages.tmall.com/wow/a/act/tmall/tmc/23759/wupr?spm=875.7931836/B.2016006.d1.66144265aPX4zF&trackInfo=20160815100101;64950842484;288994;530549532317;3;288994_530549532317;1007.14152.68669.100200300000000;92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5;1;0;10000002&item_id=530549532317&pvid=92ba02ea-a2a8-4bbe-99ac-d5c3abf2eba5&pos=1&activity_id=288994&wh_pid=industry-170636&acm=07055.1003.1.2519102&scm=1003.1.20160815.OTHER_0_6810849"},
{src:"https://img.alicdn.com/tfs/TB1_1OLxQL0gK0jSZFtXXXQCXXa-1130-500.jpg_q100.jpg_.webp",url:"https://www.tmall.com/wow/brand/act/fashion?acm=lb-zebra-2386-265936.1003.4.410386&scm=1003.4.lb-zebra-2386-265936.OTHER_1_410386&ali_trackid=19_4803ba43894904cab9c8c08820f2e4a5&spm=875.7931836/B.2016006.d2"}
];
this.setState({images:images})
},0)
}
render() {
return(
<div className="app">
<div className="banner">
<Swiper data={this.state.images}></Swiper>
</div>
</div>
)
}
}
export default App;
+5
View File
@@ -0,0 +1,5 @@
.box{width:100px;height:100px;background-color:#0000FF;position: absolute;z-index:1;left:0;top:0}
.box.active{background-color:#FF0000;}
.btn-bg{background-color:#0000FF!important;}
.banner{width:800px;height:350px;}
.app{width:100vw;height:100vh;}
+77
View File
@@ -0,0 +1,77 @@
import React from 'react';
function Hoc(WithComponent){
return class HocComponent extends React.Component{
constructor(){
super()
this.state={}
this.isInit=true;
this.Data=[];
this.timer=null;
this.index=0;
}
componentDidMount(){
this.autoPlay()
}
autoPlay(){
this.timer=setInterval(()=>{
if(this.Data && this.Data.length>0){
this.isInit=false;
for(let i=0;i<this.Data.length;i++){
if(this.Data[i].active){
this.Data[i].active=false;
break;
}
}
if(this.index>=this.Data.length-1){
this.index=0;
}else {
this.index++;
}
this.Data[this.index].active=true;
this.setState({});
}
},2000)
}
stopPlay(){
clearInterval(this.timer)
}
changeImg=(index)=>{
this.isInit=false;
this.index=index;
if(this.Data && this.Data.length>0){
for(let i=0;i<this.Data.length;i++){
if(this.Data[i].active){
this.Data[i].active=false;
break;
}
};
this.Data[index].active=true;
this.setState({});
}
}
render(){
this.Data=this.props.data;
if(this.Data && this.Data.length>0 && this.isInit){
for(let i=0;i<this.Data.length;i++){
if(i==1){
this.Data[i].active=true;
}
else {
this.Data[i].active = false;
}
}
}
return (
<WithComponent
// {...this.props}
changeImg={this.changeImg.bind(this)}
stopPlay={this.stopPlay.bind(this)}
autoPlay={this.autoPlay.bind(this)}
chenxuan="xxxxxxxxxx">
</WithComponent>
)
}
}
}
export default Hoc
+34
View File
@@ -0,0 +1,34 @@
import React from 'react'
import Hoc from './hoc';
import './style.css'
export default Hoc((props)=>{
let aData=props.data;
return(
<div className="myswiper"
onMouseOver={props.stopPlay.bind(this)}
onMouseOut={props.autoPlay.bind(this)}
>
{
(aData && aData.length>0) && aData.map((item,index)=>{
return (
<div className={item.active ? "slide show" : "slide"} key={index}>
<a href={item.url} rel="noopener noreferrer" target="_blank">
<img src={item.src} alt=""/>
</a>
</div>
)
})
}
<div className="pagination">
{
(aData && aData.length>0) && aData.map((item,index)=>{
return (
<div className={item.active ? "dot active" :"dot"} key={index} onClick={props.changeImg.bind(this,index)}></div>
)
})
}
</div>
</div>
)
})
+47
View File
@@ -0,0 +1,47 @@
.myswiper{
position: relative;
width:600px;
height: 200px;
margin: 100px auto 0;
border: 1px solid red;
}
.myswiper .slide{
width:100%;
height:100%;
position: absolute;
z-index:1;
left:0px;
top:0px;
opacity:0;
transition:opacity 0.5s;
}
.myswiper .slide.show{
opacity: 1;
z-index: 2;
}
.myswiper .slide img{
width:100%;
height:100%;
border:0 none;
}
.myswiper .pagination{
width:auto;
height:auto;
position: absolute;
z-index: 3;
left:50%;
bottom:8%;
transform: translateX(-50%);
}
.myswiper .pagination .dot{
width:30px;
height:8px;
background-color:rgba(0,0,0,0.8);
cursor:pointer;
display: inline-block;
margin-left:2.5px;
margin-right:2.5px;
}
.myswiper .pagination .dot.active{
background-color:rgba(255,255,255,0.8)
}
+2 -2
View File
@@ -23,8 +23,8 @@ function Hehe(WithComponent){
<React.Fragment>
<li>{this.state.userName}</li>
<WithComponent
{...this.props}
{...newProps}
{...this.props}
{...newProps}
>
</WithComponent>
</React.Fragment>
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n setTitle1 = _useState2[1];\n\n const _useState3 = useState(\"chenxuan\"),\n _useState4 = _slicedToArray(_useState3, 2),\n chenxuan = _useState4[0],\n setChenxuan = _useState4[1];\n\n function change() {\n setTitle1(\"呵呵呵!\");\n }\n\n ;\n\n function changeName() {\n setChenxuan(\"帅哥\");\n }\n\n useEffect(() => {\n console.log(\"触发了!\");\n });\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16\n },\n __self: this\n }, title), React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 17\n },\n __self: this\n }, chenxuan), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 18\n },\n __self: this\n }, \"click1\"), React.createElement(\"button\", {\n type: \"button\",\n onClick: changeName.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 19\n },\n __self: this\n }, \"click2\"));\n}\n\nexport default App; // 1 useEffect 相当于componentDidMount componentDidUpdate componentWillUnmount\n//2、为避免每次都触发副作用函数,useEffect可传入第二个参数,当该值发生变化时才会触发副作用函数","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","setTitle1","chenxuan","setChenxuan","change","changeName","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACcF,QAAQ,CAAC,IAAD,CADtB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,SADH;;AAAA,qBAEmBJ,QAAQ,CAAC,UAAD,CAF3B;AAAA;AAAA,QAEHK,QAFG;AAAA,QAEMC,WAFN;;AAGV,WAASC,MAAT,GAAiB;AACbH,IAAAA,SAAS,CAAC,MAAD,CAAT;AACH;;AAAA;;AACD,WAASI,UAAT,GAAqB;AACjBF,IAAAA,WAAW,CAAC,IAAD,CAAX;AACH;;AACDL,EAAAA,SAAS,CAAC,MAAI;AACVQ,IAAAA,OAAO,CAACC,GAAR,CAAY,MAAZ;AACH,GAFQ,CAAT;AAGA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKP,KAAL,CADA,EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKE,QAAL,CAFA,EAGC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACI,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAHD,EAIC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEH,UAAU,CAACG,IAAX,CAAgB,IAAhB,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAJD,CADJ;AAQH;;AAED,eAAeT,GAAf,C,CACA;AACA","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,setTitle1]=useState('首页');\n const [chenxuan,setChenxuan]=useState(\"chenxuan\")\n function change(){\n setTitle1(\"呵呵呵!\")\n };\n function changeName(){\n setChenxuan(\"帅哥\")\n }\n useEffect(()=>{\n console.log(\"触发了!\")\n })\n return (\n <div>\n <li>{title}</li>\n <li>{chenxuan}</li>\n <button type=\"button\" onClick={change.bind(this)}>click1</button>\n <button type=\"button\" onClick={changeName.bind(this)}>click2</button>\n </div>\n )\n}\n\nexport default App;\n// 1 useEffect 相当于componentDidMount componentDidUpdate componentWillUnmount\n//2、为避免每次都触发副作用函数,useEffect可传入第二个参数,当该值发生变化时才会触发副作用函数\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n setTitle1 = _useState2[1];\n\n function change() {\n setTitle1(\"呵呵呵!\");\n }\n\n ;\n useEffect(() => {\n document.title = title;\n return () => {\n console.log(\"xxxx!\");\n };\n });\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 14\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15\n },\n __self: this\n }, title), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16\n },\n __self: this\n }, \"click\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","setTitle1","change","document","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACcF,QAAQ,CAAC,IAAD,CADtB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,SADH;;AAEV,WAASC,MAAT,GAAiB;AACbD,IAAAA,SAAS,CAAC,MAAD,CAAT;AACH;;AAAA;AACDH,EAAAA,SAAS,CAAC,MAAI;AACVK,IAAAA,QAAQ,CAACH,KAAT,GAAeA,KAAf;AACA,WAAO,MAAI;AACPI,MAAAA,OAAO,CAACC,GAAR,CAAY,OAAZ;AACH,KAFD;AAGH,GALQ,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKL,KAAL,CADA,EAEC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACI,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAFD,CADJ;AAMH;;AAED,eAAeP,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,setTitle1]=useState('首页')\n function change(){\n setTitle1(\"呵呵呵!\")\n };\n useEffect(()=>{\n document.title=title;\n return ()=>{\n console.log(\"xxxx!\")\n }\n })\n return (\n <div>\n <li>{title}</li>\n <button type=\"button\" onClick={change.bind(this)}>click</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n setTitle1 = _useState2[1];\n\n function change() {\n setTitle1(\"呵呵呵!\");\n }\n\n ;\n useEffect(() => {\n document.title = title;\n return () => {\n console.log(\"xxxx!\");\n };\n }, []);\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 14\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15\n },\n __self: this\n }, title), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16\n },\n __self: this\n }, \"click\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","setTitle1","change","document","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACcF,QAAQ,CAAC,IAAD,CADtB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,SADH;;AAEV,WAASC,MAAT,GAAiB;AACbD,IAAAA,SAAS,CAAC,MAAD,CAAT;AACH;;AAAA;AACDH,EAAAA,SAAS,CAAC,MAAI;AACVK,IAAAA,QAAQ,CAACH,KAAT,GAAeA,KAAf;AACA,WAAO,MAAI;AACPI,MAAAA,OAAO,CAACC,GAAR,CAAY,OAAZ;AACH,KAFD;AAGH,GALQ,EAKP,EALO,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKL,KAAL,CADA,EAEC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACI,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAFD,CADJ;AAMH;;AAED,eAAeP,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,setTitle1]=useState('首页')\n function change(){\n setTitle1(\"呵呵呵!\")\n };\n useEffect(()=>{\n document.title=title;\n return ()=>{\n console.log(\"xxxx!\")\n }\n },[])\n return (\n <div>\n <li>{title}</li>\n <button type=\"button\" onClick={change.bind(this)}>click</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n hehe = _useState2[1];\n\n function change() {\n hehe(\"呵呵呵!\");\n }\n\n ;\n useEffect(() => {\n document.title = title;\n return () => {\n console.log(\"xxxx!\");\n };\n }, [title]);\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 14\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15\n },\n __self: this\n }, title), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16\n },\n __self: this\n }, \"click\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","hehe","change","document","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACSF,QAAQ,CAAC,IAAD,CADjB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,IADH;;AAEV,WAASC,MAAT,GAAiB;AACbD,IAAAA,IAAI,CAAC,MAAD,CAAJ;AACH;;AAAA;AACDH,EAAAA,SAAS,CAAC,MAAI;AACVK,IAAAA,QAAQ,CAACH,KAAT,GAAeA,KAAf;AACA,WAAO,MAAI;AACPI,MAAAA,OAAO,CAACC,GAAR,CAAY,OAAZ;AACH,KAFD;AAGH,GALQ,EAKP,CAACL,KAAD,CALO,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKA,KAAL,CADA,EAEC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACI,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAFD,CADJ;AAMH;;AAED,eAAeP,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,hehe]=useState('首页')\n function change(){\n hehe(\"呵呵呵!\")\n };\n useEffect(()=>{\n document.title=title;\n return ()=>{\n console.log(\"xxxx!\")\n }\n },[title])\n return (\n <div>\n <li>{title}</li>\n <button type=\"button\" onClick={change.bind(this)}>click</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n hehe = _useState2[1];\n\n function change() {\n hehe(\"呵呵呵!\");\n }\n\n ;\n useEffect(() => {\n change(); // document.title=title;\n\n return () => {\n console.log(\"xxxx!\");\n };\n }, [title]);\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16\n },\n __self: this\n }, title), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 17\n },\n __self: this\n }, \"click\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","hehe","change","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACSF,QAAQ,CAAC,IAAD,CADjB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,IADH;;AAEV,WAASC,MAAT,GAAiB;AACbD,IAAAA,IAAI,CAAC,MAAD,CAAJ;AACH;;AAAA;AACDH,EAAAA,SAAS,CAAC,MAAI;AACVI,IAAAA,MAAM,GADI,CAEV;;AACA,WAAO,MAAI;AACPC,MAAAA,OAAO,CAACC,GAAR,CAAY,OAAZ;AACH,KAFD;AAGH,GANQ,EAMP,CAACJ,KAAD,CANO,CAAT;AAOA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKA,KAAL,CADA,EAEC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACG,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAFD,CADJ;AAMH;;AAED,eAAeN,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,hehe]=useState('首页')\n function change(){\n hehe(\"呵呵呵!\")\n };\n useEffect(()=>{\n change()\n // document.title=title;\n return ()=>{\n console.log(\"xxxx!\")\n }\n },[title])\n return (\n <div>\n <li>{title}</li>\n <button type=\"button\" onClick={change.bind(this)}>click</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n setTitle1 = _useState2[1];\n\n const _useState3 = useState(\"chenxuan\"),\n _useState4 = _slicedToArray(_useState3, 2),\n chenxuan = _useState4[0],\n setChenxuan = _useState4[1];\n\n function change() {\n setTitle1(\"呵呵呵!\");\n }\n\n ;\n\n function changeName() {\n setChenxuan(\"帅哥\");\n }\n\n useEffect(() => {\n console.log(\"触发了!\");\n return () => {\n console.log(\"页面离开了!\");\n };\n }, [title]);\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 18\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 19\n },\n __self: this\n }, title), React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 20\n },\n __self: this\n }, chenxuan), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 21\n },\n __self: this\n }, \"click1\"), React.createElement(\"button\", {\n type: \"button\",\n onClick: changeName.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 22\n },\n __self: this\n }, \"click1\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","setTitle1","chenxuan","setChenxuan","change","changeName","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACcF,QAAQ,CAAC,IAAD,CADtB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,SADH;;AAAA,qBAEmBJ,QAAQ,CAAC,UAAD,CAF3B;AAAA;AAAA,QAEHK,QAFG;AAAA,QAEMC,WAFN;;AAGV,WAASC,MAAT,GAAiB;AACbH,IAAAA,SAAS,CAAC,MAAD,CAAT;AACH;;AAAA;;AACD,WAASI,UAAT,GAAqB;AACjBF,IAAAA,WAAW,CAAC,IAAD,CAAX;AACH;;AACDL,EAAAA,SAAS,CAAC,MAAI;AACVQ,IAAAA,OAAO,CAACC,GAAR,CAAY,MAAZ;AACA,WAAO,MAAI;AACPD,MAAAA,OAAO,CAACC,GAAR,CAAY,QAAZ;AACH,KAFD;AAGH,GALQ,EAKP,CAACP,KAAD,CALO,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKA,KAAL,CADA,EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKE,QAAL,CAFA,EAGC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACI,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAHD,EAIC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEH,UAAU,CAACG,IAAX,CAAgB,IAAhB,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAJD,CADJ;AAQH;;AAED,eAAeT,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,setTitle1]=useState('首页');\n const [chenxuan,setChenxuan]=useState(\"chenxuan\")\n function change(){\n setTitle1(\"呵呵呵!\")\n };\n function changeName(){\n setChenxuan(\"帅哥\")\n }\n useEffect(()=>{\n console.log(\"触发了!\")\n return ()=>{\n console.log(\"页面离开了!\")\n }\n },[title])\n return (\n <div>\n <li>{title}</li>\n <li>{chenxuan}</li>\n <button type=\"button\" onClick={change.bind(this)}>click1</button>\n <button type=\"button\" onClick={changeName.bind(this)}>click1</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n setTitle1 = _useState2[1];\n\n const _useState3 = useState(\"chenxuan\"),\n _useState4 = _slicedToArray(_useState3, 2),\n chenxuan = _useState4[0],\n setChenxuan = _useState4[1];\n\n function change() {\n setTitle1(\"呵呵呵!\");\n }\n\n ;\n\n function changeName() {\n setChenxuan(\"帅哥\");\n }\n\n useEffect(() => {\n document.title = title;\n return () => {\n console.log(\"页面离开了!\");\n };\n }, [title]);\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 18\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 19\n },\n __self: this\n }, title), React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 20\n },\n __self: this\n }, chenxuan), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 21\n },\n __self: this\n }, \"click1\"), React.createElement(\"button\", {\n type: \"button\",\n onClick: changeName.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 22\n },\n __self: this\n }, \"click1\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","setTitle1","chenxuan","setChenxuan","change","changeName","document","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACcF,QAAQ,CAAC,IAAD,CADtB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,SADH;;AAAA,qBAEmBJ,QAAQ,CAAC,UAAD,CAF3B;AAAA;AAAA,QAEHK,QAFG;AAAA,QAEMC,WAFN;;AAGV,WAASC,MAAT,GAAiB;AACbH,IAAAA,SAAS,CAAC,MAAD,CAAT;AACH;;AAAA;;AACD,WAASI,UAAT,GAAqB;AACjBF,IAAAA,WAAW,CAAC,IAAD,CAAX;AACH;;AACDL,EAAAA,SAAS,CAAC,MAAI;AACVQ,IAAAA,QAAQ,CAACN,KAAT,GAAeA,KAAf;AACA,WAAO,MAAI;AACPO,MAAAA,OAAO,CAACC,GAAR,CAAY,QAAZ;AACH,KAFD;AAGH,GALQ,EAKP,CAACR,KAAD,CALO,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKA,KAAL,CADA,EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKE,QAAL,CAFA,EAGC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACK,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAHD,EAIC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEJ,UAAU,CAACI,IAAX,CAAgB,IAAhB,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAJD,CADJ;AAQH;;AAED,eAAeV,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,setTitle1]=useState('首页');\n const [chenxuan,setChenxuan]=useState(\"chenxuan\")\n function change(){\n setTitle1(\"呵呵呵!\")\n };\n function changeName(){\n setChenxuan(\"帅哥\")\n }\n useEffect(()=>{\n document.title=title;\n return ()=>{\n console.log(\"页面离开了!\")\n }\n },[title])\n return (\n <div>\n <li>{title}</li>\n <li>{chenxuan}</li>\n <button type=\"button\" onClick={change.bind(this)}>click1</button>\n <button type=\"button\" onClick={changeName.bind(this)}>click1</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n setTitle1 = _useState2[1];\n\n const _useState3 = useState(\"chenxuan\"),\n _useState4 = _slicedToArray(_useState3, 2),\n chenxuan = _useState4[0],\n setChenxuan = _useState4[1];\n\n function change() {\n setTitle1(\"呵呵呵!\");\n }\n\n ;\n\n function changeName() {\n setChenxuan(\"帅哥\");\n }\n\n useEffect(() => {\n console.log(\"触发了!\");\n });\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16\n },\n __self: this\n }, title), React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 17\n },\n __self: this\n }, chenxuan), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 18\n },\n __self: this\n }, \"click1\"), React.createElement(\"button\", {\n type: \"button\",\n onClick: changeName.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 19\n },\n __self: this\n }, \"click2\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","setTitle1","chenxuan","setChenxuan","change","changeName","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACcF,QAAQ,CAAC,IAAD,CADtB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,SADH;;AAAA,qBAEmBJ,QAAQ,CAAC,UAAD,CAF3B;AAAA;AAAA,QAEHK,QAFG;AAAA,QAEMC,WAFN;;AAGV,WAASC,MAAT,GAAiB;AACbH,IAAAA,SAAS,CAAC,MAAD,CAAT;AACH;;AAAA;;AACD,WAASI,UAAT,GAAqB;AACjBF,IAAAA,WAAW,CAAC,IAAD,CAAX;AACH;;AACDL,EAAAA,SAAS,CAAC,MAAI;AACVQ,IAAAA,OAAO,CAACC,GAAR,CAAY,MAAZ;AACH,GAFQ,CAAT;AAGA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKP,KAAL,CADA,EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKE,QAAL,CAFA,EAGC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACI,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAHD,EAIC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEH,UAAU,CAACG,IAAX,CAAgB,IAAhB,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAJD,CADJ;AAQH;;AAED,eAAeT,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,setTitle1]=useState('首页');\n const [chenxuan,setChenxuan]=useState(\"chenxuan\")\n function change(){\n setTitle1(\"呵呵呵!\")\n };\n function changeName(){\n setChenxuan(\"帅哥\")\n }\n useEffect(()=>{\n console.log(\"触发了!\")\n })\n return (\n <div>\n <li>{title}</li>\n <li>{chenxuan}</li>\n <button type=\"button\" onClick={change.bind(this)}>click1</button>\n <button type=\"button\" onClick={changeName.bind(this)}>click2</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n hehe = _useState2[1];\n\n function change() {\n hehe(\"呵呵呵!\");\n }\n\n ;\n useEffect(() => {\n change();\n return () => {\n console.log(\"xxxx!\");\n };\n });\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 14\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15\n },\n __self: this\n }, title), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16\n },\n __self: this\n }, \"click\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","hehe","change","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACSF,QAAQ,CAAC,IAAD,CADjB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,IADH;;AAEV,WAASC,MAAT,GAAiB;AACbD,IAAAA,IAAI,CAAC,MAAD,CAAJ;AACH;;AAAA;AACDH,EAAAA,SAAS,CAAC,MAAI;AACVI,IAAAA,MAAM;AACN,WAAO,MAAI;AACPC,MAAAA,OAAO,CAACC,GAAR,CAAY,OAAZ;AACH,KAFD;AAGH,GALQ,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKJ,KAAL,CADA,EAEC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACG,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAFD,CADJ;AAMH;;AAED,eAAeN,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,hehe]=useState('首页')\n function change(){\n hehe(\"呵呵呵!\")\n };\n useEffect(()=>{\n change()\n return ()=>{\n console.log(\"xxxx!\")\n }\n })\n return (\n <div>\n <li>{title}</li>\n <button type=\"button\" onClick={change.bind(this)}>click</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n setTitle1 = _useState2[1];\n\n function change() {\n setTitle1(\"呵呵呵!\");\n }\n\n ;\n useEffect(() => {\n document.title = title;\n return () => {\n console.log(\"xxxx!\");\n };\n }, [title]);\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 14\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15\n },\n __self: this\n }, title), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16\n },\n __self: this\n }, \"click\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","setTitle1","change","document","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACcF,QAAQ,CAAC,IAAD,CADtB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,SADH;;AAEV,WAASC,MAAT,GAAiB;AACbD,IAAAA,SAAS,CAAC,MAAD,CAAT;AACH;;AAAA;AACDH,EAAAA,SAAS,CAAC,MAAI;AACVK,IAAAA,QAAQ,CAACH,KAAT,GAAeA,KAAf;AACA,WAAO,MAAI;AACPI,MAAAA,OAAO,CAACC,GAAR,CAAY,OAAZ;AACH,KAFD;AAGH,GALQ,EAKP,CAACL,KAAD,CALO,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKA,KAAL,CADA,EAEC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACI,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAFD,CADJ;AAMH;;AAED,eAAeP,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,setTitle1]=useState('首页')\n function change(){\n setTitle1(\"呵呵呵!\")\n };\n useEffect(()=>{\n document.title=title;\n return ()=>{\n console.log(\"xxxx!\")\n }\n },[title])\n return (\n <div>\n <li>{title}</li>\n <button type=\"button\" onClick={change.bind(this)}>click</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n setTitle1 = _useState2[1];\n\n const _useState3 = useState(\"chenxuan\"),\n _useState4 = _slicedToArray(_useState3, 2),\n chenxuan = _useState4[0],\n setChenxuan = _useState4[1];\n\n function change() {\n setTitle1(\"呵呵呵!\");\n }\n\n ;\n\n function changeName() {\n setChenxuan(\"帅哥\");\n }\n\n useEffect(() => {\n console.log(\"触发了!\"); // return ()=>{\n // console.log(\"页面离开了!\")\n // }\n });\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 18\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 19\n },\n __self: this\n }, title), React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 20\n },\n __self: this\n }, chenxuan), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 21\n },\n __self: this\n }, \"click1\"), React.createElement(\"button\", {\n type: \"button\",\n onClick: changeName.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 22\n },\n __self: this\n }, \"click2\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","setTitle1","chenxuan","setChenxuan","change","changeName","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACcF,QAAQ,CAAC,IAAD,CADtB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,SADH;;AAAA,qBAEmBJ,QAAQ,CAAC,UAAD,CAF3B;AAAA;AAAA,QAEHK,QAFG;AAAA,QAEMC,WAFN;;AAGV,WAASC,MAAT,GAAiB;AACbH,IAAAA,SAAS,CAAC,MAAD,CAAT;AACH;;AAAA;;AACD,WAASI,UAAT,GAAqB;AACjBF,IAAAA,WAAW,CAAC,IAAD,CAAX;AACH;;AACDL,EAAAA,SAAS,CAAC,MAAI;AACVQ,IAAAA,OAAO,CAACC,GAAR,CAAY,MAAZ,EADU,CAEV;AACA;AACA;AACH,GALQ,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKP,KAAL,CADA,EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKE,QAAL,CAFA,EAGC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACI,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAHD,EAIC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEH,UAAU,CAACG,IAAX,CAAgB,IAAhB,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAJD,CADJ;AAQH;;AAED,eAAeT,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,setTitle1]=useState('首页');\n const [chenxuan,setChenxuan]=useState(\"chenxuan\")\n function change(){\n setTitle1(\"呵呵呵!\")\n };\n function changeName(){\n setChenxuan(\"帅哥\")\n }\n useEffect(()=>{\n console.log(\"触发了!\")\n // return ()=>{\n // console.log(\"页面离开了!\")\n // }\n })\n return (\n <div>\n <li>{title}</li>\n <li>{chenxuan}</li>\n <button type=\"button\" onClick={change.bind(this)}>click1</button>\n <button type=\"button\" onClick={changeName.bind(this)}>click2</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n hehe = _useState2[1];\n\n function change() {\n hehe(\"呵呵呵!\");\n }\n\n ;\n useEffect(() => {\n // document.title=title;\n return () => {\n console.log(\"xxxx!\");\n };\n }, [title]);\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 14\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15\n },\n __self: this\n }, title), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16\n },\n __self: this\n }, \"click\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","hehe","change","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACSF,QAAQ,CAAC,IAAD,CADjB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,IADH;;AAEV,WAASC,MAAT,GAAiB;AACbD,IAAAA,IAAI,CAAC,MAAD,CAAJ;AACH;;AAAA;AACDH,EAAAA,SAAS,CAAC,MAAI;AACV;AACA,WAAO,MAAI;AACPK,MAAAA,OAAO,CAACC,GAAR,CAAY,OAAZ;AACH,KAFD;AAGH,GALQ,EAKP,CAACJ,KAAD,CALO,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKA,KAAL,CADA,EAEC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACG,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAFD,CADJ;AAMH;;AAED,eAAeN,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,hehe]=useState('首页')\n function change(){\n hehe(\"呵呵呵!\")\n };\n useEffect(()=>{\n // document.title=title;\n return ()=>{\n console.log(\"xxxx!\")\n }\n },[title])\n return (\n <div>\n <li>{title}</li>\n <button type=\"button\" onClick={change.bind(this)}>click</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n setTitle1 = _useState2[1];\n\n const _useState3 = useState(\"chenxuan\"),\n _useState4 = _slicedToArray(_useState3, 2),\n chenxuan = _useState4[0],\n setChenxuan = _useState4[1];\n\n function change() {\n setTitle1(\"呵呵呵!\");\n }\n\n ;\n\n function changeName() {\n setChenxuan(\"帅哥\");\n }\n\n useEffect(() => {\n console.log(\"触发了!\"); // return ()=>{\n // console.log(\"页面离开了!\")\n // }\n }, [title]);\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 18\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 19\n },\n __self: this\n }, title), React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 20\n },\n __self: this\n }, chenxuan), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 21\n },\n __self: this\n }, \"click1\"), React.createElement(\"button\", {\n type: \"button\",\n onClick: changeName.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 22\n },\n __self: this\n }, \"click2\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","setTitle1","chenxuan","setChenxuan","change","changeName","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACcF,QAAQ,CAAC,IAAD,CADtB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,SADH;;AAAA,qBAEmBJ,QAAQ,CAAC,UAAD,CAF3B;AAAA;AAAA,QAEHK,QAFG;AAAA,QAEMC,WAFN;;AAGV,WAASC,MAAT,GAAiB;AACbH,IAAAA,SAAS,CAAC,MAAD,CAAT;AACH;;AAAA;;AACD,WAASI,UAAT,GAAqB;AACjBF,IAAAA,WAAW,CAAC,IAAD,CAAX;AACH;;AACDL,EAAAA,SAAS,CAAC,MAAI;AACVQ,IAAAA,OAAO,CAACC,GAAR,CAAY,MAAZ,EADU,CAEV;AACA;AACA;AACH,GALQ,EAKP,CAACP,KAAD,CALO,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKA,KAAL,CADA,EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKE,QAAL,CAFA,EAGC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACI,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAHD,EAIC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEH,UAAU,CAACG,IAAX,CAAgB,IAAhB,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAJD,CADJ;AAQH;;AAED,eAAeT,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,setTitle1]=useState('首页');\n const [chenxuan,setChenxuan]=useState(\"chenxuan\")\n function change(){\n setTitle1(\"呵呵呵!\")\n };\n function changeName(){\n setChenxuan(\"帅哥\")\n }\n useEffect(()=>{\n console.log(\"触发了!\")\n // return ()=>{\n // console.log(\"页面离开了!\")\n // }\n },[title])\n return (\n <div>\n <li>{title}</li>\n <li>{chenxuan}</li>\n <button type=\"button\" onClick={change.bind(this)}>click1</button>\n <button type=\"button\" onClick={changeName.bind(this)}>click2</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n setTitle1 = _useState2[1];\n\n const _useState3 = useState(\"chenxuan\"),\n _useState4 = _slicedToArray(_useState3, 2),\n chenxuan = _useState4[0],\n setChenxuan = _useState4[1];\n\n function change() {\n setTitle1(\"呵呵呵!\");\n }\n\n ;\n\n function changeName() {\n setChenxuan(\"帅哥\");\n }\n\n useEffect(() => {\n console.log(\"触发了!\"); // return ()=>{\n // console.log(\"页面离开了!\")\n // }\n }, [title]);\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 18\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 19\n },\n __self: this\n }, title), React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 20\n },\n __self: this\n }, chenxuan), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 21\n },\n __self: this\n }, \"click1\"), React.createElement(\"button\", {\n type: \"button\",\n onClick: changeName.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 22\n },\n __self: this\n }, \"click1\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","setTitle1","chenxuan","setChenxuan","change","changeName","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACcF,QAAQ,CAAC,IAAD,CADtB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,SADH;;AAAA,qBAEmBJ,QAAQ,CAAC,UAAD,CAF3B;AAAA;AAAA,QAEHK,QAFG;AAAA,QAEMC,WAFN;;AAGV,WAASC,MAAT,GAAiB;AACbH,IAAAA,SAAS,CAAC,MAAD,CAAT;AACH;;AAAA;;AACD,WAASI,UAAT,GAAqB;AACjBF,IAAAA,WAAW,CAAC,IAAD,CAAX;AACH;;AACDL,EAAAA,SAAS,CAAC,MAAI;AACVQ,IAAAA,OAAO,CAACC,GAAR,CAAY,MAAZ,EADU,CAEV;AACA;AACA;AACH,GALQ,EAKP,CAACP,KAAD,CALO,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKA,KAAL,CADA,EAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKE,QAAL,CAFA,EAGC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACI,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAHD,EAIC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEH,UAAU,CAACG,IAAX,CAAgB,IAAhB,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAJD,CADJ;AAQH;;AAED,eAAeT,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,setTitle1]=useState('首页');\n const [chenxuan,setChenxuan]=useState(\"chenxuan\")\n function change(){\n setTitle1(\"呵呵呵!\")\n };\n function changeName(){\n setChenxuan(\"帅哥\")\n }\n useEffect(()=>{\n console.log(\"触发了!\")\n // return ()=>{\n // console.log(\"页面离开了!\")\n // }\n },[title])\n return (\n <div>\n <li>{title}</li>\n <li>{chenxuan}</li>\n <button type=\"button\" onClick={change.bind(this)}>click1</button>\n <button type=\"button\" onClick={changeName.bind(this)}>click1</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
@@ -0,0 +1 @@
{"ast":null,"code":"import _slicedToArray from \"/Users/chenxuan/Documents/code/REACT/hooks/1/node_modules/@babel/runtime/helpers/esm/slicedToArray\";\nvar _jsxFileName = \"/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js\";\nimport React, { useState, useEffect } from 'react';\n\nfunction App() {\n const _useState = useState('首页'),\n _useState2 = _slicedToArray(_useState, 2),\n title = _useState2[0],\n hehe = _useState2[1];\n\n function change() {\n hehe(\"呵呵呵!\");\n }\n\n ;\n useEffect(() => {\n change();\n return () => {\n console.log(\"xxxx!\");\n };\n }, [title]);\n return React.createElement(\"div\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 14\n },\n __self: this\n }, React.createElement(\"li\", {\n __source: {\n fileName: _jsxFileName,\n lineNumber: 15\n },\n __self: this\n }, title), React.createElement(\"button\", {\n type: \"button\",\n onClick: change.bind(this),\n __source: {\n fileName: _jsxFileName,\n lineNumber: 16\n },\n __self: this\n }, \"click\"));\n}\n\nexport default App;","map":{"version":3,"sources":["/Users/chenxuan/Documents/code/REACT/hooks/1/src/App.js"],"names":["React","useState","useEffect","App","title","hehe","change","console","log","bind"],"mappings":";;AAAA,OAAOA,KAAP,IAAcC,QAAd,EAAuBC,SAAvB,QAAuC,OAAvC;;AACA,SAASC,GAAT,GAAc;AAAA,oBACSF,QAAQ,CAAC,IAAD,CADjB;AAAA;AAAA,QACHG,KADG;AAAA,QACGC,IADH;;AAEV,WAASC,MAAT,GAAiB;AACbD,IAAAA,IAAI,CAAC,MAAD,CAAJ;AACH;;AAAA;AACDH,EAAAA,SAAS,CAAC,MAAI;AACVI,IAAAA,MAAM;AACN,WAAO,MAAI;AACPC,MAAAA,OAAO,CAACC,GAAR,CAAY,OAAZ;AACH,KAFD;AAGH,GALQ,EAKP,CAACJ,KAAD,CALO,CAAT;AAMA,SACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAAKA,KAAL,CADA,EAEC;AAAQ,IAAA,IAAI,EAAC,QAAb;AAAsB,IAAA,OAAO,EAAEE,MAAM,CAACG,IAAP,CAAY,IAAZ,CAA/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAFD,CADJ;AAMH;;AAED,eAAeN,GAAf","sourcesContent":["import React,{useState,useEffect} from 'react';\nfunction App(){\n const [title,hehe]=useState('首页')\n function change(){\n hehe(\"呵呵呵!\")\n };\n useEffect(()=>{\n change()\n return ()=>{\n console.log(\"xxxx!\")\n }\n },[title])\n return (\n <div>\n <li>{title}</li>\n <button type=\"button\" onClick={change.bind(this)}>click</button>\n </div>\n )\n}\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}
+1 -1
View File
@@ -41,7 +41,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
}
// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3005;
const HOST = process.env.HOST || '0.0.0.0';
if (process.env.HOST) {
+12 -7
View File
@@ -1,21 +1,26 @@
import React,{useState,useEffect} from 'react';
function App(){
const [title,setTitle1]=useState('首页')
const [title,setTitle1]=useState('首页');
const [chenxuan,setChenxuan]=useState("chenxuan")
function change(){
setTitle1("呵呵呵!")
};
function changeName(){
setChenxuan("帅哥")
}
useEffect(()=>{
document.title=title;
return ()=>{
console.log("页面离开了!")
}
},[title])
console.log("触发了!")
})
return (
<div>
<li>{title}</li>
<button type="button" onClick={change.bind(this)}>click</button>
<li>{chenxuan}</li>
<button type="button" onClick={change.bind(this)}>click1</button>
<button type="button" onClick={changeName.bind(this)}>click2</button>
</div>
)
}
export default App;
// 1 useEffect 相当于componentDidMount componentDidUpdate componentWillUnmount
//2、为避免每次都触发副作用函数,useEffect可传入第二个参数,当该值发生变化时才会触发副作用函数
+7 -1
View File
@@ -67,6 +67,7 @@ export default function Hoc(WithComponent){
}
render(){
this.aData=this.props.data;
// console.log(this.props)
if(this.aData && this.aData.length>0 && this.isInit){
for(let i=0;i<this.aData.length;i++){
if(i===0){
@@ -77,7 +78,12 @@ export default function Hoc(WithComponent){
}
}
return (
<WithComponent {...this.props} changeImg={this.changeImg.bind(this)} stop={this.stop.bind(this)} autoPlay={this.autoPlay.bind(this)} chenxuan="xxxxxxxxxx"></WithComponent>
<WithComponent
{...this.props}
changeImg={this.changeImg.bind(this)}
stop={this.stop.bind(this)}
autoPlay={this.autoPlay.bind(this)} chenxuan="xxxxxxxxxx">
</WithComponent>
)
}
}