chenxuan/react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

xxx

Browse Source
This commit is contained in:
chenxuan
2022-08-14 13:42:24 +08:00
parent ccc57ec252
commit ecebb6b1d8
16 changed files with 18354 additions and 2419 deletions
Download Patch File Download Diff File Expand all files Collapse all files
basic/1/P03.html
+2 -4
View File
@@ -1,7 +1,7 @@
<!--
* @Author: chenxuan
* @Date: 2021-12-23 23:27:50
* @LastEditTime: 2021-12-23 23:43:56
* @LastEditTime: 2022-08-13 17:08:36
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
@@ -21,9 +21,7 @@
const vm=(
<div>
{
data.map(function(item,index){
return <li key={index}>{item}</li>
})
data.map((item,index)=><li key={index}>{item}</li>)
}
</div>
)
basic/1/P06.html
+6 -1
View File
@@ -1,7 +1,7 @@
<!--
* @Author: chenxuan
* @Date: 2021-12-26 16:30:03
* @LastEditTime: 2021-12-30 22:12:26
* @LastEditTime: 2022-08-13 01:46:42
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
@@ -27,8 +27,13 @@
render(){
const {ishot}=this.state;
// 解决this指向问题
// this.demo 这是赋值操作，此时函数并没有调用
// 点击的时候调用 demo函数 此时是直接调用，由于类的局部默认开启严格模式，this指向 undefined
// 通过 bind() 传入this 修改this指向 将this指向Weather实例
return <h1 onClick={this.demo.bind(this)}>今天天气很{ishot ? '炎热' : '凉爽'}</h1>
}
// demo定义在 Weather的原型上，供实例使用
// 通过Weather的实例调用时 this指向实例
demo(){
this.setState({
ishot:!this.state.ishot
basic/1/P07.html
+2 -1
View File
@@ -1,7 +1,7 @@
<!--
* @Author: chenxuan
* @Date: 2021-12-31 00:08:42
* @LastEditTime: 2022-01-01 15:57:12
* @LastEditTime: 2022-08-13 16:28:03
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
@@ -18,6 +18,7 @@
<script src="../package/old/babel.min.js"></script>
<script type="text/babel">
class Weather extends React.Component{
// 给实例添加属性
state={ishot:true}
render(){
const {ishot}=this.state;
basic/2/P01.html
+3 -2
View File
@@ -1,7 +1,7 @@
<!--
* @Author: chenxuan
* @Date: 2022-01-02 15:24:10
* @LastEditTime: 2022-03-20 14:16:57
* @LastEditTime: 2022-08-13 18:48:48
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
@@ -18,7 +18,8 @@
<script src="../package/old/babel.min.js"></script>
<script type="text/babel">
class Demo extends React.Component{
haha=()=>{
haha=(e)=>{
console.log(e)
alert(this.refs.haha.value)
}
render(){
basic/5/P01.html
+2 -4
View File
@@ -1,7 +1,7 @@
<!--
* @Author: chenxuan
* @Date: 2022-01-05 22:48:03
* @LastEditTime: 2022-03-20 20:34:35
* @LastEditTime: 2022-08-13 19:19:05
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
@@ -26,9 +26,7 @@
this.setState({[dataType]:value})
}
render(){
console.log(this.state.name)
return (
<div>
<li>{this.state.passworld}</li>
<li>{this.state.userName}</li>
@@ -36,7 +34,7 @@
<input type="text" onChange={(event)=>{this.saveData('passworld',event.target.value)}} />
</div>
)
}
}
}
ReactDOM.render(
<Demo/>,document.getElementById('app')
basic/5/P02.html
+2 -2
View File
@@ -1,7 +1,7 @@
<!--
* @Author: chenxuan
* @Date: 2022-01-08 18:50:31
* @LastEditTime: 2022-03-20 20:25:48
* @LastEditTime: 2022-08-13 18:51:21
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
@@ -10,7 +10,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高阶组件</title>
<title>高阶函数</title>
</head>
<body>
<div id="app"></div>
basic/5/eg.html
+27
View File
@@ -0,0 +1,27 @@
<!--
* @Author: chenxuan
* @Date: 2022-08-13 19:30:57
* @LastEditTime: 2022-08-13 19:32:38
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柯里化</title>
</head>
<body>
<script>
function a(a){
return (b)=>{
return (c)=>{
return a+b+c
}
}
}
console.log(a(1)(2)(3))
</script>
</body>
</html>
basic/6/P05.html
+2 -1
View File
@@ -1,7 +1,7 @@
<!--
* @Author: chenxuan
* @Date: 2022-01-13 00:00:14
* @LastEditTime: 2022-04-05 23:14:03
* @LastEditTime: 2022-08-14 00:20:40
* @LastEditors: chenxuan
-->
<!DOCTYPE html>
@@ -40,6 +40,7 @@
// 定义在类自身，接收props state两个参数，必须返回状态对象
// 返回状态对象后会劫持原有state state的值在任何时候都取决于props
static getDerivedStateFromProps(props,state){
console.log("xx")
console.log(props,state)
return props
}
demo/proxy/p1/read.text
+2
View File
@@ -0,0 +1,2 @@
方法1
修改package.json "proxy": "http://m.kugo.com"
demo/proxy/p2/read.text
+2
View File
@@ -0,0 +1,2 @@
方法2
修改package.json
demo/proxy/p3/read.text
+11
View File
@@ -0,0 +1,11 @@
方法3
npm run eject
config/webpackDevServer.config
"proxy":{
"/api":{
"target":"http://m.kugo.com",
"changeOrigin": true,//默认false，是否需要改变原始主机头为目标URL
"pathRewrite": {"^/api" : " "},// 重写请求，比如我们源访问的是api，那么请求会被解析为/
"secure": false, //如果是https接口 需要配置这个参数为true
}
},
demo/proxy/p4/package-lock.json
Generated
+18281 -2393
View File
File diff suppressed because it is too large Load Diff
demo/proxy/p4/package.json
+8 -6
View File
@@ -3,13 +3,12 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.2",
"@testing-library/react": "^12.1.2",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
@@ -35,5 +34,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"http-proxy-middleware": "^2.0.6"
}
}
demo/proxy/p4/read.text
-1
View File
@@ -1 +0,0 @@
setupProxy.js未能再现
demo/proxy/p4/src/index.js
+4 -4
View File
@@ -1,14 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
demo/proxy/p4/src/setupProxy.js → demo/proxy/setupProxy.js
View File