Skip to content

Commit 295edba

Browse files
author
victorsun
committed
upd: react18
1 parent 314da90 commit 295edba

File tree

23 files changed

+362
-0
lines changed

23 files changed

+362
-0
lines changed

‎12-前端框架/03-React/react18/01-start/03-create-react-app.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
create-react-app [项目名]

‎12-前端框架/03-React/react18/02-project/01-函数组件和类组件/App1.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const App = () => {
2+
return <h1>函数组件</h1>
3+
};
4+
5+
export default App;

‎12-前端框架/03-React/react18/02-project/01-函数组件和类组件/App2.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from "react";
2+
3+
class App extends React.Component {
4+
5+
// ...类组件使用 this 获取各类属性方法
6+
7+
// 创建属性存储DOM对象
8+
divRef = React.createRef();
9+
10+
// 向state中添加属性
11+
state = {
12+
count: 0,
13+
};
14+
15+
clickHandler = () => {
16+
// 【1】
17+
// this.setState({count: 1});
18+
19+
// 【2】
20+
this.setState(prevState => {
21+
return {
22+
count: prevState.count + 1
23+
}
24+
});
25+
};
26+
27+
// 必须包含 render 方法，返回虚拟 DOM
28+
render() {
29+
return (
30+
<div ref={this.divRef}>
31+
<h1>类组件{this.props.item}</h1>
32+
<span>{this.state.count}</span>
33+
<button onClick={this.clickHandler}>click</button>
34+
</div>
35+
);
36+
}
37+
}
38+
39+
export default App;

‎12-前端框架/03-React/react18/02-project/01-函数组件和类组件/index.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import ReactDOM from "react-dom/client";
2+
import App1 from "./App1"; // 函数组件
3+
import App2 from "./App2"; // 类组件
4+
5+
const root = ReactDOM.createRoot(document.getElementById('root'));
6+
7+
const propDatas = [1, 2, 3];
8+
const app2 = propDatas.map(item => <App2 item={item} />);
9+
10+
root.render(<div><App1/>{app2}</div>);

‎12-前端框架/03-React/react18/02-project/02-event/App.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
const App = () => {
2+
3+
/*
4+
原生DOM操作
5+
6+
<button onclick="alert('test')">click</button>
7+
<button id="test">click</button>
8+
document.getElementById('test').onclick = function(){};
9+
document.getElementById('test').addEventListener('click', function(){}, false);
10+
*/
11+
12+
/*
13+
React中事件通过元素属性设置
14+
15+
和原生JS不同，React中事件的属性需要使用驼峰命名法：
16+
onclick -> onClick
17+
onchange -> onChange
18+
19+
属性值不能直接执行代码，而是需要一个回调函数：
20+
onclick="alert('test')"
21+
onClick={()=>{alert('test')}}
22+
*/
23+
24+
const clickHandler = (event) => {
25+
26+
// return false; // 在React中，无法通过return false取消默认行为，原生也不推荐这样用
27+
event.preventDefault(); // 取消默认行为
28+
event.stopPropagation(); // 取消事件的冒泡
29+
30+
// 注意：React中的事件对象 event 不是原生的事件对象，因此无需再考虑兼容问题
31+
};
32+
33+
34+
return <div
35+
{/* 事件的集中绑定方式 */}
36+
style={{width: 200, height: 200, margin: '100px auto', backgroundColor:'#aaa'}}>
37+
38+
<button onClick={() => { alert('test'); }}>click</button>
39+
<a href="https://csxiaoyao.com" onClick={clickHandler}>取消默认跳转行为</a>
40+
</div>
41+
};
42+
43+
44+
45+
// 导出App
46+
export default App;

‎12-前端框架/03-React/react18/02-project/02-event/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import ReactDOM from "react-dom/client";
2+
import App from "./App";
3+
4+
const root = ReactDOM.createRoot(document.getElementById('root'));
5+
6+
root.render(<App/>);

‎12-前端框架/03-React/react18/02-project/03-props/App.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// 类组件写法参考《函数组件和类组件》
2+
// props.children 用于获取元素体，参考《portal》
3+
const App = (props) => {
4+
// 注意class的处理
5+
return (
6+
<div className={`item ${props.className}`}>{props.item}</div>
7+
);
8+
};
9+
10+
export default App;

‎12-前端框架/03-React/react18/02-project/03-props/index.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import ReactDOM from "react-dom/client";
2+
import App from "./App";
3+
4+
const root = ReactDOM.createRoot(document.getElementById('root'));
5+
const data = 1;
6+
root.render(<App item={data} className="content" />);

‎12-前端框架/03-React/react18/02-project/04-state/App.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import {useState} from "react";
2+
3+
const App = () => {
4+
5+
// 类组件写法参考《函数组件和类组件》
6+
7+
// [初始值, 修改函数]
8+
const [counter, setCounter] = useState(1);
9+
const [user, setUser] = useState({ name: 'csxiaoyao', age: 30 });
10+
11+
const addHandler = () => {
12+
// 直接给 counter 赋值不会触发重新渲染
13+
// counter += 1;
14+
15+
// !!! [默认setState是异步的] !!!
16+
setCounter(counter + 1);
17+
18+
// !!! [同步写法] !!!
19+
setCounter((prevCounter)=>{
20+
return prevCounter + 1;
21+
});
22+
};
23+
24+
// 对象的修改
25+
const updateUserHandler = () => {
26+
// 浅复制
27+
/*
28+
const newUser = Object.assign({}, user);
29+
newUser.name = 'sunshine';
30+
setUser(newUser);
31+
*/
32+
setUser({...user, name: 'sunshine'});
33+
};
34+
35+
36+
return <div className={'app'}>
37+
<h1>{counter}</h1>
38+
<button onClick={addHandler}>+</button>
39+
<button onClick={updateUserHandler}>change</button>
40+
</div>;
41+
};
42+
43+
export default App;

‎12-前端框架/03-React/react18/02-project/04-state/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import ReactDOM from "react-dom/client";
2+
import App from "./App";
3+
4+
const root = ReactDOM.createRoot(document.getElementById('root'));
5+
root.render(<App/>);

0 commit comments

Comments
 (0)