Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

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
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
create-react-app [项目名]
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;
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;
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>);
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;
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/>);
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;
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" />);
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;
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)

AltStyle によって変換されたページ (->オリジナル) /